Using the functional updates pattern with React hooks

The functional updates pattern can be used whenever you need to update state using the previous state.

For example, if you were storing in state the number of times a button was clicked, you might do it by referring to the previous count state:

const App = () => {
    const [count, setCount] = useState(0);
    return (
        <button onClick={() => setCount(count + 1)}>
            Click
        </button>
    );
};

Instead of doing count + 1, you can pass in a function to setCount:

<button onClick={() => setCount(prevCount => prevCount + 1)}>
    Click
</button>

What’s the benefit of using functional updates?

In the above example, there’s no immediate benefit to using this pattern (that I know of). However if you were setting state inside of a useEffect hook:

useEffect(() => {
    setCount(count + 1);
}, [setCount, count]);

Since count is a dependency, each time count was changed by setCount, useEffect would be called again causing an infinite number of re-renders.

Using the functional updates pattern in this case makes sense:

useEffect(() => {
    setCount(prevCount => prevCount + 1);
}, [setCount]);

If you have any better use cases that you can think of, I’d love to hear about them!

Thanks for reading!

References

https://reactjs.org/docs/hooks-reference.html#functional-updates