React Hook-我总是从useState获得陈旧的值，只是因为子组件永远不会更新

Question

TL;DR This is my Parent component:

const Parent = () => {

    const [open, setOpen] = useState([]);

    const handleExpand = panelIndex => {

        if (open.includes(panelIndex)) {
            // remove panelIndex from [...open]
            // asign new array to variable: newOpen
            // set the state

            setOpen(newOpen);

        } else {
            setOpen([...open, panelIndex]);
        }
    }

    return (
      <div>
         <Child expand={handleExpand} /> // No need to update
         <Other isExpanded={open} /> // needs to update if open changed
      </div>
    )
}

And this is my Child component:

const Child = (props) => (
   <button
      type="button"
      onClick={() => props.expand(1)}
   >
      EXPAND PANEL 1
   </button>
);

export default React.memo(Child, () => true); // true means don't re-render

Those code are just an example. The main point is I don't need to update or re-render Child component because it just a button. But the second time I click the button it's not triggering Parent to re-render.

If I put console.log(open) inside handleExpand like so:

const handleExpand = panelIndex => {
    console.log(open);
    if (open.includes(panelIndex)) {
        // remove panelIndex from [...open]
        // asign new array to variable: newOpen
        // set the state

        setOpen(newOpen);

    } else {
        setOpen([...open, panelIndex]);
    }
}

it printed out the same array everytime I clicked the button as if the value of open which is array never updated.

But if I let <Child /> component re-render when open changed, it works. Why is that? is this something as expected?

Answer 1

This is indeed expected behavior.

What you are experiencing here are function closures. When you pass handleExpand to Child all referenced variables are 'saved' with their current value. open = [] . Since your component does not re-render it will not receive a 'new version' of your handleExpand callback. Every call will have the same result.

There are several ways of bypassing this. First obviously being letting your Child component re-render.

However if you strictly do not want to rerender you could use useRef which creates an object and access it's current property:

const openRef = useRef([])
const [open, setOpen] = useState(openRef.current);

// We keep our ref value synced with our state value
useEffect(() => {
  openRef.current = open;
}, [open])

const handleExpand = panelIndex => {    
    if (openRef.current.includes(panelIndex)) {
        setOpen(newOpen);    
    } else {
        // Notice we use the callback version to get the current state
        // and not a referenced state from the closure
        setOpen(open => [...open, panelIndex]);
    }
}