规则：use-memo

ReactAPI 参考：ESLint 插件

规则：use-memo

校验 useMemo hook 必须与返回值一起使用。参见 useMemo 文档了解更多信息。

规则详情

useMemo 用于计算和缓存昂贵的值，而不是用于副作用。没有返回值，useMemo 返回 undefined，这违背了其目的，并且可能表明你使用了错误的 hook。

无效

此规则的不正确代码示例：

js 复制代码

// ❌ No return value
function Component({ data }) {
  const processed = useMemo(() => {
    data.forEach(item => console.log(item));
    // Missing return!
  }, [data]);

  return <div>{processed}</div>; // Always undefined
}

有效

此规则的正确代码示例：

js 复制代码

// ✅ Returns computed value
function Component({ data }) {
  const processed = useMemo(() => {
    return data.map(item => item * 2);
  }, [data]);

  return <div>{processed}</div>;
}

故障排查

我需要在依赖项更改时运行副作用

你可能会尝试使用 useMemo 来执行副作用：

js 复制代码

// ❌ Wrong: Side effects in useMemo
function Component({user}) {
  // No return value, just side effect
  useMemo(() => {
    analytics.track('UserViewed', {userId: user.id});
  }, [user.id]);

  // Not assigned to a variable
  useMemo(() => {
    return analytics.track('UserViewed', {userId: user.id});
  }, [user.id]);
}

如果副作用需要在响应用户交互时发生，最好将副作用与事件放在一起：

js 复制代码

// ✅ Good: Side effects in event handlers
function Component({user}) {
  const handleClick = () => {
    analytics.track('ButtonClicked', {userId: user.id});
    // Other click logic...
  };

  return <button onClick={handleClick}>Click me</button>;
}

如果副作用将 React state 与某些外部 state 同步（反之亦然），使用 useEffect：

js 复制代码

// ✅ Good: Synchronization in useEffect
function Component({theme}) {
  useEffect(() => {
    localStorage.setItem('preferredTheme', theme);
    document.body.className = theme;
  }, [theme]);

  return <div>Current theme: {theme}</div>;
}

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。