What Parameter You Should Pass To UseEffect Hook?

Hello world 😊

If you’re not familiar with React Hooks, please Read this wonderful article about It, and about when to use It, or you can simply check the react official website for the complete documentation.

A quick reminder won’t hurt πŸ‘Œ, a Hook, is a function that enables the developer to use state & other react features without using a class 😊clear? right?

UseEffect Hook is replacing:

componentDidUpdate  

and

componentWillUnmount

 in your functional component, it was released to solve some of the problems caused by using these methods while using It inside classes.

But, Talk to me about arguments PLEASE!πŸ€¦β€β™‚οΈ

Yes, sorry, it was a quick intro ✌ OH, arguments …

In general UseEffect Accepts, two arguments:

1- A function called effect:

A function that is executed the moment your component is mounted. in order to run some side effects.

  useEffect(() => {
    console.log('this function is executed in the first render :)')
  });

This function takes no params and should return a function or undefined.

the function returned is called cleanup which is executed before calling effect (to clean up effects from the previous render). 

 useEffect(() => {
    console.log('this function is executed in the first render :)')
    return () =>{
      console.log('cleaning effects')
    }
  });

Yeah, But, cleaning what exactly?

Well, imagine you’re trying to perform an API call the moment your component is mounting, ok ? and when the result is fetched, you want to set your loading state to false after finishing, at that moment if you exit your component, the fetching will stop, and will set the state to false, and you will see this error, every React developer is familiar with:

So, we need to make sure that our component is still mounted when the API call is finished

We can simply add our cleanup function to fix this problem:

 useEffect(() => {
        let mounted = true
        callAPI.then(() => {
            if (mounted) {
                setloading(false)
            }
        })
        return function cleanup() {
            mounted = false
        }
    }, [])

This way we can ask if the component is still mounted. and then we just add a variable that will change to false if we exit or dismount our component πŸ˜‰

in plain English: do something on unmount πŸ™‚

2- An array of dependencies

The first thing that you should keep in mind is that useEffect hook will be called at every render, or anytime the state was changed, to prevent this from happening; because sometimes, we just want our code to run once πŸ€·β€β™‚οΈ(eg: API call), we can pass an empty array to the hook:

useEffect(() => {
    console.log('i will be called only one , at the first render)')

  }, []);

Now, our code will run once, at the first render. cool 😁.

You can also pass some dependencies to this array, for example, you want the code inside useEffect to be executed only when this variable/props/state changed,

for example:

1- you want to run an animation everytime the menu was toggled βœ”

2- you want to show an alert everytime you receive an Ajax success function βœ”

Leave a Reply

Your email address will not be published. Required fields are marked *