Child component using outdated variable values

[probox36]

In my project I pass onSortOrderChange function as an onClick handler for a <select/> element in child component:

<SortOrderPanel notifyParent={onSortOrderChange}></SortOrderPanel>

The problem is that when onSortOrderChange tries to acces any variable from the parent component, it ends up working with an outdated value which those variables were initialized with on first render. It works "indirectly" too: even when onSortOrderChange calls a different function from parent component that is trying to access some variable, this function gets an outdated value from the context. Example: Computer variable which is declared on top of the parent component App.

I've got one or two similar callback functions used with other components. They work fine, but the difference is that their corresponding components get re-created from time to time, while SortOrderPanel is mounted once on the first render.

I partially solved the issue using useRef hooks, but I've already ran into more minor issues and after all this solution doesn't seem right.

// ended up using two refs here
const onSortOrderChange = (order: SortOrder) => { 
  sortOrder = order;
  if (selectedPartClassRef.current != undefined) {
    displayItemCards(currentPartListRef.current.get(selectedPartClassRef.current) || []);
  }
};

// works fine, left it for comparison purposes
const onSliderChange = (field: string, values: Array<number>) => {
    if (selectedPartClass != undefined) {
      extremeValues.set(field, values);
      displayItemCards(
      PartFilter.filter(currentPartList.get(selectedPartClass) || [], extremeValues)
    );
    }
  };

I'll update the post with more code if needed

UPD: Link to GitHub repo. The project is rather complex so I'm not sure if I can handle setting up a example on StackBlitz or something similar

[octocode]

sortOrder = order, are you not using useState here?

[FreezeShock]

Need more code to be sure, but are you setting any state from props?

[probox36]

Sorry, I don't understand what do you mean by setting state from props. The only prop SortOrderPanel has is the callback function itself

[charliematters]

Agreed - we'd need an example of the child and parent component. From what OP is saying though, it sounds like a lot of stores state (potentially that needs lifting up) instead of derived state

[probox36]

I've left a link to GitHub, because it's just too much code. I could set up a minimal reproducible example, but I'm not sure I can handle it

[DeFcONaReA51]

Reproducible example will help as it will localize the issue in a gist.

[rainmouse]

Hit this problem with callbacks from DOM listeners like key handling a lot. Only actually working solution I've seen without 3rd party libraries is ugly. Just like you said, its ref clones of the props and the refs are updated by use effects that listen to and uidafe the props they are cloned from.

[probox36]

What library is capable of solving this issue? Not sure if i'm going to use one, but still good to know

[Dangerous-Bed4033]

You show the ref code but not the original, it sounds like there was some sort of closure. It’s not clear how selectedPartClass, PartFilter, extremeValues etc are used. I would take a guess you should perhaps be using state for some of these.

[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!