I used three useEffect to control different states and adding/removing event listeners. But I'm not sure that is a best practice or not?
useEffect(() => {
window.addEventListener('keydown', keyPressHandle)
return () => {
window.removeEventListener('keydown', keyPressHandle)
}
}, [])
useEffect(() => {
// do sth on state_one
}, [state_one])
useEffect(() => {
// do sth on state_two
}, [state_two])
Yes, this is a best practice and Reactjs also recommends it
Tip: Use Multiple Effects to Separate Concerns
As Ryan said, this is the correct way to do it.
Controlling multiple states in a single useEffect() is extremely messy and sometimes impossible depending on what you want to achieve.
Nothing in the dependency array means the code will run when the component is mounted and is the functional equivalent to componentDidMount().
When a value is in the array, the side effects trigger each time the value is updated.
As you can probably tell, using the same useEffect() for both of these things would be impossible.