Callback function created in custom react hook isn't being provided with an up to date value

user_19096924 0
Viewed 29

In a custom alert system I have created in react I have 2 main functions, a custom hook:

function useAlerts(){
  const [alerts, setAlerts] = useState([]);
  const [count, setCount] = useState(0);

  let add = function(content){
    let remove = function(){
      console.log(`alerts was set to ${alerts} before remove`);
      setAlerts(alerts.slice(1));
    };

    let newAlert = 
    <div className = 'alert' onAnimationEnd = {remove} key = {count}>
      <Warning/>
      <span>
        {content}
      </span>
    </div>


    setAlerts([...alerts, newAlert]);
    setCount(count + 1);
  }

  return [alerts,add];
}

and another element to display the data within the custom hook.

function Alerts(){
  let [alerts,add] = useAlerts();

  useEffect(() => {
    let handler = function(){
      add('test');
    };
    window.addEventListener('keyup',handler);
    return function(){
      window.removeEventListener('keyup',handler);
    }
  });

  return (
    <div className = 'alerts'>
      {alerts}
    </div>
  )
}

the current issue I have is with the remove callback function, the console will look something like this.

let remove = function(){
      console.log(`alerts was set to ${alerts} before remove`);
      /// expected output: alerts was set to [<div>,<div>,<div>,<div>] before remove
      /// given output: alerts was set to [] before remove
      setAlerts(alerts.slice(1));
};

I understand this is because the remove function is taking the initial value of the alert state, but how do I make sure it keeps an up to date value? React doesn't seem to allow useEffect in a callback so I seem to be a bit stuck. Is passing the value in an object the way to go or something?

react-hooks reactjs
1 Answers

The issue I believe I see here is that of stale enclosures over the local React state. Use functional state updates to correctly update from the previous state instead of whatever if closed over in callback scope. In fact, use functional state updates any time the next state depends on the previous state's value. Incrementing counts and mutating arrays are two prime examples for needing functional state updates.

function useAlerts() {
  const [alerts, setAlerts] = useState([]);
  const [count, setCount] = useState(0);

  const add = (content) => {
    const remove = () => {
      console.log(`alerts was set to ${alerts} before remove`);
      setAlerts(alerts => alerts.slice(1));
    };

    const newAlert = (
      <div className='alert' onAnimationEnd={remove} key={count}>
        <Warning/>
        <span>
          {content}
        </span>
      </div>
    );

    setAlerts(alerts => [...alerts, newAlert]);
    setCount(count => count + 1);
  }

  return [alerts, add];
}
user_86908570
Related