## What is a side effect? A side effect is any operation that affects something outside of the scope of the current function. For example, if you have a function that calculates the sum of two numbers, it does not have any side effects, because it only returns a value based on its inputs and does not modify anything else. However, if you have a function that fetches some data from an API and updates the state of your component, it does have a side effect, because it changes the state of your component, which in turn affects the UI. Side effects are not inherently bad, and they are often necessary to make your app interactive and dynamic. However, they need to be handled carefully, because they can introduce bugs, performance issues, or memory leaks if not done correctly. ## How to use the useEffect hook The useEffect hook is a function that takes two arguments: a callback function and an optional dependency array. The callback function is where you write your side effect logic, and the dependency array is where you specify when you want your effect to run. The basic syntax of the useEffect hook is: ```javascript useEffect( () => { // your side effect code here }, [ /* your dependency array here */ ] ); ``` The useEffect hook runs after every render of your component, unless you provide a dependency array. The dependency array is a list of values that determine when your effect should run. If any of the values in the dependency array change, the effect will run again. If the dependency array is empty, the effect will only run once, after the initial render. If the dependency array is omitted, the effect will run after every render. For example, suppose you have a component that displays a random joke from an API. You want to fetch a new joke every time the user clicks a button. You can use the useEffect hook to fetch the joke and update the state of your component, like this: ```jsx import React, { useState, useEffect } from "react"; const Joke = () => { const [joke, setJoke] = useState(""); const [loading, setLoading] = useState(false); // fetch a joke from the API const fetchJoke = async () => { setLoading(true); const response = await fetch( "https://official-joke-api.appspot.com/random_joke" ); const data = await response.json(); setJoke(data); setLoading(false); }; // use the useEffect hook to fetch a joke on the initial render useEffect(() => { fetchJoke(); }, []); // empty dependency array means the effect will only run once // render the joke or a loading message return (

{loading ? (

) : (

{joke.setup}

{joke.punchline}

)}

); }; export default Joke; ``` In this example, the useEffect hook has an empty dependency array, which means it will only run once, after the initial render. This way, we can fetch a joke and display it to the user when the component mounts. The user can then click the button to fetch another joke, which will update the state of the component and trigger a re-render. ## The dependency array The dependency array is a very important part of the useEffect hook, because it controls when your effect should run. If you don’t provide a dependency array, or if you provide an incorrect one, you may end up with unwanted or unexpected behavior. For example, suppose you have a component that displays the current time. You want to update the time every second, so you use the useEffect hook to set up an interval, like this: ```jsx import React, { useState, useEffect } from "react"; const Clock = () => { const [time, setTime] = useState(new Date()); // use the useEffect hook to set up an interval useEffect(() => { // create a function to update the time const tick = () => { setTime(new Date()); }; // set up an interval to call the tick function every second const interval = setInterval(tick, 1000); // return a cleanup function to clear the interval return () => { clearInterval(interval); }; }); // render the time return

{time.toLocaleTimeString()}

; }; export default Clock; ``` This code seems to work fine at first glance, but there is a subtle problem. The useEffect hook does not have a dependency array, which means it will run after every render of the component. This means that every time the component re-renders, a new interval will be created, and the old one will not be cleared. This will result in multiple intervals running at the same time, which will cause the time to update faster and faster, and eventually crash the app. To fix this problem, we need to provide a dependency array to the useEffect hook. In this case, we want the effect to run only once, after the initial render, so we can provide an empty dependency array, like this: ```js useEffect(() => { // create a function to update the time const tick = () => { setTime(new Date()); }; // set up an interval to call the tick function every second const interval = setInterval(tick, 1000); // return a cleanup function to clear the interval return () => { clearInterval(interval); }; }, []); // empty dependency array means the effect will only run once ``` This way, we can ensure that only one interval is created and cleared, and the time will update correctly every second. The dependency array can also have one or more values, depending on your use case. For example, suppose you have a component that displays a list of posts from an API. You want to fetch the posts based on a category that the user can select from a dropdown menu. You can use the useEffect hook to fetch the posts and update the state of your component, like this: ```jsx import React, { useState, useEffect } from "react"; const Posts = () => { const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(false); const [category, setCategory] = useState("all"); // fetch posts from the API based on the category const fetchPosts = async () => { setLoading(true); const response = await fetch( `https://jsonplaceholder.typicode.com/posts?category=${category}` ); const data = await response.json(); setPosts(data); setLoading(false); }; // use the useEffect hook to fetch posts when the category changes useEffect(() => { fetchPosts(); }, [category]); // category is a dependency, which means the effect will run whenever the category changes // handle the change of the category const handleChange = (event) => { setCategory(event.target.value); }; // render the posts or a loading message return (

{loading ? (

) : (

{post.title}

)}

); }; export default Posts; ``` In this example, the useEffect hook has a dependency array with one value: category. This means that the effect will run whenever the category changes, which happens when the user selects a different option from the dropdown menu. This way, we can fetch the posts that match the selected category and display them to the user. ## Cleaning up effects Some effects may require some cleanup after they are done. For example, if you set up an interval, a subscription, or an event listener in your effect, you need to clear them when your component unmounts, to avoid memory leaks or unwanted behavior. To perform cleanup in your effect, you can return a function from your callback function. This function will be called when your component unmounts, or before your effect runs again (if you have a dependency array). For example, in the Clock component that we saw earlier, we returned a function that clears the interval that we set up in our effect, like this: ```js useEffect(() => { // create a function to update the time const tick = () => { setTime(new Date()); }; // set up an interval to call the tick function every second const interval = setInterval(tick, 1000); // return a cleanup function to clear the interval return () => { clearInterval(interval); }; }, []); // empty dependency array means the effect will only run once ``` This way, we can ensure that the interval is cleared when the component unmounts, and we don’t end up with multiple intervals running at the same time. Similarly, if you set up an event listener in your effect, you should remove it in your cleanup function, like this: ```js useEffect(() => { // create a function to handle the window resize event const handleResize = () => { setWidth(window.innerWidth); }; // add the event listener to the window object window.addEventListener("resize", handleResize); // return a cleanup function to remove the event listener return () => { window.removeEventListener("resize", handleResize); }; }, []); // empty dependency array means the effect will only run once ``` ## Custom hooks with useEffect One of the benefits of using hooks is that you can create your own custom hooks to encapsulate and reuse logic across your components. Custom hooks are functions that start with the word “use” and can call other hooks inside them. You can use the useEffect hook inside your custom hooks to create reusable effects for your components. For example, suppose you want to create a custom hook that fetches data from an API and returns the data, the loading state, and the error state. You can use the useEffect hook to fetch the data and update the state of your custom hook, like this: ```js import { useState, useEffect } from "react"; // create a custom hook that takes a URL as an argument const useFetch = (url) => { // create a state for the data, the loading state, and the error state const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // use the useEffect hook to fetch the data from the URL useEffect(() => { // set the loading state to true setLoading(true); // use the fetch API to get the data fetch(url) .then((response) => { // check if the response is ok if (response.ok) { // return the response as JSON return response.json(); } else { // throw an error with the status text throw new Error(response.statusText); } }) .then((data) => { // set the data state with the fetched data setData(data); // set the loading state to false setLoading(false); }) .catch((error) => { // set the error state with the error message setError(error.message); // set the loading state to false setLoading(false); }); }, [url]); // use the URL as a dependency, so the effect will run whenever the URL changes // return the data, the loading state, and the error state from the custom hook return [data, loading, error]; }; export default useFetch; ``` Now, you can use this custom hook in any component that needs to fetch data from an API, like this: ```js import React from "react"; import useFetch from "./useFetch"; const Users = () => { // use the custom hook to fetch the users data from an API const [users, loading, error] = useFetch( "https://jsonplaceholder.typicode.com/users" ); // render the users data or a loading or error message return (

{loading ? (

) : error ? (

Error: {error}

) : (

{user.name}

)}

); }; export default Users; ``` This way, you can abstract and reuse the logic of fetching data and handling the loading and error states in your custom hook, and use it in any component that needs it. ## Common useEffect pitfalls and how to avoid them The useEffect hook can be tricky to use at first, and it may cause some unexpected or undesired behavior if not used correctly. Here are some common pitfalls that you may encounter when using the useEffect hook, and how to avoid them. ### Pitfall 1: Missing dependencies One of the most common pitfalls when using the useEffect hook is forgetting to include some dependencies in the dependency array. This can cause your effect to run with stale or outdated values, and lead to bugs or inconsistencies in your app. For example, suppose you have a component that displays a counter and a button that increments the counter. You also want to log the counter value to the console every time it changes. You may write something like this: ```jsx import React, { useState, useEffect } from "react"; const Counter = () => { const [count, setCount] = useState(0); // use the useEffect hook to log the count value to the console useEffect(() => { console.log(`The count is ${count}`); }, []); // empty dependency array means the effect will only run once // handle the click of the button const handleClick = () => { setCount(count + 1); }; // render the counter and the button return (

The count is {count}

); }; export default Counter; ``` In this example, the useEffect hook has an empty dependency array, which means it will only run once, after the initial render. However, this means that the effect will always use the initial value of count, which is 0, and will not reflect the updated value of count when the button is clicked. This will result in the console logging “The count is 0” every time the component re-renders, instead of the actual count value. To fix this problem, we need to include count as a dependency in the dependency array, like this: ```js useEffect(() => { console.log(`The count is ${count}`); }, [count]); // count is a dependency, which means the effect will run whenever the count changes ``` This way, we can ensure that the effect will use the latest value of count, and will log the correct value to the console every time the count changes. A good way to avoid missing dependencies is to use a linter plugin, such as eslint-plugin-react-hooks, which can warn you if you have any missing or unnecessary dependencies in your useEffect hook. ### Pitfall 2: Infinite loops Another common pitfall when using the useEffect hook is creating an infinite loop, which can cause your app to crash or freeze. This can happen when your effect updates a state or a prop that is also a dependency of your effect, causing the effect to run again and again. For example, suppose you have a component that fetches some data from an API and updates the state of your component with the data. You may write something like this: ```jsx import React, { useState, useEffect } from "react"; const Data = () => { const [data, setData] = useState(null); // use the useEffect hook to fetch the data from the API useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/1") .then((response) => response.json()) .then((data) => { // update the data state with the fetched data setData(data); }); }, [data]); // data is a dependency, which means the effect will run whenever the data changes // render the data or a loading message return

{data ?

{data.title}

}

; }; export default Data; ``` In this example, the useEffect hook has a dependency array with one value: data. This means that the effect will run whenever the data changes, which happens when the effect fetches the data and updates the state. However, this also means that the effect will run again after the state is updated, causing an infinite loop of fetching and updating data. To fix this problem, we need to remove data from the dependency array, since we don't want the effect to run when the data changes. We only want the effect to run once, after the initial render, to fetch the data. We can do so by providing an empty dependency array, like this: ```javascript useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/1") .then((response) => response.json()) .then((data) => { // update the data state with the fetched data setData(data); }); }, []); // empty dependency array means the effect will only run once ``` This way, we can avoid the infinite loop of fetching and updating data, and display the data correctly to the user. A good way to avoid infinite loops is to be careful about what you include in the dependency array, and avoid updating any state or prop that is also a dependency of your effect. ### Pitfall 3: Unnecessary re-renders Another common pitfall when using the useEffect hook is causing unnecessary re-renders of your component, which can affect the performance and user experience of your app. This can happen when your effect updates a state or a prop that is not used in your component, or when your effect runs too often due to an incorrect dependency array. For example, suppose you have a component that displays a random quote from an API. You want to fetch a new quote every 10 seconds, so you use the useEffect hook to set up an interval, like this: ```jsx import React, { useState, useEffect } from "react"; const Quote = () => { const [quote, setQuote] = useState(""); const [loading, setLoading] = useState(false); // fetch a quote from the API const fetchQuote = async () => { setLoading(true); const response = await fetch("https://api.quotable.io/random"); const data = await response.json(); setQuote(data.content); setLoading(false); }; // use the useEffect hook to set up an interval useEffect(() => { // fetch a quote on the initial render fetchQuote(); // set up an interval to fetch a new quote every 10 seconds const interval = setInterval(fetchQuote, 10000); // return a cleanup function to clear the interval return () => { clearInterval(interval); }; }, []); // empty dependency array means the effect will only run once // render the quote or a loading message return

{loading ?

{quote}

}

; }; export default Quote; ``` This code seems to work fine, but there is a subtle problem. The useEffect hook updates two states: quote and loading. However, the loading state is not used in the component, and it does not affect the UI. This means that every time the loading state changes, the component will re-render unnecessarily, which can cause performance issues or flickering. To fix this problem, we need to remove the loading state from the component, and only update the quote state, which is used in the component and affects the UI. We can do so by simplifying the fetchQuote function, like this: ```js // fetch a quote from the API const fetchQuote = async () => { const response = await fetch("https://api.quotable.io/random"); const data = await response.json(); setQuote(data.content); }; ``` This way, we can avoid the unnecessary re-renders of the component, and only update the UI when the quote changes. A good way to avoid unnecessary re-renders is to use the React DevTools to inspect your component and see what causes it to re-render, and to only update the state or props that are used in your component and affect the UI. ## Conclusion The useEffect hook is a powerful and versatile tool that allows you to perform side effects in your functional components. However, it also requires some careful attention and understanding to use it correctly and avoid common pitfalls. In this blog post, we learned the basics of the useEffect hook, how it differs from the class-based lifecycle methods, and how to use it effectively in your React projects. We also learned how to create custom hooks with useEffect, and how to avoid some common pitfalls such as missing dependencies, infinite loops, and unnecessary re-renders.

Bookmarked Posts