2

Imagine you have this scenario

 useEffect(() => {
    console.log('query changed');
    setSomething(1)
    getStuff();
  }, [props.match.params.query])

const getStuff = async () => {
   console.log(something)
}

I've found in this scenario that something will always be the previous value. So for example if you change the props and something is 2, it will call setSomething(1), and put it into the queue. However, by the time you're inside getStuff, something will still be 2. How do you make it so that the setState function always applies before the next function is called?

Shooting Stars
  • 755
  • 1
  • 9
  • 20
  • Does this answer your question? https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately – Andy Nov 03 '21 at 20:36
  • I'm aware of the state callbacks, but those aren't supported for hooks without outside dependencies. I was under the impression that if you wanted to find the value outside of the useEffect, it would be updated, but apparently thats just not true. – Shooting Stars Nov 03 '21 at 21:01
  • 1
    You would need a separate useEffect hook to call `getStuff()` which would be ran whenever your state changes. Then `getStuff()` will have the updated state. – Andy Nov 03 '21 at 21:06

2 Answers2

1

The thing is when you call getStuff it accesses the outdated state value. To get the actual one you could use useCallback which creates a function binded with the updated state value.

export default function App() {
  const [something, setSomething] = useState();
  const [query, setQuery] = useState(0);
  const getStuff = useCallback(() => {
    console.log("something", something);
  }, [something]);

  useEffect(() => {
    console.log("query changed");
    setSomething(query);
    getStuff();
  }, [query, getStuff]);

  console.log("query", query);

  return (
    <div className="App">
      <button
        onClick={() => {
          setQuery(Math.random());
        }}
      >
        Change
      </button>
    </div>
  );
}

Does it solve your problem?

You could check it here https://codesandbox.io/s/naughty-lewin-rsvh5?file=/src/App.js:82-634

Georgy
  • 1,879
  • 2
  • 9
  • 14
0

Your function getStuff is async you need to use await, wrap that function in another function and invoke that

useEffect(() => {
    console.log('query changed');
    const getData=()=>{
      setSomething(1)
      await getStuff();
    }
    getData()
  }, [props.match.params.query])

you can not see the change in useEffect because useState is async, you need to put more bottom your console

console.log(something)
return (
  <div></div>
)
rnewed_user
  • 1,386
  • 7
  • 13
  • when I do this, the getStuff() console log is still incorrect. If I setSomething(1), and then call await getStuff the console log shows 2. – Shooting Stars Nov 03 '21 at 20:48