1

I have a state:

const [userName, setUserName] = useState('');

Next, I have the TextInput as:

                        <TextInput style={styles.value}
                            keyboardType={'default'}
                            placeholder={'Your Name'}
                            value={userName}
                            editable={true}
                            onChangeText={(value) => {
                                setUserName(value)
                            }} />

The on a button's onPress event I'm calling this function:

function saveButtonPressed() {
    alert("The Value of Name is " +  userName);
}

The problem is I can see the vvalue getting updated in the text field, but in the alert I still see '' and if I save tthe coe again the second time it shows the updated value.

Chaudhry Talha
  • 7,231
  • 11
  • 67
  • 116
  • May be some problem with alert, just check in console using console.log – amitpanday Jul 14 '21 at 11:04
  • @DeveloperAmit I did, it's the same, it's printing the old value. – Chaudhry Talha Jul 14 '21 at 11:07
  • where are you calling saveButtonPressed function ? – Guruparan Giritharan Jul 14 '21 at 11:21
  • @GuruparanGiritharan I have a button in the Navigation bar. Which I'm setting as: `useFocusEffect( useCallback(() => { navigation.setOptions({ headerRight: () => ( { saveButtonPressed() }}>Save),})}, [navigation]));` – Chaudhry Talha Jul 14 '21 at 11:36
  • in that case pass the userName variable as a dependency along with the navigation to the useFocusEffect hook – Guruparan Giritharan Jul 14 '21 at 11:39
  • @GuruparanGiritharan in `props` of the screen I'm quoting this issue from I've `{ route, navigation }` then I've created `const { name } = route.params;` and I tried passing this `name` to `const [userName, setUserName] = useState(name);` but still the issue remains. I get the old value in `userName` i.e. `name` and not the updated one that the `onChangeText` updated. – Chaudhry Talha Jul 14 '21 at 11:43
  • I think you should add saveButtonPressed as a dependency of the effect hook (I think that's going to make the ide/eslint complain about the function making the effect enter a loop so you'll need to wrap it in it's own useCallback with userName as a dependency). Also, I'm not sure if it is correct to have a useCallback inside useEffect, just don't think it makes sense at all – Pedro Feltrin Jul 14 '21 at 11:49

1 Answers1

0

The reason they don't show the current value has to do with your functions forming closures. Even if the value of userName changes, it is still a const and since the function where this was updated still has scope in the 1st re-render the updated value wont show. Instead when the scope changes outside the closure thats when you get the updated value in the 2nd re-render.

The first link has solutions for this. The second link has a bit more information about hooks.

These should answer your question in detail. https://stackoverflow.com/a/58877875/9745240 https://stackoverflow.com/a/54069332/9745240

And a read about closures should help you.

unSensei
  • 131
  • 8