React页面刷新生成新名称及代码无限循环问题咨询

我希望每次刷新页面时用faker生成一个新名称，但以下代码出现了无限循环，请问这是为什么？

import { useState, useEffect } from 'react';
import './style.css';
import { faker } from '@faker-js/faker';

export default function App() {
  const data = faker.name.firstName();
  const [name, setName] = useState(data);

  useEffect(() => {
    setName(faker.name.firstName());
  }, [name]);

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

原因分析 #

• 你把name放进了useEffect的依赖数组里，每次调用setName都会更新name状态，触发组件重新渲染；而useEffect会因为name值变化再次执行，再次调用setName生成新名称，形成了状态更新→触发渲染→执行Effect→再次更新状态的闭环，最终导致无限循环。
• 组件每次渲染时const data = faker.name.firstName();都会执行一次，但这不是引发循环的核心原因，核心是useEffect的依赖逻辑和状态更新形成了循环触发链。

解决方法 #

如果只是需要在页面首次加载/刷新时生成新名称，只需要让初始化或挂载逻辑执行一次即可：

方法一：直接在状态初始化时生成名称 #

import { useState } from 'react';
import './style.css';
import { faker } from '@faker-js/faker';

export default function App() {
  // 初始化状态时直接调用faker生成名称，刷新页面会重新执行
  const [name, setName] = useState(faker.name.firstName());

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

方法二：使用空依赖数组的useEffect #

适合需要在组件挂载阶段执行初始化逻辑的场景：

import { useState, useEffect } from 'react';
import './style.css';
import { faker } from '@faker-js/faker';

export default function App() {
  const [name, setName] = useState('');

  // 空依赖数组表示仅在组件挂载时执行一次，刷新页面会重新挂载组件
  useEffect(() => {
    setName(faker.name.firstName());
  }, []);

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

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