useEffect not firing on state update - reactjs

Question

I am updating some state with useState() in my react native component. Once I have that state set I want to save the details to the server, so I have set that up in an useEffect() hook. To be clear, the setting of the state IS working, and I see the value print to the screen.
However, what I'm noticing is, even though I've set note as a dependency in the dependency array of the useEffect() hook, the function never fires when the state updates. What am I missing here?
const [note, setNote] = useState('');
const dispatch = useDispatch();
useEffect(() => {
if (note) {
console.log('updating note...');
dispatch(updateNote(props.client.id, note));
}
}, [note]);
FYI, I am updating the state inside a TextInput, like so (I had to use onBlur to avoid the issue of react loosing focus on the first character type because I am passing a component within screenOptions of a TabNavigator):
<TextInput
key='note'
style={{
color: '#fff',
fontSize: 16,
width: '100%',
textAlign: 'center',
}}
placeholder='Tap here to share something...'
placeholderTextColor={styles.colors.textPlaceholder}
maxLength={50}
onBlur={(text) => setNote(text)}
defaultValue={note || props?.client?.note?.value}
/>
As I mentioned, this has been a tricky situation because I had to get around react's loss of focus when I rely on onChangeText() or onChange(). I am passing in a CustomHeader - which is a function inside the parent, to a TabNavigator within screenOptions like so:
screenOptions={{
headerShown: true,
headerStyle: {
backgroundColor: Colors.primary,
elevation: 0,
shadowOpacity: 0,
shadowColor: 'transparent',
height: 170,
},
key: 'patient-tab',
headerShadowVisible: false,
tabBarStyle: { backgroundColor: Colors.primary },
headerTintColor: Colors.light,
headerTitle: (props) => <CustomHeader {...props} />, // Passed in here
tabBarActiveTintColor: Colors.light,
tabBarInactiveTintColor: Colors.lightInactive,
tabBarActiveBackgroundColor: Colors.primary,
tabBarInactiveBackgroundColor: Colors.primary,
}}
The full code looks like this:
export const ClientBottomTabNavigator = (props) => {
const [note, setNote] = useState('');
const dispatch = useDispatch();
useEffect(() => {
if (props.client.id && note) {
console.log('updating note...');
dispatch(updateNote(props.client.id, note));
}
}, [props.client.id, note]);
const CustomHeader = () => {
return (
<View>
<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 }}>
<Feather
name='chevron-left'
size={24}
onPress={() => props.navigation.goBack()}
color={styles.colors.textInverse}
style={{ justifySelf: 'flex-start', alignSelf: 'flex-start', width: '32%', marginBottom: 6 }}
/>
<Text
style={{
color: '#fff',
fontSize: 18,
alignSelf: 'center',
justifySelf: 'center',
fontWeight: 'bold',
}}
>
{props?.client?.firstName} {props?.client?.lastName}
</Text>
<Feather
name='' // Leave this blank
style={{ justifySelf: 'flex-end', alignSelf: 'flex-end', width: '32%' }}
/>
</View>
<View style={{ alignItems: 'center', marginBottom: 6 }}>
<Text style={{ color: '#fff', fontSize: 18, marginBottom: 6 }}>
{convertDiscipline(props?.client?.discipline)}
</Text>
<View>
<TextInput
key='note'
style={{
color: '#fff',
fontSize: 16,
width: '100%',
textAlign: 'center',
}}
placeholder='Tap here to share something…’
placeholderTextColor={styles.colors.textPlaceholder}
maxLength={50}
onBlur={(text) => setNote(text)}
defaultValue={note || props?.client?.note?.value}
/>
</View>
</View>
</View>
);
};
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator
screenOptions={{
headerShown: true,
headerStyle: {
backgroundColor: Colors.primary,
elevation: 0,
shadowOpacity: 0,
shadowColor: 'transparent',
height: 170,
},
key: 'client-tab',
headerShadowVisible: false,
tabBarStyle: { backgroundColor: Colors.primary },
headerTintColor: Colors.light,
headerTitle: (props) => <CustomHeader {...props} />, // Passed in here
tabBarActiveTintColor: Colors.light,
tabBarInactiveTintColor: Colors.lightInactive,
tabBarActiveBackgroundColor: Colors.primary,
tabBarInactiveBackgroundColor: Colors.primary,
}}
initialRouteName={'Visits'}
>
<Tab.Screen
name='Visits'
component={VisitsTab}
options={{
tabBarLabel: 'VISITS',
tabBarIcon: ({ color, size }) => <FontAwesome name='street-view' color={color} size={size} />,
}}
/>
<Tab.Screen
name='Chart'
component={ChartTab}
options={{
tabBarLabel: 'CHARTS',
tabBarIcon: ({ color, size }) => <FontAwesome name='id-badge' color={color} size={size} />,
}}
/>
<Tab.Screen
name='Goals'
component={GoalsTab}
options={{
tabBarLabel: 'EDIT GOALS',
tabBarIcon: ({ color, size }) => <FontAwesome name='trophy' color={color} size={size} />,
}}
/>
</Tab.Navigator>
);
};

Answer 1

See here https://playcode.io/1106437, it works, but you have onBlur, you need to blur to trigger the action, maybe you need to use onChangeText insted.