What is useEffect Hook in ReactJS?How useEffect works and where to use it?

Prerequisite: Knowledge of JavaScript and Basic knowledge of ReactJS.

This post covers about useEffect hook of ReactJS. What is the uses of

useEffect? What is syntax ? How does it work? When to use it ? And Some common use cases of useEffect Hook.

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

What is useEffect() ?

Our React Application interact with outside world with functions. useEffect is ReactJS Hook which is used to handle side effect functions(side effect function are those function that communicate with outside world or just out of ReactJS ecosystem ) and by using useEffect we can separate them into other function.
useEffect hook must be declared inside the React component at top level of function. it gives several advantages :
*It will have access to those data that is required in useEffect hook.

• It cal also update the data later base on the dependency and updates. ## What is Syntax of useEffect hook? It accepts a function that interact with outside world of React components and array of dependency. If we want to execute useEffect after a specific event or state change we will pass our variables in array of dependency . Every time a variable passed to useEffect dependency arrayk is updated useEffect hook will be re-called.

useEffect(function sideeffect(){
.....
}, [array_of_dependency ])

About hook

• if we don’t pass dependency variable then useEffect hook will only called when our component is rendered .
• If we pass an empty array to useEffect then our component will be rendered for first time when a component is rendered. To re-call useEffect hook we have to refresh our page.
• If we pass dependencies to useEffect hook, then useEffect will executed every time when the variables which we passed to dependency array .

How does it work?

Every time a React components finish rendering, useEffect run unless you specified dependencies in the dependencies array.

When to use useEffect()?

There are several cases where we should consider using useEffect hook. Most import of them are :

• If we want to hit an API endpoint to fetch data and display data on client side. When our component is rendering, function or handler passed to useEffect hook called and data fetched in component states. Then these states are used in UI components.
• When we want to fetch data based on passed parameter, we can updated this parameter from client side. Once the parameter is updated to new data , useEffect hook will be re-called.
• We should useEffect, when your component depends on the outside world data, and we can not guarantee that data will come or not (maybe the server is down there). So, Instead of throwing errors and stop other components from being rendered, move them into useEffect hook.
• When you are using browser API including Timer function, fetch API, local storage and for more browser API, please refer : MDN Browser API.

Some use cases of React useEffect hook

1. Always run whenever component renders/re-renders

import React, { useEffect } from "react";
const UseEffectHookExmaple = () => {
  useEffect(() => {
    document.title = "UseEffect called when a component Rendered";
  });
  return (
    <div>
      <h1>UseEffect Hook Called every time a component is rendered</h1>
    </div>
  );
};

export default UseEffectHookExmaple;

2.Run once after that if component re-renders, then it will not run.

import React, { useEffect } from "react";
const UseEffectCalledOnce = () => {
  useEffect(() => {
    document.title = "UseEffect called Once when component Rendered";
  }, []);
  return (
    <div>
      <h1>UseEffect called Once when component Rendered</h1>
    </div>
  );
};

export default UseEffectCalledOnce;

3.Run once by default after that if prop values changes, then run

import React, { useEffect } from "react";
const UseEffectCalledOnce = ({ PageTitle }) => {
  useEffect(() => {
    document.title = PageTitle;
  }, [PageTitle]);
  return (
    <div>
      <h1>UseEffect called when PageTitle is updated</h1>
    </div>
  );
};

export default UseEffectCalledOnce;

If you have any suggestion please let us know in comment section.
GITHUB
Twitter