我可以在服务器组件中使用 useCallback 或 useMemo 吗？

Question

我正在构建一个 Next.js（14，App Router）应用程序，尽管实际上并不需要它，但公司希望我在服务器组件中使用

useCallback

以保持所有组件之间的一致性。我遇到了一个奇怪的错误，它似乎无法识别

useCallback

，我追踪到它有一个

await

后跟

useCallback

。

这是一个最小的例子：

import { FC, useCallback, useMemo } from 'react';

export const Test: FC = async () => {
  const getAsyncStuff = async () => 'async stuff';

  // If I await this function
  await getAsyncStuff();

  // This line causes Error: Cannot read properties of null (reading 'useCallback')
  const getStuff = useCallback(() => 'stuff', []);

  // This line causes Error: Cannot read properties of null (reading 'useMemo')
  const stuff = useMemo(() => 'stuff', []);

  return null;
};

我找不到任何明确的文档，所以我的问题是：服务器组件是否支持这些钩子？如果是这样，我该如何避免这个问题？

Answer 1

useCallback

和

useMemo

用于客户端组件。它们不用于服务器组件。服务器组件不会重新渲染，因此它们不需要钩子。您可以删除这些挂钩，也可以通过在组件顶部添加

"use cient"

将组件转换为客户端组件

'use client'; // Client Component

import { FC, useCallback, useMemo } from 'react';

export const Test: FC = () => {
  const getStuff = useCallback(() => 'stuff', []);
  const stuff = useMemo(() => 'stuff', []);

  return null;
};