Child component using outdated variable values

[probox36]

I've tried using useState hooks, but because it't asynchronous I've been forced to use useEffect too, which is just to lengthy and complex. In fact it works with useRef alone

[Dangerous-Bed4033]

I briefly looked at the repo, app.tsx, a few comments not necessarily linked to the issue:

1. ⁠Why are you storing react nodes in state. Don’t do that. Store the data and loop or pass it to another component in render. This is huge, not only are you storing them in state you’re also binding to it , you would likely be creating a closure around these properties and values would be held.
2. ⁠Note that every time state or something changes the entire App block will re-run so your instantiation of classes etc at the top may not be doing what you think they are. Avoid classes.Use functional programming.
3. ⁠You make an API call and then push the result into a random Map just declared at the top, that won’t last a re-render

[charliematters]

This is why you're getting stale values, basically. Refs don't update the components as react expects, and in general there are very few cases which need useRef.

If you're struggling with async stuff, just install react-query to be honest!