I have a TextInput and I don't want it to re render every time I change the value inside it

const [WrittenVal,setWrittenVal] = useState(()=>'');
...
    <TextInput
        value={String(WrittenVal)}
        onChangeText={text => setWrittenVal(text)}
    />

but I want to be able to change the value inside the input at the push of a button that's why I haven't just used defaultValue

any solutions??

CodePudding user response：

You cannot prevent re-renders on type. But your code can be simplified to:

const [value, setValue] = useState('');

<TextInput
    value={value}
    onChangeText={setValue}
/>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can't prevent re-render on input when the value change.

But you can prevent other components to be re-renderd by React.memo or useMemo hook.

And for changing value of input with button press you can do like this:

<Button onPress={() => {
    setWrittenVal(""); //write value you want in ""
}}