DEV Community

Cover image for Understanding the useEffect() Hook in React
Sudhanshu Gaikwad
Sudhanshu Gaikwad

Posted on • Edited on • Originally published at dev.to

Understanding the useEffect() Hook in React

#webdev #programming #javascript #beginners

React introduced Hooks in version 16.8, and one of the most commonly used Hooks is useEffect(). The useEffect() Hook lets us perform side effects in function components, such as fetching data, updating the DOM, or setting up subscriptions.

How useEffect() Works
The useEffect() Hook accepts two arguments:

  1. A function: This is the effect that will run. This function is executed after the component renders (or re-renders). You can think of this as the "side effect" logic.
  2. An optional dependency array: This tells React when to re-run the effect. If you provide an empty array ([]), the effect will only run once, after the initial render.

Basic Syntax:

useEffect(() => { // Your side effect code here }, [dependencies]);
Enter fullscreen mode Exit fullscreen mode

Example 1: Fetching Data

import React, { useEffect, useState } from "react"; function DataFetchingComponent() { const [data, setData] = useState([]); const [error, setError] = useState(null); useEffect(() => { // Fetch data from an API fetch("https://jsonplaceholder.typicode.com/users") .then((response) => response.json()) .then((json) => setData(json)) .catch((err) => setError("Error fetching data")); }, []); return ( <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "20px" }}> <h1 style={{ textAlign: "center", marginBottom: "20px", color: "#333" }}> Users Data </h1>  <h2 style={{ textAlign: "center", marginBottom: "20px", color: "#333" }}> Understanding the useEffect() Hook in React By Sudhanshu Gaikwad </h2>  {error ? ( <p style={{ color: "red", textAlign: "center" }}>{error}</p>  ) : ( <table style={{ width: "100%", borderCollapse: "collapse", marginBottom: "20px", }} > <thead style={{ backgroundColor: "black", color: "white" }}> <tr> <th style={{ padding: "10px", textAlign: "left" }}>ID</th>  <th style={{ padding: "10px", textAlign: "left" }}>Name</th>  <th style={{ padding: "10px", textAlign: "left" }}>Username</th>  <th style={{ padding: "10px", textAlign: "left" }}>Email</th>  </tr>  </thead>  <tbody> {data.map((user) => ( <tr key={user.id} style={{ backgroundColor: user.id % 2 === 0 ? "#f2f2f2" : "white", borderBottom: "1px solid #ddd", }} > <td style={{ padding: "10px" }}>{user.id}</td>  <td style={{ padding: "10px" }}>{user.name}</td>  <td style={{ padding: "10px" }}>{user.username}</td>  <td style={{ padding: "10px" }}>{user.email}</td>  </tr>  ))} </tbody>  </table>  )} </div>  ); } export default DataFetchingComponent;
Enter fullscreen mode Exit fullscreen mode

Output

Image description

Example 2: Setting up a Timer

import React, { useState, useEffect } from "react"; function TimerComponent() { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((prevCount) => prevCount + 1); }, 1000); return () => clearInterval(interval); }, []); return ( <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh", backgroundColor: "#f0f4f8" }}> <div style={{ backgroundColor: "#fff", borderRadius: "10px", padding: "30px 50px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", textAlign: "center" }}> <h1 style={{ fontSize: "3rem", fontFamily: "Roboto, sans-serif", color: "#333", margin: "0" }}>{count} seconds</h1>  <p style={{ marginTop: "15px", fontSize: "1.2rem", color: "#666" }}>Timer running with useEffect hook</p>  </div>  </div>  ); } export default TimerComponent;
Enter fullscreen mode Exit fullscreen mode

Output

Image description

To summarize:

  1. Use useEffect() for tasks like fetching data, manipulating the DOM, or setting up timers.
  2. You can control when the effect runs by passing a dependency array.
  3. Always clean up effects when necessary by returning a function from the useEffect()callback.

Top comments (0)