DEV Community

kanaga vimala
kanaga vimala

Posted on

Hooks: useEffect.

useEffect:

useEffect is one of the hooks concept in React.
The useEffect Hook allows you to perform side effects in your components.
Some examples of side effects are: fetching data, directly updating the DOM, and timers.
useEffect accepts two arguments.
Enter fullscreen mode Exit fullscreen mode

useEffect(, )

Syntax:

useEffect(() => {
// Code to run on each render
return () => {
// Cleanup function (optional)
};
}, [dependencies]);

Effect function: This is where your side effect code runs.
Cleanup function: This optional return function cleans up side effects like subscriptions or timers when the component unmounts.
Dependencies array: React re-runs the effect if any of the values in this array change.
Controlling side effects in useEffect:

1.No dependency passed:
To run useEffect on every render do not pass any dependency

useEffect(() => {
//Runs on every render
});

2.An empty array:
To run useEffect only once on the first render pass any empty array in the dependecy

useEffect(() => {
//Runs only on the first render
}, []);

3.dependency array:
To run useEffect on change of a particular value. Pass the state and props in the dependency array

useEffect(() => {
//Runs on the first render
//And any time any dependency value changes
}, [prop, state]);

Top comments (0)