Unveiling the Power of useEffect React Hook

How to use Effects

useEffect takes two arguments:

• Callback Function: This is the main function that will be executed after the component is rendered. This function can perform any side effects required by the component.
• Dependencies Array: An optional array that contains the values that your effect depends on.

If the array is empty, the effect will only run once after the initial rendering -- check out the following code snippet:

useEffect(() => {

console.log(“useEffect”);

}, []);

If the dependency array contains data and one of these values changes, the effect will be re-triggered after the component updates:

const [count, setCount] = useState(0);

const [color, setColor] = useState("red”);

useEffect(() => {

console.log(count);

}, [count, color]);

If there is no array, then the function will be executed every time after each rendering:

useEffect(() => {

console.log(count);

}, );

Advanced use of the useEffect

Clean up the effect

In some cases, it's necessary to clean up the effects. For example, when an effect is no longer relevant after the props have changed, it needs to be “cleaned up.” To achieve this, you simply return a function from the useEffect hook, within which the cleanup activities are performed -- check out the following code snippet:

const [id, setId] = useState();

useEffect(() => {

let isSubscribed = true;

someAsyncOperation().then(result => {

if (isSubscribed) {

// your code

}

});

return () => {

isSubscribed = false;

};

}, [id]);

This trick works great for all kinds of functions, not just React effects!

Async-Await Operations in useEffect

To fetch data from an API, asynchronous operations are necessary. However, useEffect does not support async functions directly.

We have several options to perform asynchronous operations.

— Defining an async function FetchData inside useEffect:

const [id, setId] = useState();

useEffect(() => {

const fetchData = async () => {

const data = await fetchSomeData();

console.log(data);

};

fetchData();

}, [id]);

This is the most common and straightforward way to handle asynchronous operations inside useEffect.

— Using IIFE (Immediately Invoked Function Expression):

const [id, setId] = useState();

useEffect(() => {

(async () => {

const data = await fetchSomeData();

console.log(data);

})();

}, [id]);

This approach is similar to the first one but uses an IIFE for the immediate invocation of an async function.

— Create an asynchronous function outside the body of useEffect and then call it inside useEffect:

const [id, setId] = useState();

const fetchData = async () => {

const data = await fetchSomeData();

return data;

};

useEffect(() => {

fetchData();

}, [id]);

This async approach can be particularly useful when the same function is used in multiple effects or in other parts of your component. However, it's important to remember that if your function depends on props or state of the component, these dependencies must be properly managed to avoid outdated closures.

Custom Hooks

Create your own hooks using useEffect to reuse complex effect logic across different components.

export default function useUserData(userId) {

const [data, setData] = useState(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

setData(null);

setLoading(true);

setError(null);

const fetchData = async () => {

try {

const response = await fetch(`https://api.example.com/users/${userId}`);

const userData = await response.json();

setData(userData);

} catch (error) {

setError(error);

} finally {

setLoading(false);

}

};

fetchData();

}, [userId]);

return { data, loading, error };

}

Then you can use it from any component like this: