React中无需useEffect，如何实现依赖变化时更新useState状态并支持setState？

你可以通过结合useState保存手动覆盖值和useMemo计算最终状态的方式实现需求，既不用useEffect，又能让liked自动响应messages/user的变化，同时支持手动修改。

具体实现代码 #

import { useState, useMemo } from 'react';

// 组件内部逻辑
const [manualLiked, setManualLiked] = useState(); // 初始undefined代表使用自动计算值

// 计算最终的liked状态：优先取手动设置的值，无手动干预时根据messages和user计算
const liked = useMemo(() => {
  if (manualLiked !== undefined) {
    return manualLiked;
  }
  return messages?.likes?.some((like) => like.id === user.id);
}, [messages, user, manualLiked]);

// 手动切换点赞状态的函数
const toggleLike = () => {
  setManualLiked(prev => !prev);
};

原理说明 #

1. manualLiked专门存储手动设置的点赞状态，初始值undefined表示当前没有手动干预，使用自动计算的结果。
2. useMemo会监听messages、user和manualLiked的变化：
   • 当messages或user更新且无手动干预时，自动重新计算liked的最新值；
   • 调用setManualLiked手动修改时，manualLiked变化会触发useMemo，此时liked会使用手动设置的状态；
3. 后续messages或user再变化时，只要manualLiked不为undefined，就会保持手动设置的状态，直到再次调用setManualLiked修改。

额外提示 #

如果业务需要：手动修改后，当messages从后端刷新时自动覆盖手动状态，可以在useMemo中增加判断（比如对比messages的唯一标识或更新时间），但这种场景相对少见，大部分情况上述实现足以满足需求。

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