如何阻止useEffect重复触发？React组件状态同步问题求解

Container组件 #

import { InputField } from './InputField';

const sleep = (time: number) => new Promise((res) => setTimeout(res, time, ''));

export const Container = () => {
  const [inputValue, setInputValue] = React.useState('');

  React.useEffect(() => {
    (async () => await sleep(1000))();
    async function fetchMyAPI(time, value) {
      await sleep(time);
      setInputValue(value);
    }
    fetchMyAPI(1000, 'vbc1');
    fetchMyAPI(2000, 'dgi1');
  }, []);

  const inputChange = (value) => {
    setInputValue(value);
  };

  return <InputField inputValue={inputValue} inputChange={inputChange} />;
};

InputField组件 #

export const InputField = ({
  inputValue,
  inputChange,
}: {
  inputValue: string;
  inputChange: (value: string) => void;
}) => {
  const [value, setValue] = React.useState('');

  React.useEffect(() => {
    setValue(inputValue.slice(0, -1));
  }, [inputValue]);

  const handleChange = (event) => {
    setValue(event.target.value);
    inputChange(event.target.value + '1');
  };

  return <input value={value} onChange={handleChange} />;
};

代码逻辑说明 #

inputValue会多次变化，InputField使用本地状态value展示内容，两者存在固定转换关系：

• 监听inputValue变化时，将inputValue截取最后一位后赋值给value；
• 修改value时，给输入值追加'1'后传递给父组件的inputValue。

核心转换代码：

React.useEffect(() => {
  setValue(inputValue.slice(0, -1));
}, [inputValue]);

问题描述 #

每次调用handleChange时，先更新本地状态value，再更新Container的inputValue，此时监听inputValue的useEffect会触发，即使转换后的值和当前value完全相同，也会再次执行setValue，导致useEffect重复执行。

解决方案 #

方案1：添加值判断避免重复更新

在useEffect中增加值的校验，只有当转换后的值与当前本地value不同时，才执行状态更新，打断无意义的闭环更新：

React.useEffect(() => {
  const processedValue = inputValue.slice(0, -1);
  // 仅当处理后的值与当前本地状态不一致时才更新
  if (processedValue !== value) {
    setValue(processedValue);
  }
}, [inputValue, value]);

该方案保留了本地状态的设计，同时避免了不必要的状态更新和useEffect重复执行，不影响父组件异步更新（比如fetchMyAPI触发的inputValue变化）的同步逻辑。

方案2：移除本地状态，直接推导展示值

如果InputField不需要维护本地临时状态，完全可以基于父组件的inputValue直接计算展示值，从根源上消除状态同步问题：

export const InputField = ({
  inputValue,
  inputChange,
}: {
  inputValue: string;
  inputChange: (value: string) => void;
}) => {
  // 直接通过inputValue推导展示值，无需本地状态
  const displayValue = inputValue.slice(0, -1);

  const handleChange = (event) => {
    inputChange(event.target.value + '1');
  };

  return <input value={displayValue} onChange={handleChange} />;
};

这种方案更简洁，没有状态同步的风险，但仅适用于展示值完全由父组件状态推导的场景，若InputField需要处理输入中间态等本地逻辑，方案1更合适。

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