DEV Community

Why pressing the key works only once in my React project?

Y on December 09, 2020

Hey there! Could you tell me what's wrong with this code? I have a button in my application that toggles the state. I would like to achieve the...

Read full post

JavaScript Joel • Dec 9 '20

This looks like an issue with stale values inside of useEffect.

Make this change:

// ❌ Stale value
if (e.code === 'Space') setItWorks(!itWorks)

// ✅ Correct value
if (e.code === 'Space') setItWorks(state => !state)

I have created a video on this topic here:

Cheers 🍻

Y • Dec 9 '20

Thanks Joel! :)

Y • Dec 9 '20

Thanks for the insights! With these corrections both methods work indeed!

Is there a reason to prefer one over the other?

Eranda K. • Dec 9 '20

useEffect(() => {
    document.addEventListener('keypress', (e) => {
        if (e.code === 'Space') setItWorks(!itWorks)
    })
}, [itWorks])

This might work. But haven't tested though.

Y • Dec 9 '20

Thanks Eranda! Seems like it doubles the number of added key listeners with each press and soon the application stops responding.

Which means the answer is to remove keyListeners and clean up useEffect an some point? Not sure how, I've reached the limit of my Hooks understanding 😜

Eranda K. • Dec 10 '20 • Edited

When we add itWorks as a dependency to useEffect, It will re-render for each change of itWorks value. So here it will cause the number of event listeners to multiply at each change.
So as @Vesa Piittinen suggests it is a good idea to remove the listener if you are adding it in the useEffect hook.