I recently started learning React, and I learn the useState hook, however I’m struggling to learn the useEffect hook.
I’ve looked at the documentation searched it up and also watched a video about it but I still can’t find out what it is.
I recently started learning React, and I learn the useState hook, however I’m struggling to learn the useEffect hook.
I’ve looked at the documentation searched it up and also watched a video about it but I still can’t find out what it is.
2
Answers
To understand useEffect, you have to understand React’s three lifestyle methods: Mounting, when the component is first render; Updating, when the component or state changes; and lastly, Unmounting.
useEffect as it says in the name defines a function (an effect) which will run at one of the three points. To differentiate between the three. You have a dependency array which defines when your effect will run.
For when the first page renders you would use an empty dependency array. For when a state changes you would use a dependency array which would look like this [state] and for when the component unmounts you would have an empty dependency array which would have a return statement in it which would run when it unmounts.
It would look like this:
useEffect(() => {}, [])
useEffect(() => {}, [state])
useEffect(() => {return () = {}}, [])
I shall try to explain it in simple terms. useEffect is one of the most important hooks in react and is a way to handle life cycle of the component in which it is present.
useEffect runs on every render of the component (i.e when a state variable changes) and can also run every time a specific value changes that is mentioned in it’s dependency array.
useEffect also provides a very useful cleanup function which can be used to remove any active listeners when the component changes
Here are a few examples:
If you still don’t understand have a look at this
w3schools link for useEffect
react official documentation for useEffect