How to prevent inline functions from binding to old state values

Question

In a project with React components using hooks, I am trying to understand how to properly avoid calling callbacks that are bound to old state values. The below example illus

Answer 1

You should useCallback and pass it as a dependency to your effect.

const doStuff = useCallback(() => {
  console.log(message);
}, [message]);

useEffect(() => {
  const interval = setInterval(doStuff, 1000);
  return () => clearInterval(interval); // clean up
}, [doStuff]);

Here when message gets updated it will have its new value in the doStuff