UseEffect: Is it really Effective?

What Are Hooks

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

What is useEffect

If you have been working with class component you would have performed side effects in your component like updating Ui, fetching data from api or subscribing to any changes. Since the render method is too early to perform side effects we have lifecycle method in class component.

1. ComponentDidMount
2. ComponentDidUpdate
3. ComponentWillUnmount

You must have been concerned about how useEffect would handle all of this. Let's get started without further ado.

How to use useEffect

UseEffect accept two arguments:

• Callback: It is a function where we put write the side - effect logics.
• Dependency : It is an optional array of dependency. Callback function got executed whenever these dependency changes.

  useEffect(() => {
  //Callback
  }, [dependencies]);

Let's have a look at all of the scenarios with some examples:

• When the dependency is not provided: This side-effect runs after every rendering.

  useEffect(() => {
    console.log('App.js: useEffect');
  });

  return (
    <SafeAreaView style={backgroundStyle}>
      <View>
        <Text style={styles.sectionTitle}>Hi There {count} times</Text>
        <Button
          title="Press me"
          onPress={() => {
            setCount(count + 1);
          }}
        />
      </View>
    </SafeAreaView>
  );

If we check at the logs, we can see that the side-effect is called whenever the count changes.

 LOG  App.js: useEffect
 LOG  App.js: useEffect
 LOG  App.js: useEffect
 LOG  App.js: useEffect

• When the dependency array is empty: This side-effect will call first time only.

 useEffect(() => {
    console.log('App.js: useEffect');
  }, []);

If we look into logs, side-effect got called only one time

 LOG  Click Me
 LOG  Click Me
 LOG  Click Me
 LOG  Click Me

When configured in such a way, the useEffect() executes the callback just once, after initial mounting. We can say it will work like componentDidMount()

• When the dependency array have some parameter: This side-effect runs whenever the parameter changes .

 const [count, setCount] = React.useState(0);
  const [countDown, setCountDown] = React.useState(100);
  useEffect(() => {
    console.log('App.js: useEffect');
  }, [count]);
  return (
    <SafeAreaView style={{flex:1}}>
      <View>
        <Text style={styles.sectionTitle}>Hi There {count} times</Text>
        <Text style={styles.sectionTitle}>Time is ticking {countDown}</Text>
        <Button
          title="Increment"
          onPress={() => {
            console.log('Increment Count');
            setCount(count + 1);
          }}
        />
        <Button
          title="Decrement"
          onPress={() => {
            console.log('Decrement Count');
            setCountDown(countDown - 1);
          }}
        />
      </View>
    </SafeAreaView>
  );

If you closely look into console, You will find whenever the value of count changes, useEffect got called only then.

 LOG  App.js: useEffect
 LOG  Decrement Count
 LOG  Decrement Count
 LOG  Decrement Count
 LOG  Decrement Count
 LOG  Increment Count
 LOG  App.js: useEffect
 LOG  Increment Count
 LOG  App.js: useEffect
 LOG  Increment Count
 LOG  App.js: useEffect

So you can see it will work the same way like ComponentDidUpdate work in class component

Now you must be thinking, what about side-effect cleanup? Class component has a separate method to deal with it.

• Side-Effect Cleanup

Some side effects need a cleanup, like canceling any api call while un-mounting, closing connection or clearing timers.

We can achieve this by returning a cleanup function from
useEffect() callback.

useEffect(() => {
  // This is your side-effect logic
  return function cleanup() {
    // Side-effect cleanup
  };
},[dependencies]);

Cleanup works in following way:

1. While mounting the component, useEffect() invokes the callback having the side-effect. cleanup function is not called.
2. On later renderings, before invoking the next side-effect callback, useEffect() invokes the cleanup function from the previous side-effect execution, then runs the current side-effect.
3. At the end, after unmounting the component, useEffect() invokes the cleanup function from the latest side-effect.

Let me show you some basic code to explain:

 const [count, setCount] = React.useState(0);
  useEffect(() => {
    console.log('App.js: useEffect');
    return function cleanup() {
      console.log('App.js: cleanup');
    };
  }, [count]);
  return (
    <SafeAreaView style={{flex: 1}}>
      <View>
        <Text style={styles.sectionTitle}>Hi There {count} times</Text>
        <Button
          title="Increment"
          onPress={() => {
            console.log('Increment Count');
            setCount(count + 1);
          }}
        />
      </View>
    </SafeAreaView>
  );

If you look into the logs, cleanup function is getting called every time before invoking the next side-effect.

 LOG  App.js: useEffect
 LOG  Increment Count
 LOG  App.js: cleanup
 LOG  App.js: useEffect
 LOG  Increment Count
 LOG  App.js: cleanup
 LOG  App.js: useEffect

Use case of useEffect()

1. Updating Ui whenever the state changes.

2. *When we want to perform any action once, especially when the app mount first time. We can prefer useEffect. *

   Let us consider an example , we want to fetch list of newsfeed while loading the newsfeed screen.
   

 const [newsFeed, setNewsFeed] = React.useState([]);
  async function fetchNewsFeed() {
    const response = await fetch('/employees');
    const newsFeedData = await response.json(response);
    setNewsFeed(newsFeedData);
  }

  useEffect(() => {    //  can not be async
    fetchNewsFeed(); // Can invoke async function
  }, []);

Conclusion

1. useEffect(callback, dependencies) is the hook that manages the side-effects in functional components.

   • Callback argument is a function to put the side-effect logic.
   • Dependencies is a list of dependencies of your side-effect: being props or state values.

2. useEffect(callback, dependencies) invokes the callback after initial mounting, and on later renderings, if any value inside dependencies has changed.

3. useEffect(callback, dependencies) can be used in following ways

   • initial mounting(ComponentDidMount),
   • Managing state changes (ComponentDidUpdate)
   • For side-effect cleanup (ComponentWillUnmount)

Related Link

1. React-Hooks-Documentation
2. Hooks-API-Reference

I hope this post helped you understand the basic idea of useEffect(). Feel free to add your suggestions.
Follow me on Twitter.

Happy coding

Comments

[tanth1993]

On later renderings, before invoking the next side-effect callback, useEffect() invokes the cleanup function from the previous side-effect execution, then runs the current side-effect. I think this statement is the most important thing in useEffect. People usually think cleanup function/ the return would only run when component will unmount.

[Rajshekhar Yadav]

When I started working with it, I was also having the same misconception.

[Bobo Brussels]

Cool!