React中useEffect内onChange引发重复请求的最佳实践

针对你遇到的子组件因父组件回调频繁更新导致重复触发fetch的问题，以下是几种无需Redux等工具的优雅解决方案：

1. 子组件侧使用通用自定义Hook缓存最新回调 #

核心思路是：让fetch的触发仅依赖value（真正需要触发请求的变量），用自定义Hook缓存最新的onChange回调，避免将回调加入useEffect依赖数组。

首先实现一个通用的useLatest Hook，用于缓存任意值的最新引用：

import { useEffect, useRef } from 'react';

const useLatest = (value) => {
  const ref = useRef(value);
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref;
};

然后修改子组件代码：

import { useEffect, useState } from 'react';
import useLatest from './useLatest';

const Child = ({ onChange, value }) => {
  // 缓存最新的onChange回调
  const onChangeRef = useLatest(onChange);

  useEffect(() => {
    console.log("called");
    fetch(`blah/${value}`)
      .then((result) => onChangeRef.current(result))
      .catch((error) => onChangeRef.current(error));
  }, [value]); // 仅依赖value，不再依赖onChange

  return <div>Child</div>;
};

这种方式下，父组件无需做任何修改，子组件的实现也简洁可复用，useLatest Hook可以在其他需要缓存最新值的场景中重复使用。

2. 重构子组件职责，分离数据获取与回调触发 #

如果子组件的核心功能是根据value获取数据，可以让子组件内部管理请求状态，仅在数据/错误状态变化时触发回调，同时结合useLatest避免回调依赖问题：

import { useEffect, useState } from 'react';
import useLatest from './useLatest';

const Child = ({ onChange, value }) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const onChangeRef = useLatest(onChange);

  // 仅在value变化时触发请求
  useEffect(() => {
    console.log("called");
    fetch(`blah/${value}`)
      .then((result) => setData(result))
      .catch((error) => setError(error));
  }, [value]);

  // 当数据或错误状态变化时，调用最新的回调
  useEffect(() => {
    if (data !== null || error !== null) {
      onChangeRef.current(data || error);
    }
  }, [data, error]);

  return <div>Child</div>;
};

这种方式进一步明确了子组件的职责边界，请求逻辑和回调触发逻辑分离，代码可读性更强。

3. 父组件侧使用React 18+的useEvent Hook（可选） #

如果你的项目使用React 18及以上版本，可以在父组件中用useEvent包裹回调，让回调的引用保持稳定，这样子组件的useEffect无需修改依赖数组：

import { useState, useEvent } from 'react';

export default function Parent () {
  const [result, setResult] = useState();

  // 用useEvent包裹回调，确保引用稳定
  const handleChange = useEvent((r) => {
    setResult(r.toString());
  });

  return (
    <div>
      {result}
      <Child 
        value={0}
        onChange={handleChange} 
      />
    </div>
  );
}

这种方案需要父组件做少量修改，但useEvent是React官方提供的用于稳定回调引用的API，语义清晰，不会让父组件过度耦合子组件实现。

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