React中避免useState无限循环：在useEffect中使用Context传参函数

核心方案 #

• 用useCallback包裹Context中的业务函数，固定其引用，避免每次组件渲染生成新函数
• 在useEffect中直接传入参数调用函数，无需额外用useRef存储参数（特殊动态参数场景除外）

具体实现 #

1. 改造PokemonProvider，用useCallback包裹getPokemon #

把getPokemon用useCallback包裹，依赖项只需要setPokemon（useState返回的set函数是稳定的，不会随渲染变化）：

import { createContext, useContext, useState, useCallback } from 'react';

const PokemonContext = createContext();

export function PokemonProvider({ children }) {
  const [pokemon, setPokemon] = useState([]);

  // 用useCallback缓存函数引用
  const getPokemon = useCallback((newlyPokemon) => {
    // 这里可以根据需求处理状态更新，比如合并新数据
    setPokemon(prevState => [...prevState, newlyPokemon]);
  }, [setPokemon]);

  return (
    <PokemonContext.Provider value={{ pokemon, getPokemon }}>
      {children}
    </PokemonContext.Provider>
  );
}

export function usePokemon() {
  return useContext(PokemonContext);
}

2. 在子组件的useEffect中调用getPokemon #

通过自定义Hook获取getPokemon，在useEffect中直接传入参数调用，同时把getPokemon加入依赖项：

import { useEffect } from 'react';
import { usePokemon } from './PokemonProvider';

function PokemonList() {
  const { getPokemon } = usePokemon();

  useEffect(() => {
    // 模拟获取到新的Pokemon数据
    const newlyPokemon = { name: 'Bulbasaur', id: 1 };
    // 直接传参调用getPokemon
    getPokemon(newlyPokemon);
  }, [getPokemon]); // 依赖项加入被缓存的getPokemon

  // 渲染逻辑...
  return <div>{/* 渲染Pokemon列表 */}</div>;
}

3. 参数相关疑问解答 #

• 不需要用useRef存参数：如果参数是在useEffect内部生成的（比如模拟数据、API返回值），直接传入函数即可，每次useEffect执行都会拿到当前的参数值，不存在引用问题。
• 如果参数是props/状态：若newlyPokemon是组件的props或自身状态，需要把它加入useEffect的依赖项，确保参数变化时重新执行逻辑：

// 假设newlyPokemon是组件的props
function PokemonList({ newlyPokemon }) {
  const { getPokemon } = usePokemon();

  useEffect(() => {
    if (newlyPokemon) {
      getPokemon(newlyPokemon);
    }
  }, [getPokemon, newlyPokemon]); // 新增newlyPokemon到依赖项

  // 渲染逻辑...
}

为什么能避免无限重渲染？ #

useCallback会缓存getPokemon的函数引用，只有当依赖项（这里是setPokemon）变化时才会重新生成函数，而setPokemon是稳定的，所以getPokemon的引用不会随组件渲染频繁变化。useEffect的依赖项稳定后，就不会每次渲染都触发执行，也就不会因为反复调用setPokemon导致组件无限重渲染。

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