How to manage side effects in a React application

Question

With the help of code can you tell me How to manage side effects in a React application?

Answer 1

Side effects like data fetching, subscriptions, or manually changing the DOM are managed using the useEffect hook in React. It runs after the render and can clean up using a return function.

Example:

import { useEffect, useState } from 'react';

function MyComponent() {

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

  useEffect(() => {

    // Side effect: Fetch data

    fetch('/api/data')

      .then(res => res.json())

      .then(setData);


    // Cleanup (optional)

    return () => {

      console.log('Cleanup on unmount');

    };

  }, []); // Empty dependency array means run once on mount

}