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])
Share
Improve this question
asked Sep 6, 2021 at 14:41
curlybomcurlybom
851 silver badge7 bronze badges
1
- 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
Reset to default 5Yes, 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.