OnPress State update via AsyncStorage the screen is not re-rendering

Question

I've setItem in Home.js file as:

    AsyncStorage.setItem('myValue', JSON.stringify(3))

Now in another file called Ask.js I've a button where I'm calling it:

    const [val, setVal] = useState("1");
...
            <TouchableOpacity onPress={() => {
                AsyncStorage.getItem("myValue").then((value) => {
                    setVal(value)
                    console.log(value + ' and ' + val)
                });
            }}>

Based on the console.log When this button is pressed it logs 1 and 3 which seems like the value is not updated but if I press it again it'll print 3 and 3 which means the useState value was updated but it didn't rerender.

So how do I re-render?

@Konstantin It was a type... just fixed it... It still doesn't work — Chaudhry Talha, Apr 02 '21 at 10:48
@ZenoDallaValle yup that was a typo. But. even fixing it still it doesn't re-render — Chaudhry Talha, Apr 02 '21 at 10:50
i believe u can try to use `await AsyncStorage.setItem`. You should inspect your local storage and see if your value is updated. — Someone Special, Apr 02 '21 at 12:49
also using a getter (console.log('val')) right after a setter (setVal) will not reflect the correct value because the value is not set immediately( setstate is an async method). You have to render the value in your return block, don't test it with console.log — Someone Special, Apr 02 '21 at 15:39

score 0 · Answer 1 · answered Apr 02 '21 at 09:33

0

The problem is : you are not using setVal to update the value. It should be like this.

 <TouchableOpacity onPress={() => {
                AsyncStorage.getItem("myValue").then((value) => {
                    setVal(value)
                    console.log(value + ' and ' + val)
                });
            }}>

answered Apr 02 '21 at 09:33

sakshya73

5,570
5
22
41

the `val(value)` was a typo. I edited it but it still doesn't work. Like it updates the value but it is not re-rendering. – Chaudhry Talha Apr 02 '21 at 10:49

Zeno Dalla Valle · Answer 2 · 2021-04-02T15:36:38.460

0

I tried to replicate your example. I created this sandbox in react-native. For me is working fine.

EDIT 1:

When this button is pressed it logs 1 and 3 which seems like the value is not updated

That's because of the asynchronous nature of state hook (see this question). It is normal.

You didn't post the code in which you expect to see the change of val, I guess the problem is there.

edited Apr 02 '21 at 15:36

answered Apr 02 '21 at 12:33

Zeno Dalla Valle

957
5
16

OnPress State update via AsyncStorage the screen is not re-rendering

2 Answers2