如何避免React组件因未用useCallback的事件处理器重复执行？

问题背景 #

我有一个地址选择组件，首次渲染时会通过反向地理编码获取用户附近地址，默认选中第一个结果并调用父组件的onChange通知状态变更。为遵循单一数据源原则，状态由父组件持有，但如果父组件未用useCallback包裹onChange，组件每次重渲染都会触发重复的反向地理编码请求——因为useEffect的依赖数组会随onChange的引用变化而更新。

当前我用useRef保存回调引用的方式解决了问题，但感觉是取巧，想找更规范的处理方案，或者强制父组件使用useCallback，也欢迎TypeScript方案，但优先不依赖TS的稳定性方案。

原始代码（存在重复执行问题）：

const Component = (props) => {
  const [options, setOptions] = useState([])
  useEffect(() => {
    findOptions().then(options => {
      setOptions(options);
      props.onChange(options[0])
    })
  }, [onChange])
  return <Autocomplete 
    options={options} 
    value={props.value} 
    onChange={(e, v) => props.onChange(v)} 
  />
}

当前useRef解决方案：

const Component = (props) => {
  const [options, setOptions] = useState([])
  const onChangeRef = useRef(props.onChange)
  onChangeRef.current = props.onChange
  useEffect(() => {
    findOptions().then(options => {
      setOptions(options);
      onChangeRef.current(options[0])
    })
  }, [onChangeRef])
  return <Autocomplete 
    options={options} 
    value={props.value} 
    onChange={(e, v) => props.onChange(v)} 
  />
}

可选解决方案 #

1. 拆分useEffect，确保初始化仅执行一次（推荐） #

这其实是React官方认可的「处理可变依赖但只执行一次」的模式，并非取巧。拆分后逻辑更清晰：一个useEffect专门维护最新的回调引用，另一个仅负责首次初始化异步请求：

const Component = (props) => {
  const [options, setOptions] = useState([])
  const onChangeRef = useRef()

  // 每次渲染更新ref，保证拿到最新的onChange
  useEffect(() => {
    onChangeRef.current = props.onChange
  }, [props.onChange])

  // 仅首次渲染执行反向地理编码
  useEffect(() => {
    findOptions().then(options => {
      setOptions(options);
      if (options.length > 0) {
        onChangeRef.current(options[0])
      }
    })
  }, [])

  return <Autocomplete 
    options={options} 
    value={props.value} 
    onChange={(e, v) => props.onChange(v)} 
  />
}

这种方式彻底避免了重复请求，同时保证始终调用最新的父组件回调，也不会给父组件增加额外的使用负担。

2. 从调用端规范：强制使用useCallback #

如果想约束父组件的使用方式，可以：

• 在组件的注释文档中明确说明：onChange必须用useCallback包裹，否则会触发不必要的重复请求。
• 用TypeScript添加类型约束，通过自定义类型提示回调需为稳定引用：

import type { useCallback } from 'react';

type StableCallback<T extends (...args: any[]) => any> = ReturnType<typeof useCallback<T>>;

type ComponentProps = {
  onChange: StableCallback<(value: AddressType) => void>;
  value: AddressType;
};

const Component = (props: ComponentProps) => {
  // ... 组件原有逻辑
}

注意：这种方式只能做类型提示，无法完全阻止父组件传入不稳定回调，最终还是要结合文档说明。

3. 解耦初始化逻辑与回调 #

如果可以调整结构，让组件只负责获取地址选项，把默认选中逻辑交回父组件处理，再抽成自定义Hook实现复用：

// 自定义Hook：复用地址获取逻辑
const useNearbyAddressOptions = () => {
  const [options, setOptions] = useState([])
  useEffect(() => {
    findOptions().then(setOptions)
  }, [])
  return options
}

// 父组件
const Parent = () => {
  const [value, setValue] = useState(null)
  const options = useNearbyAddressOptions()

  useEffect(() => {
    // 父组件处理默认选中
    if (options.length > 0 && !value) {
      setValue(options[0])
    }
  }, [options, value])

  return <Autocomplete 
    options={options} 
    value={value} 
    onChange={(e, v) => setValue(v)} 
  />
}

这种方式完全避免了子组件依赖父组件回调的问题，同时通过Hook实现了逻辑复用。

总结 #

最稳妥且不依赖外部规范的方案是第一种：拆分useEffect，用useRef维护最新回调，确保初始化逻辑仅执行一次。它符合React最佳实践，同时兼顾了逻辑清晰性和稳定性。

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