Run onChangeText doesnt update correctly TextInput value - react-native

Question

I'm creating my own searchbar in react-native, so I want to allow user clear the text input. To achieve this I'm using useState to track when the text input value is empty or not. I'm executing onStateChange('') to clean the text input value, the problem is if I access to value this show the value before onStateChange('') not empty string ''.
e.g. If I type react on input and after that execute onStateChange('') I expect the input value property to be empty, but it is not, value contains react yet, If I press other key the value is '' and not the current one. i.e. it is not saving the last value entered but the previus one.
SearchBar Usage
import React, { useState } from 'react';
import {
TextInput,
TouchableWithoutFeedback,
View,
} from 'react-native';
function SearchBar(props) {
const {
onChangeText,
value = '',
...textInputProps
} = props;
// Access to native input
const textInputRef = React.createRef();
// Track if text input is empty according `value` prop
const [isEmpty, setIsEmpty] = useState(value ? value === '' : true);
const clear = () => {
// Clear the input value with native text input ref
textInputRef.current?.clear();
// Update the text input `value` property to `''` i.e. set to empty,
if (onChangeText) onChangeText('');
// this is where the problem lies, because If I check the input text `value` property, this show the previus one, not the current one.
console.log(value);
};
const handleOnChangeText = (text) => {
if (onChangeText) onChangeText(text);
// track if text input `value` property is empty
setIsEmpty(text === '');
};
// Render close icon and listen `onPress` event to clear the text input
const renderCloseIcon = (iconProps) => (
<TouchableWithoutFeedback onPress={clear}>
<View>
<Icon {...iconProps} name="close" pack="material" />
</View>
</TouchableWithoutFeedback>
);
return (
<TouchableWithoutFeedback onPress={focus}>
<View>
<TextInput
{...textInputProps}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
onChangeText={handleOnChangeText}
ref={textInputRef}
/>
// helper function to render a component with props pased to it
<FalsyFC
style={{ paddingHorizontal: 8 }}
// If text input `value` is `isEmpty` show the `x` icon
component={!isEmpty ? renderCloseIcon : undefined}
/>
</View>
</TouchableWithoutFeedback>
);
}
SearchBar Usage
function SomeComponent() {
const [search, setSearch] = useState('');
const updateSearch = (query: string) => {
setSearch(query);
};
return (
<SearchBar
onChangeText={updateSearch}
value={search}
/>
)
}

Answer 1

I think you are missing a value prop in the TextInput (see React Native doc for TextInput).
In your case you would set your value variable from the props object you pass to the SearchBar functional component:
<TextInput
{...textInputProps}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
onChangeText={handleOnChangeText}
ref={textInputRef}
// add the line below
value={value}
/>

Answer 2

Every state changes are asynchronous even Hooks. With useState() you can't define a callback function even onStateChange() is not called. In your case, you should use the function useEffect().
function SomeComponent() {
const [search, setSearch] = useState('');
useEffect(() => {
//Write your callback code here
//copy-paste what you wrote on function onStateChange()
}, [search]);
const updateSearch = (query: string) => {
setSearch(query);
};
return (
<SearchBar
onChangeText={updateSearch}
value={search}
/>
)
}
Here is a link that should help you :
https://dmitripavlutin.com/react-useeffect-explanation/#:~:text=callback%20is%20the%20callback%20function,dependencies%20have%20changed%20between%20renderings.