Diaglog with TextInput Infinite rerender

[kyusungpark]

Hi, I am trying to make a component Dialog that has a TextInput.

Below is my component and whenever I type, I realized that I get infinite rerenders.

import { Dispatch, SetStateAction } from 'react';
import { View } from 'react-native';
import { Button, Dialog, Portal, TextInput } from 'react-native-paper';

const Feedback = ({ visible, hideDialog, showDialog, feedback, setFeedback }: IFeedback) => {
  return (
    <View>
      <Button onPress={showDialog}>share feedback</Button>
      <Portal>
        <Dialog visible={visible} onDismiss={hideDialog}>
          <Dialog.Title>Share your feedback</Dialog.Title>
          <Dialog.Content>
            <TextInput
              multiline
              label="feedback"
              value={feedback}
              onChangeText={(text) => setFeedback(text)}
            />
          </Dialog.Content>
          <Dialog.Actions>
            <Button onPress={hideDialog}>Cancel</Button>
            <Button onPress={hideDialog}>Send</Button>
          </Dialog.Actions>
        </Dialog>
      </Portal>
    </View>
  );
};

export default Feedback;

const Home = () => {
  const [visible, setVisible] = useState(false);
  const [feedback, setFeedback] = useState('');

  const { sendFeedback } = useSendFeedback();

  const showDialog = () => setVisible(true);
  const hideDialog = () => setVisible(false);

  return (
    <AppView>
      <Text>welcome</Text>

      <Feedback
        visible={visible}
        hideDialog={hideDialog}
        feedback={feedback}
        setFeedback={setFeedback}
      />

    </AppView>
  );
};

export default Home;

Seems like an issue with Provider. If I use Portal.Host infinite rerender goes away. But I am not sure why current home component is not getting context from provider when all other children are getting it without any problems.

Any direction/tips would be appreciated. Thank you!

[OlegKryvak]

I got same issue

[colecanning]

I was able to resolve this by putting the dialog in it's own component. This prevents the popover from re-rendering when the dialog's state changes (aka the text input value), which I think is causing the problem.

Here's an example

const Modal = ({ showDialog, setShowDialog }) => {
  return (
    <Portal>
      <ModalDialog showDialog={showDialog} setShowDialog={setShowDialog} />
    </Portal>
  );
};

const ModalDialog = ({ showDialog, setShowDialog }) => {
  const [message, setMessage] = useState('');

  const handleSendMessage = async () => {
    setMessage('');
    setShowDialog(false);
    ...
  };

  return (
    <Dialog visible={showDialog} onDismiss={() => setShowDialog(false)}>
        <Dialog.Title>Title</Dialog.Title>
        <Dialog.Content>
            <TextInput
                value={message}
                onChangeText={setMessage}
                placeholder="Write your value here..."
            />
        </Dialog.Content>
        <Dialog.Actions>
            <Button 
                onPress={handleSendMessage}
                disabled={!message.trim()}
            >
                Send
            </Button>
        </Dialog.Actions>
    </Dialog>
  )
}