请教关于React Hooks 怎么使useEffect 第一次不执行？

Question

请教大家一个问题，我是一个超级菜鸟开发，在项目中使用React Hooks写法，经常碰到一个需求是需要关注一个数据变化然后回调一些数据给其他组件

 useEffect(() => {
    if (handleChange) handleChange(tagValue);
  }, [tagValue]);

其他组件回拿到这个tagValue再去请求接口，问题出在如果一个组件关联了多个回调，那么由于每次useEffect都会初次执行就会导致关联的组件多次触发，目前我的一个解决办法是

useEffect(() => {
    if (!initLoad && handleChange) handleChange(tagValue);
  }, [tagValue]);


  useEffect(() => {
    initLoad = false;
    return () => {
      initLoad = true;
    };
  }, []);

但是我个人感觉这应该不是最优解，请问大家有更好的办法么，还是我这种关联回调写法是错误的？谢谢大家

Answer 1

const firstUpdate = useRef(true);
useLayoutEffect(() => {
        if (firstUpdate.current) {
            firstUpdate.current = false;
            return;
        }
       else {
            handleChange(tagValue);
        }
    }, [tagValue]);

今天刚遇到的问题,这是我的解决办法.

最新的解决办法,绝对完美.

Answer 2

const callback=useCallback(() => {
    if (!initLoad && handleChange) handleChange(tagValue);
  }, [tagValue]);

什么地方需要调用就callback();

Answer 3

自定义一个hook
function useDidUpdateEffect(fn, inputs) {
const didMountRef = useRef(false);
useEffect(() => {

if (didMountRef.current){
    fn();
} else {
    didMountRef.current = true;
}

}, inputs);
}

Answer 4

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

function MyComponent() {
  const [inputValue, setInputValue] = useState('');
  const isInitialRender = useRef(true); // 用于标记是否是首次渲染

  useEffect(() => {
    if (isInitialRender.current) {
      isInitialRender.current = false;
      return;
    }

    // 模拟接口请求获取新的数据
    setTimeout(() => {
      const newData = 'New Data';
      // 判断当前输入框是否被用户修改过
      if (!inputValue) {
        setInputValue(newData); // 只在输入框未被修改过时更新值
      }
    }, 1000);
  }, [inputValue]);

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleInputChange} />
  );
}