Why is the TextInput in the component cleared when editing the TextInput in the parent component?

Question

React Native

For example, there is a component

function TestComponent()
{
    const [testValue, setTestValue] = useState('');

    return <TextInput
        value={testValue}
        onChangeText={(text) => setTestValue(text)}
        style={styles.input}
        placeholder="Текст"
        maxLength={50}
    />
}

And when filling the parent TextInput, the TextInput located in the TestComponent component is cleared

<TextInput
 value={someValue}
 onChangeText={(text) => setSomeValue(text)}
 style={styles.input}
 placeholder="Текст"
 maxLength={50}
/>
<TestComponent/>

I think that the essence is not even in TextInput. Apparently, the component is rendered every time something happens from the outside. The question is how can this be avoided? Thanks in advance.

Answer 1

1 store the value of the child component in the parent
2 store the value for example in redux
3 try using shouldComponentUpdate
4 raise the imput field in the parent component
5 you can also look towards React.memo and React.PureComponent