What are the Side Effects in React JS?

In React, side effects refer to any operations that interact with the outside world or manipulate state in a way that goes beyond the scope of the component's render logic. Side effects can include tasks such as:

• Fetching data from an API
• Subscribing to external data sources
• Manually changing the DOM
• Setting up or cleaning up timers or intervals
• Storing data to local storage

React provides the useEffect hook for managing side effects in functional components.

Understanding useEffect

The useEffect hook allows you to perform side effects in your components. It serves a similar purpose to lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

Basic Syntax of useEffect

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Code to run on every render
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default ExampleComponent;

In this example:

• useEffect is called after every render, updating the document title with the current count.

Dependencies in useEffect

You can optimize useEffect by specifying dependencies, which are values that the effect depends on. The effect will only run if any of these dependencies change.

Example with Dependencies

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Only re-run the effect if count changes

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default ExampleComponent;

In this example:

• The effect only runs when count changes, optimizing performance by avoiding unnecessary updates.

Cleaning Up Effects

Some effects require cleanup to avoid memory leaks or unintended behaviors. Cleanup can be done by returning a function from the useEffect callback.

Example with Cleanup

import React, { useState, useEffect } from 'react';

function TimerComponent() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(interval);
  }, []);

  return <div>Seconds: {seconds}</div>;
}

export default TimerComponent;

In this example:

• The effect sets up an interval that increments seconds every second.
• The cleanup function clears the interval when the component unmounts or when the effect re-runs.

Common Use Cases for useEffect

1. Fetching Data:

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

Subscribing to Data Sources:

import React, { useState, useEffect } from 'react';

function SubscriptionComponent() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    function handleMessage(event) {
      setMessage(event.data);
    }

    window.addEventListener('message', handleMessage);

    // Cleanup subscription
    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, []);

  return <div>{message}</div>;
}

export default SubscriptionComponent;

Handling Timers:

import React, { useState, useEffect } from 'react';

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => {
      setTime(time + 1);
    }, 1000);

    // Cleanup the timer
    return () => clearTimeout(timer);
  }, [time]);

  return <div>Time: {time}</div>;
}

export default TimerComponent;

Conclusion

Side effects in React are operations that interact with the outside world or manipulate state in a way that goes beyond the render logic of the component. The useEffect hook is the primary tool for managing side effects in functional components, providing a powerful and flexible way to handle a variety of tasks like data fetching, subscriptions, and manual DOM manipulations. Understanding how to effectively use useEffect and manage its dependencies and cleanup processes is crucial for building robust and efficient React applications.

Further, if you have any questions, please visit our website, Gurulabs Website Design Agency.