ThemeProvider初始化仅执行一次场景：useMemo与useEffect选型

我创建了一个ThemeProvider组件，它会从传入的tokens props对应的JSON中获取设计令牌，再把这些令牌注入父级div的style属性里，包裹子组件让它们能使用这些样式。因为使用者不会频繁更新tokens，我只需要在初始渲染时执行一次retrieveToken函数（这是个开销较大的操作）。

现在纠结的是：这种场景下，应该用空依赖的useEffect，还是用useMemo来缓存retrieveToken的执行结果？我猜空依赖的useEffect就够了，因为token props完全不会更新，只需要初始执行一次。

相关代码：

const [tokenObj, setTokenObj] = useState({});
const {tokens} = props;

function retrieveToken(tokens){
// 开销较大的操作，但仅需在初始渲染时执行一次
}

// 哪种方式更好？

// 方案1 - React useMemo
const tokenObj2 = React.useMemo(() => {
    return retrieveToken(tokens);
},[tokens]);

// 方案2 - React useEffect
React.useEffect(() => {
    setTokenObj(retrieveToken(tokens))
},[])

return (
    <div style={tokenObj}> {children} </div>
)

分析与结论 #

1. 执行时机与渲染表现 #

• useMemo方案：retrieveToken会在组件初始渲染时同步计算，直接生成可用的tokenObj2，组件一次渲染就能应用正确样式，不会出现二次重渲染或样式闪烁的问题。
• 空依赖useEffect方案：useEffect是在初始渲染完成后异步执行的，组件会先以空的tokenObj渲染一次，之后setTokenObj触发二次重渲染才能生效。如果retrieveToken耗时较长，用户能明显看到样式加载的延迟。

2. 依赖安全性 #

你的空依赖useEffect存在隐性bug：如果后续tokens意外发生更新（哪怕你认为不会），useEffect不会重新执行，导致tokenObj永远停留在初始值，样式无法同步更新。而useMemo的依赖数组包含tokens，一旦tokens变化会自动重新计算，代码更健壮。

3. API语义匹配 #

useMemo的设计初衷就是缓存昂贵计算的结果，完全贴合你“只需要计算一次开销大的值，依赖变化时重新计算”的场景；而useEffect是用来处理副作用（比如数据请求、DOM操作、订阅）的，用它来同步计算结果属于语义误用，虽然能运行，但不符合React的API设计逻辑。

最终选择 #

优先用useMemo方案：

• 避免不必要的二次重渲染，用户体验更流畅
• 依赖项逻辑正确，能兼容tokens可能的更新场景
• 符合React API的语义规范

哪怕你能保证tokens永远不更新，useMemo依然是更优的选择，因为它没有额外渲染的问题，代码语义也更清晰。

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