UseEffect: Is it really Effective?
Tags: javascript, reactnative, react
Published: 2021-12-26 10:09:59


### 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_
1. _ComponentDidUpdate_
1. _ComponentWillUnmount_

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

![alright-then-jim-carrey.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1640505845676/uGHSIaJ7B.gif)


### 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.

```javascript
  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.
 ```javascript
  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.

```console
 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.

```javascript
 useEffect(() => {
    console.log('App.js: useEffect');
  }, []);
``` 
If we look into logs, side-effect got called only one time 

```console
 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 .

```javascript
 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.

```console
 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.
![tenor.com](https://cdn.hashnode.com/res/hashnode/image/upload/v1640422721410/rccEv6Lo9.gif)


- **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`.*


```javascript
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.*
1. *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.*
1. *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:

```javascript
 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.

```console
 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.*
1. *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. 

```javascript
 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.

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

1. 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](https://reactjs.org/docs/hooks-overview.html) 
1. [Hooks-API-Reference](https://reactjs.org/docs/hooks-reference.html)


![thanks.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1640504504534/xPnxYRU7b.gif)

I hope this post helped you understand the basic idea of useEffect(). Feel free to add your suggestions. 
Follow me on  [Twitter](https://twitter.com/yrajshekhar231).


Happy coding