Avoid TextInput re render on text change - react-native

Question

I have a simple TextInput and a submit button and I want to handle text change without re render the componenent. On a class component I use a private variable "textContent" triggering OnChangeText event instead of a state to prevent forced rendering but I don't know how to do that with function component. Is it possible to store the text value without state on function component ? Thanks
Here is the component (that re render on text change) :
const Search = () => {
const [_films, setFilms] = useState([]);
const [_text, setText] = useState('');
const _loadFilms = () => {
console.log(_text);
if (_text.length > 0) {
getFilmsFromApiWithSearchedText(_text).then(data => {
setFilms(data.results);
});
}
}
console.log("rendering");
return (
<View style={styles.main_container}>
<TextInput style={styles.textinput} placeholder='Titre du film' onChangeText={(text) => setText(text)} />
<Button title='Rechercher' onPress={() => { _loadFilms() }} />
<FlatList
data={_films}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => <FilmItem film={item} />}
/>
</View>
);
}
const styles = StyleSheet.create({
main_container: {
flex: 1,
marginTop: 20
},
textinput: {
marginLeft: 5,
marginRight: 5,
height: 50,
borderColor: '#000000',
borderWidth: 1,
paddingLeft: 5
}
});
export default Search;`

Answer 1

On a class component you could store the text in a private variable of the class. With functional components you can use refs for something equivalent. More info about how, available in this SO question