₦airaland Forum

I don’t know this might help but let me drop it here.

Some useEffect hook mistakes and how to avoid them.

What is useEffect?

UseEffect is a react hook used in function components to run side effects. Side effects are those actions which a block of code produces which modifies or reads from data outside its scope e.g changing the value of a variable declared outside it scope, making request to an api, saving data to local storage etc.

when does useEffect run?

Unlike other hooks, which run while react is excuting the components functions , useEffect runs after react has return from the function and updated the dom which allows you to then run sideEffects. UseEffect also acts as component DidUpdate and componentWillUnmount for function components .

What is useEffect cleanup?

Because useEffect runs after react updates the dom. There a possibility that a user may cause a component to unmount by clicking away from a page before useEffect finishes running (eg when making a call to an external api on a different server). In that case , when the results come back , useEffect will try to update the state of our component so we can use the data . But remember our component has unmourned, this could cause our application to behave unexpectedly. To avoid this we need to abort any request we are making or any code we are running that has not completed when our components unmounts. In the case of fetching data we can use the abort Controller of fetch or axios.

What is the dependecy array for?

An empty array causes useEffect to run once , that is on initial render and not on subsequent rerenders until the component unmounts. If you pass a variable to useEffect, then useEffect runs whenever value of that variable changes. Mind you that javascript and in turn react compare primitive data types by values and objects by reference. Meaning if you pass an object, useEffect will run repeatedly non-stop running into an infinite loop because every time the component rerender , the component recreates the variables inside it meaning the address of the previous objects in memory will likely not be same thereby causing useEffect to run into infinite loop.
So watch out for these when building your projects

Hooks are react curses.

LikeAking:
Hooks are react curses.

I haven’t built anything using classes but I thought functions components are simpler than class components.

chukwuebuka65:
I haven’t built anything using classes but I thought functions components are simpler than class components.

People are used to JS functions so function components is something we can easily relate with.

As for React hooks they are just crazy, buy very useful.

LikeAking:
People are used to JS functions so function components is something we can easily relate with.

As for React hooks they are just crazy, buy very useful.

Ok