如何让React的useEffect仅在组件更新时执行（排除首次挂载）

Great question! To make useEffect execute only when the component updates (and skip the initial mount), we can use a useRef to track whether the component has completed its first render. Refs are perfect for this because their values don't trigger re-renders, so we can safely track this state without causing extra renders.

Step-by-Step Implementation #

1. Create a mount tracker ref: Initialize a ref with true to mark that the component is in its first render phase.
2. Check and update the tracker in useEffect: On the first run (initial mount), flip the ref to false and exit early. For subsequent runs (updates), execute your desired logic.
3. Add dependencies: Include any values you want to trigger the update in the useEffect dependency array, just like you would normally.

Example Code #

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

function MyComponent() {
  const [count, setCount] = useState(0);
  const isFirstMount = useRef(true);

  useEffect(() => {
    // Skip the initial mount
    if (isFirstMount.current) {
      isFirstMount.current = false;
      return;
    }

    // This code runs ONLY on updates
    console.log("Component updated! Count is:", count);
  }, [count]); // Trigger when count changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>Increment</button>
    </div>
  );
}

Reusable Custom Hook #

If you need this behavior across multiple components, you can wrap it into a custom hook for cleaner code:

import { useEffect, useRef } from 'react';

function useUpdateEffect(effect, dependencies) {
  const isFirstMount = useRef(true);

  useEffect(() => {
    if (isFirstMount.current) {
      isFirstMount.current = false;
    } else {
      return effect();
    }
  }, dependencies);
}

// Usage in your component:
function MyComponent() {
  const [count, setCount] = useState(0);

  useUpdateEffect(() => {
    console.log("Component updated! Count is:", count);
  }, [count]);

  // ... rest of component
}

Why This Works #

• The useRef holds a mutable value that persists across renders. On the first mount, isFirstMount.current is true, so we flip it to false and don't run our update logic.
• Every subsequent time the component updates (triggered by changes in the dependency array), isFirstMount.current is false, so our effect logic runs as expected.

内容的提问来源于stack exchange，提问作者koo