# React useEffect

The `useEffect` hook in React allows you to synchronize a component with an external system. It is a way to tell React that your component needs to do something after render. It accepts a callback function that contains instructions on what to do after rendering, and an array of dependencies.

The callback function will be called after the component has rendered and any time one of the dependencies has changed. The `useEffect` is a powerful tool that allows you to handle a wide range of tasks, from fetching data to setting up event listeners. It is similar to the lifecycle methods `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in React class components.

Here's an example of using useEffect to fetch data from an API and update the component state:

```javascript
import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://my-api.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []); // pass an empty array as the second argument to only run the effect on mount

  return data ? <div>{data.title}</div> : <div>Loading...</div>;
}
```

Here's an example of using useEffect to set up an event listener and clean it up on unmount:

```javascript
import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized');
    };
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // pass an empty array as the second argument to only run the effect on mount

  return <div>The window width is {window.innerWidth}</div>;
}
```

It's also possible to pass a list of dependencies as the second argument to `useEffect` to tell React when to re-run the effect. If the component re-renders and the dependencies haven't changed, the effect will not run again.

```javascript
import { useState, useEffect } from 'react';

function MyComponent({ id }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(`https://my-api.com/data/${id}`)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, [id]); 
  // This effect will only re-run if the id prop changes

  return data ? <div>{data.title}</div> : <div>Loading...</div>;
}
```

It's important to note that the dependencies list should only include the values that the effect function uses directly.