useEffect Hook

UseEffect Hook React:

useEffect – Hook, Which can be used in Functional Component.

We can do API calls
We can Update State here
We have dependency Array

Empty [] => Called only once when component is loaded
[props / state] => Called everytime when prop /state changes

The useEffect hook will replace method of Class Component
-componentDidMount –> []
-componentDidUpdate –> [props/state]
-componentWillUnmount –> return ()=>{ //cleanup }

// React Importing useEffect
import React, { useEffect } from “React“;

// HOOK CALLED HERE
useEffect(() => {
// code
// effect
// API call
// logic

// return will be called only when components UNMOUNT

return () => {
// Cleanup timer etc.
};
}, []);

useEffect(() => {
let timerId = setTimeout(() => {
// perform an action like state update
timerId = null;
}, 5000);

// clear the timer when component unmouts
return () => clearTimeout(timerId);
}, []);

Leave a Reply Cancel reply

Stiri similare