DEV Community

nop33.eth
nop33.eth

Posted on • Originally published at iliascreates.com on

Storing a function in React state

I felt very React-dumb today. I simply wanted to store a function in the state of a React component. So, I would initialize the component state:

const [myCallback, setMyCallback] = useState<() => void>()
Enter fullscreen mode Exit fullscreen mode

and later in the code I would have a button that sets this state:

const cb = () => console.log('hi!')
setMyCallback(cb)
Enter fullscreen mode Exit fullscreen mode

I’ve been breaking my head on why the hell my callback function gets called even though I never call it anywhere in my code! Notice that we didn’t execute cb() or myCallback() anywhere.

The problem is that the argument of the setState functions can be a function that let’s us update the state based on the previous value. See the docs of setState for details. React cannot tell if the function we pass is the aforementioned function, or the value that we want to store in our state. A solution to this is to simply wrap the value we want to store into a function:

setMyCallback(() => cb)
Enter fullscreen mode Exit fullscreen mode

So funny yet so frustrating at the same time! Hope I save someone’s time!

Top comments (0)