React特定prop变化时阻止组件重渲染避免重复API调用方法

可复用组件接收外部传入的editEnabled（即问题中提到的editable）属性用于切换编辑状态，存在两个异常表现：

• 每次切换editEnabled属性时，整个组件会触发重渲染
• 本应仅在初始化阶段执行一次的API数据拉取逻辑，会跟随重渲染重复触发
  预期实现目标：无论editEnabled属性切换多少次，组件内的API调用逻辑仅在初始化时执行一次。

现有问题代码如下：

export const EditableTableList: React.FC<EditableTableListProps> = React.memo(({ columns, editEnabled, keyName, getData, sendChangeToParent }) => {
...
// editEnabled变化时该逻辑会重复执行
  useEffect(() => {
    const getTableData = async () => {
      setLoadedData(false);
      setOriginalData(await getData());
      setLoadedData(true);
    }

    getTableData();
  }, [getData]);
...
}

重复渲染和重复请求的本质和editEnabled属性本身没有直接关系，是两个React使用误区叠加导致的：

1. React.memo默认仅对props做浅比较，父组件因editEnabled切换触发重渲染时，如果传入子组件的引用类型props（getData函数、columns数组、sendChangeToParent函数）没有做引用缓存，每次渲染都会生成新的引用，React.memo会判定props发生变化，触发子组件重渲染。
2. 数据拉取的useEffect将getData作为依赖项，只要getData的引用发生变化，effect就会重新执行，最终导致API请求重复触发。

分两步实现需求，同时解决不必要重渲染和API重复调用的问题：

1. 优化重渲染逻辑 #

优先保证传入组件的引用类型props引用稳定，这是React性能优化的标准实践：

• 父组件中传递给子组件的函数类型props（getData、sendChangeToParent）使用useCallback包裹，配置正确的依赖项，避免无关渲染时生成新的函数引用
• 父组件中传递的数组/对象类型props（如columns配置）使用useMemo包裹，保证引用稳定

如果有特殊场景需要自定义重渲染判定规则，可以给React.memo传入第二个参数作为自定义比较函数，明确跳过不需要触发重渲染的场景：

export default React.memo(EditableTableList, (prevProps, nextProps) => {
  // 仅当核心业务props变化时才触发重渲染，忽略无关props变更
  return (
    prevProps.columns === nextProps.columns &&
    prevProps.keyName === nextProps.keyName &&
    prevProps.getData === nextProps.getData &&
    prevProps.sendChangeToParent === nextProps.sendChangeToParent
  )
})

注意：自定义比较函数需要覆盖所有影响组件渲染的props，漏比较会导致组件状态、渲染结果不更新，非必要场景不优先使用该方案

2. 实现API仅初始化执行一次 #

如果业务明确要求数据拉取逻辑在组件全生命周期仅执行一次，和后续所有props/state变化无关，可以选择以下两种实现方式：

• 方式一：将effect依赖项设为空数组，仅在组件挂载时执行一次，配合注释跳过eslint的依赖检查

useEffect(() => {
  const getTableData = async () => {
    setLoadedData(false);
    setOriginalData(await getData());
    setLoadedData(true);
  }
  getTableData();
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

• 方式二：使用ref标记请求是否已经执行过，从逻辑层面阻断重复调用，兼容性更强，哪怕effect意外重跑也不会触发重复请求

const hasFetched = useRef(false);

useEffect(() => {
  if (hasFetched.current) return;
  hasFetched.current = true;

  const getTableData = async () => {
    setLoadedData(false);
    setOriginalData(await getData());
    setLoadedData(true);
  }
  getTableData();
}, [getData]);

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