React Native setState doesn't effect immediately data

Question

I am developing a project with react native.After using axios fetch data , then I changed my billingList state using returning data,but after that when I want logged this state,my array is blank.Data is returning but state doesn't change immediately.

 axios.get(url, config)
            .then(function (response) {
                if (response.data.status === true) {
                    console.log(response.data.data);
                    setBillingList(response.data.data)           
                    console.log(billingList);

                }
            })
            .catch(function (error) {
                console.log(error);
            })
       
    }

So using this data in responsive table,table is blank .

import { TableView } from "react-native-responsive-table"


 return (


        <View>
            <TableView
                headers={[
                    {
                        name: "S.no.",
                        reference_key: "no",
                    },
                    {
                        name: "Name",
                        reference_key: "name",
                    },
                    {
                        name: "Age",
                        reference_key: "age",
                    },
                ]}
                rows={billingList}
            />
        </View>
      

    )

Does this answer your question? [Why does calling react setState method not mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-does-calling-react-setstate-method-not-mutate-the-state-immediately) — David Scholz, Aug 29 '22 at 08:04
wait, what do you want? api call and setState both are async, couldnt get your request — Gaurav Roy, Aug 29 '22 at 09:22

score 0 · Answer 1 · answered Aug 29 '22 at 08:09

0

The reason is that state update does not happen immediately. This is because when we call the setState function, the entire component gets re-rendered – so React needs to check what all needs to be changed using the Virtual DOM algorithm and then perform various checks for an efficient update of the UI.

This is the reason you may not get the updated value instantly.

answered Aug 29 '22 at 08:09

Alpha

1,413
3
9
23

So ı want get updated value instantly.How can I do that for this? – Muhammet Aydoğan Aug 29 '22 at 08:40
Can you explain me your logic meaning what do you want to do after getting the updated state ? – Alpha Aug 29 '22 at 11:54

score 0 · Answer 2 · answered Aug 29 '22 at 14:36

Try putting your axios request in useEffect:

useEffect(() => {
    axios.get(url, config)
        .then(function (response) {
            if (response.data.status === true) {
                console.log(response.data.data);
                setBillingList(response.data.data)           
                console.log(billingList);

            }
        })
        .catch(function (error) {
            console.log(error);
        })
   
}
}, [])

I have done this multiple times and it should work!

You can also do a conditional, checking if the data is fetched by doing a ternary operation with your data state — jacob, Aug 29 '22 at 14:38

React Native setState doesn't effect immediately data

2 Answers2