This content originally appeared on DEV Community and was authored by Abdul Waqar
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? Accepts a function that interact with outside world of React components. If we want to execute useEffect after a specific event we pass an array of variables as dependency . Every time a variable passed to useEffect hook 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 passed variable data is updated.
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
- 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;
This content originally appeared on DEV Community and was authored by Abdul Waqar
Abdul Waqar | Sciencx (2021-08-16T02:45:28+00:00) What is useEffect Hook in ReactJS?How useEffect works and where to use it?. Retrieved from https://www.scien.cx/2021/08/16/what-is-useeffect-hook-in-reactjshow-useeffect-works-and-where-to-use-it/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.