useState doesn't update state by double click immediately

Question

I am trying to get info from an api but the useState() doesn't work correctly. I have a work order grid by double click on each row I get the work order id then I should get the information from a specific api route to "workorder/:id" and display them. but when I try to console log the information by double click on a row I get "undefined"

here is my code:

  const gridOptions = {
    onRowDoubleClicked: openWorkOrder,
  }
function openWorkOrder(row) {
        const workOrderId = row.data.id
        navigate(`workorder/${workOrderId}`)
        fetch(`baseURL/api/Gages/WorkFlow/GetProductDetailByOrderId?id=${workOrderId}`)
          .then((result) => result.json())
          .then((data) => props.setDetails(data))
        console.log(props.details)
    }

const [details, setDetails] = useState() is defined in the parent component.

Aliasghar Ahmadpour · Answer 1 · 2022-12-11T14:14:59.767

0

The useState in React is an asynchronous hook (Reference). When you call useState, it doesn't update state immediately.

If you want to get updated state, you must use useEffect hook.

import { useEffect } from "react";


useEffect(() => {
    console.log(details)
},[details]);

For more Detail about React useEffect hook refer to documentation

Also Refer to Is setState() method async? and Change is not reflected and await useState in React for more detail

edited Dec 11 '22 at 14:14

answered Dec 11 '22 at 13:37

Aliasghar Ahmadpour

436
6
24

It is not asynchronous - I've explained that in my answer. More details in the updated React docs: https://beta.reactjs.org/apis/react/useState#ive-updated-the-state-but-logging-gives-me-the-old-value – Ali Nauman Dec 11 '22 at 13:53
Dear @AliNauman it's wrong please refer to main documentation in https://reactjs.org/docs/state-and-lifecycle.html setState works Async – Aliasghar Ahmadpour Dec 11 '22 at 14:14
You've linked the documentation for the `setState` method accessible in class components, while we are talking about the function returned by `useState`. Neither the old React docs (https://reactjs.org/docs/hooks-reference.html#usestate) nor the new ones (I linked earlier) say that the setter function from `useState` is asynchronous. – Ali Nauman Dec 11 '22 at 14:23
Functions and effects in React component are essentially closures (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), hence why the state updates feel "asynchronous" while they really are not. – Ali Nauman Dec 11 '22 at 14:25

score 0 · Answer 2 · answered Dec 11 '22 at 13:52

0

The function returned by useState does not update the state immediately. Instead, it tells React to queue a state update, and this will be done once all event handlers have run.

Once the component is re-rendered, you will then see the new state.

When you console.log right after the fetch, the component has not yet re-rendered, and hence you see undefined.

answered Dec 11 '22 at 13:52

Ali Nauman

1,374
1
7
14

so how can I solve the problem? I tried useEffect but it didn't work correctly – Andish Dec 11 '22 at 21:39
1

You should rethink what you are trying to do here - you want to update a parent component's state through a child component. You normally have a parent component managing the state, while the child just renders it (received as props) – Ali Nauman Dec 13 '22 at 16:49

score 0 · Answer 3 · answered Dec 11 '22 at 13:56

0

Fetch is async, and you placed console.log() after it, so there are no props.details at this moment. You can try to convert openWorkOrder to async function and await for fetched results.

answered Dec 11 '22 at 13:56

Daniel

2,621
2
18
34

when you use then and pass callback, there's no need to use async – Aliasghar Ahmadpour Dec 11 '22 at 14:04

useState doesn't update state by double click immediately

3 Answers3