How can I manage side effects in my React application using hooks?

How can I manage side effects in my React application using hooks?

You can use the useEffect hook to handle side effects in your React components. It allows you to perform side effects like data fetching, subscriptions, or manually changing the DOM.

Can you give me an example of using useEffect for data fetching?

Sure! Here's a simple example:

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

const DataFetchingComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, []); // Empty dependency array means it runs once on mount

  return <div>{JSON.stringify(data)}</div>;
};

This will fetch data when the component mounts.

What if I need to clean up after the side effect?

Great question! You can return a cleanup function from useEffect. For example, if you're setting up a subscription, you can unsubscribe in the cleanup function to avoid memory leaks.

Can you show me how to implement a cleanup function?

Absolutely! Here's an example:

useEffect(() => {
  const subscription = someAPI.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, []);

This ensures that the subscription is cleaned up when the component unmounts.