How do I handle side effects in React?

How do I handle side effects in React?

In React, you can handle side effects using the useEffect hook. It allows you to perform side effects in function components.

Can you give me an example of using useEffect?

Sure! Here's a simple example:

useEffect(() => {
  // Your side effect code here, like fetching data
  fetchData();
}, [dependency]);

This runs the effect when the component mounts or when the dependency changes.

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

You can return a cleanup function from the useEffect callback. For example:

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Hello!');
  }, 1000);

  return () => clearTimeout(timer);
}, []);

Are there any common pitfalls to avoid?

Yes, some common pitfalls include forgetting to add dependencies to the dependency array, which can lead to stale closures, and not cleaning up side effects properly.