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])

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])

• javascript
• reactjs
• react-hooks
• use-effect

• It is the best practice indeed, there are no side effect, the only thing to remember is that they are executed in the order they were declared. – Anthony Raymond Commented Sep 6, 2021 at 14:51

2 Answers 2

Yes, this is a best practice and Reactjs also remends 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 ponent is mounted and is the functional equivalent to ponentDidMount().

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.