在 useEffect 中使用 useCallback 和 useRef，将特定函数传递给子组件，以便在子组件中调用。这样，即使从特定函数更新状态，也不会重新触发 useEffect。

示例代码：

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

function ChildComponent({ updateState }) {
  useEffect(() => {
    console.log('ChildComponent mounted');
    return () => console.log('ChildComponent unmounted');
  }, []);

  // Call updateState when button is clicked
  return (
    
      Update State
    
  );
}

function ParentComponent() {
  const [counter, setCounter] = useState(0);
  const savedCallback = useRef();

  // Save a reference to the function to avoid re-creating it
  savedCallback.current = useCallback(() => {
    setCounter(prevCounter => prevCounter + 1);
  }, []);

  useEffect(() => {
    console.log('ParentComponent mounted');
    return () => console.log('ParentComponent unmounted');
  }, []);

  return (
    

      
Counter: {counter}
      
    
  );
}