Using useEffect in React to deal with side effects requires explicit dependency on arrays, cleaning logic and asynchronous operation methods. useEffect is used to handle side effects such as data acquisition and DOM update in function components. The core is to control execution timing by relying on arrays, and re-run the effect if the dependency changes; the cleanup function must be returned to avoid memory leaks, such as clearing the timer or unsubscribe; when handling asynchronous operations, the async function should be defined within the effect and the request life cycle is properly managed; common errors include omission of dependencies, incorrect cleaning and excessive use effects. Following these key points can effectively manage side effects.

Handling side effects in React with the useEffect hook is straightforward once you understand how it works. The key idea is that useEffect lets you perform side effects—like data fetching, subscriptions, or DOM manipulations—in functional components.

Here's how to use it effectively and avoid common pitfalls.

What Exactly Is a Side Effect in React?

In React, a side effect happens whenever your component interacts with something outside its scope—like:

• Fetching data from an API
• Setting up event listeners or subscriptions
• Updating the DOM manually
• Managing times or intervals

These actions can't always happen during rendering—they need to be handled after the render is committed to the screen. That's where useEffect comes in.

How to Use useEffect Properly

The basic structure of useEffect looks like this:

 useEffect(() => {
  // Your side effect logic here

  return () => {
    // Optional cleanup function
  };
}, [dependencies]);

Let's break down each part:

• Effect function : This runs after every render by default unless you specify dependencies.
• Cleanup function : If your effect sets up something that needs to be cleaned up (like a subscription or timer), return a function to do that.
• Dependency array : Controls when the effect should re-run. If you pass an empty array ( [] ), it only runs once (on mount and unmount).

Common Mistakes:

• Forgetting to add dependencies leads to stale values.
• Not cleaning up properly causes memory leaks.
• Overusing effects for things that don't need them (like deriving state).

When and Why You Need the Dependency Array

The dependency array tells React when your effect should run again. It's cruel to include all variables or props used inside the effect.

For example:

 useEffect(() => {
  fetchUserData(userId);
}, [userId]);

This ensures that if userId changes, the effect re-runs and fetches the correct user data.

If you're not careful, React will warn you in development mode about missing dependencies.

Tips:

• If you find yourself adding many dependencies, maybe your effect is doing too much. Consider splitting it into smaller ones.
• Use useCallback or useMemo if you're passing functions or objects as dependencies to avoid unnecessary re-renders.

Handling Async Operations Inside useEffect

You can't make the effect callback itself async , because React expects either a function or nothing as the return value. So instead, define an async function inside the effect:

 useEffect(() => {
  const fetchData = async () => {
    const result = await fetchSomeData();
    setData(result);
  };

  fetchData();
}, []);

Also, remember to clean up any ongoing requests if the component unmounts before they finish. Axios has a built-in way to cancel requests, or you can use a flag:

 useEffect(() => {
  let isMounted = true;

  fetchSomeData().then(data => {
    if (isMounted) setData(data);
  });

  return () => { isMounted = false; };
}, []);

Cleanup Is Just as Important

If your effect starts a process that continues beyond the current render—like a timer or a subscription—you must return a cleanup function.

Example with a timer:

 useEffect(() => {
  const id = setInterval(() => {
    console.log('Tick');
  }, 1000);

  return () => clearInterval(id);
}, []);

Without cleanup, the interval would keep running even after the component unmounts, which is a bug waiting to happen.

Use useEffect smartly, respect dependencies, and always think about cleanup. Do that, and side effects won't trip you up anymore.

The above is the detailed content of How do you handle side effects using the useEffect hook in React?. For more information, please follow other related articles on the PHP Chinese website!