React Native: Variable state not updated on first click

Question

I am new in react-native and i am working on an app.

The below code is a simple react-native app which has a custom component with custom events.

But the problem is the variable state is not updated on the first click on the component. But when i click on the second item, The state of the variable is updated.

Please find the code and screenshot below.

App.js

import React, {useState} from 'react';
import { Text, SafeAreaView, ToastAndroid } from 'react-native';
import Dropdown from './components/dropdown';

const app = () => {
    const [ itemData, setItemData ] = useState('');

    return (
        <SafeAreaView style={{ margin: 50 }}>
            <Dropdown 
              onPressItems={(item) => {
                  ToastAndroid.show('item: ' + item, ToastAndroid.LONG)
                  setItemData(item)
                  ToastAndroid.show('setItem: ' + itemData, ToastAndroid.LONG)
              }}/>
        </SafeAreaView>
    );
}

export default app;

Dropdown.js

import React, { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';

const Dropdown = (props) => {
    return (
        <TouchableOpacity onPress={() => { props.onPressItems('this is sample data') }}>
            <Text>Sample Text</Text>
        </TouchableOpacity>
    );
} 

export default Dropdown;

Screenshot

Code: https://snack.expo.dev/@likithsai/custom-component

Please help me on this issue. Thanks.

Does this answer your question? useState set method not reflecting change immediately — Rafael Tavares
– Rafael Tavares, Commented Jan 19, 2022 at 15:30

Yaman KATBY · Accepted Answer · 2022-01-19 15:38:08Z

1

useState() hook changes the state asynchronously. so you can't make sure that the state will be changed immediately after calling setItemData() function.

Try useEffect to run a side effect whenever the state changes.

useEffect(() => {
  ToastAndroid.show("setItem: " + itemData, ToastAndroid.LONG);
}, [itemData]);

However, this code will show the toast on the component mount. to prevent it try something like this:

const isInitialMount = useRef(true);

useEffect(() => {
  if (isInitialMount.current) {
    isInitialMount.current = false;
  } else {
    ToastAndroid.show("setItem: " + itemData, ToastAndroid.LONG);
  }
}, [itemData]);

edited Jan 19, 2022 at 15:38

answered Jan 19, 2022 at 15:26

Yaman KATBY

2,07314 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

likith sai Over a year ago

Ok. What can i do for this issue. :(

Yaman KATBY Over a year ago

Updated @likithsai

likith sai Over a year ago

is it possible to setItemData(itemData) inside the useEffect()?. I know its a silly question, but i actually want to store the value inside a variable.

Yaman KATBY Over a year ago

of course, you can. However in the example provided above you don't need

Yaman KATBY Over a year ago

Just update your onPressItems callback to

js (item) => {                   ToastAndroid.show('item: ' + item, ToastAndroid.LONG)                   setItemData(item)               }

|

Ian Vasco · Accepted Answer · 2022-01-19 15:29:01Z

0

Your code is working just as expected. One of the hooks that are useful to watch for state updates is useEffect. You can add this to your code and see it's working properly:

const app = () => {
    const [ itemData, setItemData ] = useState('');

    React.useEffect(() => {
      console.log('updated itemData:', itemData)
    }, [itemData])

    return (
        <SafeAreaView style={{ margin: 50 }}>
            <Dropdown 
              onPressItems={(item) => {
                  ToastAndroid.show('item: ' + item, ToastAndroid.LONG)
                  setItemData(item)
                  ToastAndroid.show('setItem: ' + itemData, ToastAndroid.LONG)
              }}/>
        </SafeAreaView>
    );
}

You need to take into consideration that useState updates are asynchronous, which means the change won't be reflected immediately.

answered Jan 19, 2022 at 15:29

Ian Vasco

1,34015 silver badges20 bronze badges

2 Comments

likith sai Over a year ago

OK. Can i use setItemData(itemData) inside the useEffect()?

Ian Vasco Over a year ago

Well, it depends on what you are trying to do. If you dependency array in your useEffect includes itemData it won't make any sense since it will create a loop. What you can do is to show the Toast inside the useEffect to show the correct data.

Collectives™ on Stack Overflow

React Native: Variable state not updated on first click

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related