【React Hook】- useId

useId

useId 是 React 18 引入的一个新 Hook，用于在客户端和服务器端生成唯一的 ID。这个 Hook 可以帮助我们在服务器端渲染（SSR）时避免 ID 冲突。

在 React 18 之前，我们通常使用 uuid 或 nanoid 等库来生成唯一的 ID。但是，这些库生成的 ID 在客户端和服务器端可能不一致，导致在 SSR 时出现 ID 冲突的问题。

useId 可以解决这个问题，因为它在客户端和服务器端生成相同的 ID。这使得我们可以在 SSR 时使用相同的 ID，而不会出现冲突。

使用 useId 的方式非常简单，只需要在组件中调用它即可。例如：

import { useId } from 'react';

function MyComponent() {
  const id = useId();

  return <div id={id}>Hello, world!</div>;
}

在上面的例子中，useId 返回一个唯一的 ID，并将其赋值给 div 元素的 id 属性。由于 useId 在客户端和服务器端生成相同的 ID，所以这个 ID 在 SSR 时不会出现冲突。

需要注意的是，useId 只能在函数组件中使用，不能在类组件中使用。

总的来说，useId 是一个非常有用的 Hook，可以帮助我们在 SSR 时避免 ID 冲突的问题。

参考：

• useId - React