What is React Hooks?

Hooks are functions that let you use the React state and lifecycle events in a functional component. Hooks won't work inside classes. They came into existence to solve many problems created by the class-based components. In class, it was hard to reuse stateful logic between components. But in function, hooks allow us to reuse stateful logic without changing the component hierarchy.

There are many Hooks. Two of the most commonly used are State Hook and Effect Hook. In this post, we will be taking a look at the Effect Hook.

What is Effect Hook?

If you have used class-based components in react then you might be knowing about the Lifecycle events like componentDidMount, componentDidUpdate, and componentWillUnmount. The Effect Hook, useEffect, serves the same purpose as these but unified into a single API.

How to use Effect Hook?

Now we will be using the mighty Effect Hook.

importing useEffect

import React, { useEffect } from 'react'

Calling on every render

This function will be called on every render of the component.

// called on every render
useEffect(function callMeEveryRender(){
    // do something
});

Calling on Mount

This function will be called when the component will be mounted.

// called only on mount
useEffect(function callMeOnMount(){
    // do something
}, []);

Calling when value changes

This function will be called when the value count changes.

// called when count changes
useEffect(function callMeOnCountChanges(){
    // do something
},[count]);

Calling and Cleaning up on every render

This function will be called on every render of the component and perform the cleanup.

// called when count changes
useEffect(function callMeAndCleanupEveryRender(){
    return function foo(){
        // do something
    }
});

Calling on Mount and cleanup before Unmount

This function will be called when the component will be mounted and perform the cleanup before the component gets unmounted.

// called only on mount and cleanup before unmount
useEffect(function callMeOnMountAndCleanupBeforeUnmount(){
    return function foo(){
        // do something
    }
},[]);

Some rules of useEffect

• Don’t call Hooks inside loops, conditions, or nested functions. Only call Hooks at the top level.
• Don’t call Hooks from regular JavaScript functions. Only call Hooks from React function components.

And don't break the rules, if you will then you will be in great trouble and may get into infinity loops.

Conclusion

We have seen how to use useEffect in a React Function Component

I hope this helped you with understanding useEffect!
Thanks for reading!
Happy Coding!