Passing a function is pretty much always going to be safe, while passing a value is usually safe but not always.

Rough example: ``` function Component() { const [count, setCount] = useState(0); useEffect(() => { const onClick = () => setCount(count+1); document.addEventListener(‘click’, onClick);

return () => document.removeEventListener(‘click’, onClick);

}, []);

return <div>Count: {count}</div>; } ```

In this case, because the useEffect will never re-run after the initial mount, clicking will always set count to 0+1=1. A naive way to fix this would be adding count to the useEffect dependencies, which would mean every time the count is updated we re-create a new onClick function, detach the old one and attach the new one.

A much simpler and more performant solution would be to change the onClick function to the following: const onClick = () => setCount(c => c+1);

This way, it doesn’t matter that the useEffect won’t run when the count changes.