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.
>Solution :
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 () = {}}, [])