React中如何让useCallback内的state保持最新且避免不必要重渲染？

问题场景 #

组件内定义了questions状态，通过空依赖useEffect初始化，同时用空依赖useCallback创建updateQuestion方法，但回调始终捕获首次渲染的空state，即便useEffect填充数据后也无法获取最新值。你尝试过将questions.length加入依赖解决，但希望找到无需重新创建回调的方案，同时避免子组件全量重渲染。

方法一：使用setState的函数式更新 #

这是最推荐的方案，无需修改useCallback依赖，直接利用React的函数式更新特性，从setQuestions的回调参数中获取最新状态：

const updateQuestion = useCallback((index) => {
  setQuestions(prevQuestions => {
    // prevQuestions即为最新的状态值
    const newQuestions = [...prevQuestions];
    // 在这里执行你的业务操作
    return newQuestions;
  });
}, []); // 依赖为空，回调不会重复创建

这种方式下，updateQuestion的引用始终稳定，因为setQuestions是React提供的稳定函数，不会随组件渲染变化。配合memo化的QuestionCard子组件，只有被修改的项会触发重渲染。

方法二：用useRef保存最新状态 #

将questions同步到ref中，回调直接访问ref的当前值获取最新状态，无需依赖questions：

const questionsRef = useRef([]);

// 同步state到ref，确保ref始终持有最新值
useEffect(() => {
  questionsRef.current = questions;
}, [questions]);

const updateQuestion = useCallback((index) => {
  const currentQuestions = questionsRef.current;
  const newQuestions = [...currentQuestions];
  // 执行你的业务操作
  setQuestions(newQuestions);
}, []); // 依赖为空，回调不重复创建

需要注意每次questions更新时都要同步ref，保证questionsRef.current的时效性。同样，此方法能保持updateQuestion引用稳定，避免子组件全量重渲染。

补充说明 #

你之前使用questions.length的方案存在隐患：若数组长度不变但内容更新（比如修改某一项），useCallback不会重新创建，回调仍会捕获旧state，导致逻辑错误。而上面两种方法既能解决过时state问题，又能保证回调引用稳定，完美适配子组件的性能优化需求。

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