Menu
I have some side effects to apply in my react component and want to know how to organize them:
Which is better in terms of performance and architecture?
963
You can have multiple useEffects in your code and this is completely fine! As hooks docs say, you should separate concerns. Multiple hooks rule also applies to useState - you can have multiple useState in one component to separate different part of the state, you don't have to build one complicated state object.
If you have just made a new project using Create React App or updated to React version 18, you will notice that the useEffect hook is called twice in development mode. This is the case whether you used Create React App or upgraded to React version 18.
Your useEffect is executed only once per render cycle, but you have several state updates in your useEffect which cause a re-render. Hence you get a lot of alerts. useEffect executes on every re-render if you don't pass the dependency array.
1. useEffect() is for side-effects. A functional React component uses props and/or state to calculate the output. If the functional component makes calculations that don't target the output value, then these calculations are named side-effects.
The pattern that you need to follow depends on your use case.
First: You might have a situation where you need to add event listener during the initial mount and clean them up at unmount and another case where a particular listener needs to be cleaned up and re-added on a prop change.
In such a case, using two different useEffect is better to keep the relevant logic together as well as having performance benefits
useEffect(() => {
// adding event listeners on mount here
return () => {
// cleaning up the listeners here
}
}, []);
useEffect(() => {
// adding listeners everytime props.x changes
return () => {
// removing the listener when props.x changes
}
}, [props.x])
Second: You need to trigger an API call or some other side-effect when any of the state or props change from a defined set. In such a case a single useEffect with the relevant dependencies to monitor would be better
useEffect(() => {
// side effect here on change of any of props.x or stateY
}, [props.x, stateY])
Third: You need separate side-effect for different sets of changes. In such a case, separate out relevant side-effects into different useEffects
useEffect(() => {
// some side-effect on change of props.x
}, [props.x])
useEffect(() => {
// another side-effect on change of stateX or stateY
}, [stateX, stateY])
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
