React Hooks: Optimizing useEffect (or Effect Hook)

Recently, we have been using React Hooks a lot at Get on Board (especially useEffect and useState) and I have learned some details about conditions and optimization that are not so explicit in the documentation. Here I will explain in more detail the array passed as a second argument (which is optional) to avoid executing useEffect on every re-render. I will also explain how conditions are handled with this Hook.

Second argument of useEffect (optional array)

1. Arrays can have more than one value 😱

In the documentation, they tell us that thanks to this argument we can execute useEffect only when the value of the second argument changes, but they don't explain what happens if this array is composed of more than one value: Do all or some values need to change for useEffect to execute? The answer is "it will execute if ANY of the values change",since the evaluation of these changes is interpreted as an or and not as an and of the items.

useEffect(() => { // Do something }, [firstValue, secondValue]); // "Do something" will be executed // every time that firstValue OR secondValue change // because if any value change we are getting a different array

2. Execute useEffect only once

This is a simple trick, for this you just need to pass an empty array as the second argument.

useEffect(() => { // Do something }, []); // Just the first render every time this component is mounted

3. Precautions

Sometimes we use a value from the global state of the application (for example, the Redux state) to add as a second argument of useEffect and expect the latter to execute only when that value changes. When we use this resource, we must keep in mind that a state object can change to another with exactly the same value, which is interpreted as a change anyway, generating an unnecessary execution of useEffect.

This is not such a relevant consequence, but it can be a headache if you're expecting your effect to execute when the content of the value you're listening to changes.

Conditionals

If you need the code of this hook to execute when something inside your program has a certain value and you need to add a conditional, this must always be declared inside the Hook.

This is very useful when you want to execute a function that will bring more data to our general state of the application, but it's only worth executing the first time that component is mounted and this value doesn't exist yet.

// GOOD! Place the condition inside the Hook useEffect(() => { if (posts === null) { // This will run only if posts are not still fetched. // If you mount this component more than once, // the request won't be executed again getPosts(); } }, []); // Besides, with the empty array this Effect just run once // BAD! Wrapping the Effect inside the condition if (posts === null) { useEffect(() => { getPosts(); }, []); }

Conclusion

These Hooks have good optimization techniques that are not so well documented, but they are still there waiting for us to discover them to improve the performance of our applications.

Hooks are a powerful tool that help us consider using simple functions instead of complex classes, which helps a lot in maintaining cleaner and simpler code.

⭐️ Find the best programming jobs at getonbrd.com