{"id":3388,"date":"2026-09-14T15:38:52","date_gmt":"2026-09-14T07:38:52","guid":{"rendered":"http:\/\/www.shubhsutra.com\/blog\/?p=3388"},"modified":"2026-09-14T15:38:52","modified_gmt":"2026-09-14T07:38:52","slug":"what-is-the-purpose-of-the-useeffect-hook-4d1f-cf0c43","status":"publish","type":"post","link":"http:\/\/www.shubhsutra.com\/blog\/2026\/09\/14\/what-is-the-purpose-of-the-useeffect-hook-4d1f-cf0c43\/","title":{"rendered":"What is the purpose of the useEffect hook?"},"content":{"rendered":"

Hey there, fellow devs! I’m a supplier of Hooks, and I’ve been getting a lot of questions lately about the useEffect<\/code> hook. So, I thought I’d take a moment to break it down and explain what its purpose is. Hooks<\/a><\/p>\n

<\/p>\n

First off, if you’re new to React, Hooks are a relatively new addition to the library. They were introduced in React 16.8, and they allow you to use state and other React features without writing a class. useEffect<\/code> is one of the most commonly used Hooks, and it’s super powerful.<\/p>\n

So, what’s the deal with useEffect<\/code>? Well, in a nutshell, it’s a way to perform side effects in functional components. Side effects are things like data fetching, subscriptions, or manually changing the DOM. In class components, these side effects are usually handled in the componentDidMount<\/code>, componentDidUpdate<\/code>, and componentWillUnmount<\/code> lifecycle methods. With useEffect<\/code>, you can handle all of these in one place.<\/p>\n

Let’s start with the basics. Here’s a simple example of how you might use useEffect<\/code> to perform a side effect:<\/p>\n

import React, { useEffect } from 'react';\n\nfunction Example() {\n  useEffect(() => {\n    \/\/ This is where you put your side effect code\n    console.log('Component mounted or updated!');\n    \/\/ You can also return a cleanup function if needed\n    return () => {\n      console.log('Component will unmount!');\n    };\n  });\n\n  return <div>Hello, World!<\/div>;\n}\n<\/code><\/pre>\n
In this example, the useEffect<\/code> hook takes a function as an argument. This function is called the effect function, and it contains the code for your side effect. The effect function is called after every render, both on the initial render and on subsequent updates.<\/p>\n
The optional return value of the effect function is a cleanup function. This cleanup function is called before the component unmounts, and it’s used to clean up any resources that were created in the effect function. In our example, we’re just logging a message to the console, but in a real-world scenario, you might use the cleanup function to unsubscribe from a subscription or clear a timer.<\/p>\n
Now, let’s talk about when the effect function is called. By default, the effect function is called after every render. This means that if your component re-renders because of a state change or a prop change, the effect function will be called again. Sometimes, this is what you want, but other times, you might want to limit when the effect function is called.<\/p>\n
That’s where the second argument to useEffect<\/code> comes in. This argument is an array of values, and it’s called the dependency array. If you pass a dependency array as the second argument to useEffect<\/code>, the effect function will only be called if one of the values in the dependency array has changed since the last render.<\/p>\n
Here’s an example:<\/p>\n
import React, { useState, useEffect } from 'react';\n\nfunction Example() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    document.title = `You clicked ${count} times`;\n  }, [count]);\n\n  return (\n    <div>\n      <p>You clicked {count} times<\/p>\n      <button onClick={() => setCount(count + 1)}>\n        Click me\n      <\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
In this example, we’re using useEffect<\/code> to update the document title whenever the count<\/code> state variable changes. We pass [count]<\/code> as the second argument to useEffect<\/code>, which means that the effect function will only be called if count<\/code> has changed since the last render.<\/p>\n
If you pass an empty dependency array ([]<\/code>) to useEffect<\/code>, the effect function will only be called on the initial render. This is equivalent to the componentDidMount<\/code> lifecycle method in class components.<\/p>\n
import React, { useEffect } from 'react';\n\nfunction Example() {\n  useEffect(() => {\n    console.log('Component mounted!');\n    return () => {\n      console.log('Component will unmount!');\n    };\n  }, []);\n\n  return <div>Hello, World!<\/div>;\n}\n<\/code><\/pre>\n
In this example, the effect function is only called on the initial render, and the cleanup function is called before the component unmounts.<\/p>\n
Now, let’s talk about some real-world use cases for useEffect<\/code>. One common use case is data fetching. When you’re building a web application, you often need to fetch data from an API. You can use useEffect<\/code> to perform this data fetching operation.<\/p>\n
Here’s an example:<\/p>\n
import React, { useState, useEffect } from 'react';\n\nfunction Example() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    async function fetchData() {\n      try {\n        const response = await fetch('https:\/\/api.example.com\/data');\n        const json = await response.json();\n        setData(json);\n        setLoading(false);\n      } catch (error) {\n        console.error('Error fetching data:', error);\n        setLoading(false);\n      }\n    }\n\n    fetchData();\n  }, []);\n\n  if (loading) {\n    return <div>Loading...<\/div>;\n  }\n\n  return (\n    <div>\n      {JSON.stringify(data)}\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
In this example, we’re using useEffect<\/code> to fetch data from an API on the initial render. We set the loading<\/code> state variable to true<\/code> initially, and we update it to false<\/code> once the data has been fetched. We also handle any errors that occur during the data fetching process.<\/p>\n
Another common use case for useEffect<\/code> is subscriptions. For example, if you’re building a real-time application, you might need to subscribe to a WebSocket or an event stream. You can use useEffect<\/code> to manage these subscriptions.<\/p>\n
import React, { useEffect } from 'react';\n\nfunction Example() {\n  useEffect(() => {\n    const socket = new WebSocket('ws:\/\/example.com\/socket');\n\n    socket.addEventListener('message', (event) => {\n      console.log('Received message:', event.data);\n    });\n\n    return () => {\n      socket.close();\n    };\n  }, []);\n\n  return <div>Real-time application<\/div>;\n}\n<\/code><\/pre>\n
In this example, we’re using useEffect<\/code> to create a WebSocket connection on the initial render. We add an event listener to the WebSocket to handle incoming messages, and we return a cleanup function to close the WebSocket connection before the component unmounts.<\/p>\n
So, there you have it! That’s a basic overview of the purpose of the useEffect<\/code> hook. It’s a powerful tool that allows you to perform side effects in functional components in a clean and concise way. Whether you’re fetching data, managing subscriptions, or manually changing the DOM, useEffect<\/code> has got you covered.<\/p>\n
<\/p>\n
If you’re looking to integrate high – quality React Hooks into your projects, I’m here as a Hooks supplier to offer you reliable resources. Our Hooks are designed to simplify your development process and help you build more efficient and maintainable applications. If you’re interested in procurement or have any questions about our offerings, don’t hesitate to reach out for a chat. Let’s work together to take your React applications to the next level!<\/p>\n
Hooks<\/a> References:<\/p>\n