在 JSX 之外使用 useState 钩子时，我必须每次都将它包装在 useEffect 中吗？

Question

所以有时我在 if 语句中使用 setState 来确保它不会不必要地运行。 它有效，我永远不会出错。 我了解在这种情况下有时 useEffect 可以帮助防止额外的重新渲染，但我的问题是，在 JSX 之外使用“useState”时是否总是需要 useEffect？ 例如，在如下所示的程序意义上，当技术上存在防止无限循环的虚假条件时？

import { useEffect, useState } from "react";
import "./styles.css";
import Item from "./Item";

// EXAMPLE CODE TO HELP UNDERSTAND THE QUESTION MORE
export default function App() {

  // I understand I do not need to check undefined as this is an example
  const [state, setState] = useState();

  if (state === undefined) {
    setState([1, 2, 3, 4, 5]);
  }

  // vs

  // useEffect(() => {
  //   if (state === undefined) {
  //     setState([1, 2, 3, 4, 5]);
  //   }
  // }, [state]);


  return <div className="App">{state}</div>;
}

Answer 1

在这种情况下，在 useEffect 之外的每个渲染上都会检查 if 条件。

使用 useEffect 时，只有在为该渲染修改了 state 时才会检查 if 条件。

Answer 2

不需要在useEffect中使用useState ，因为两个钩子都会重新渲染组件，在useEffect中使用useState只会重新渲染组件两次。 if 语句没问题。

const [state, setState] = useState(); state设置为undefined - 为什么要检查 state 是否未定义？ 它不是必需的。

const [state, setState] = useState([1, 2, 3, 4, 5]);

对于这种情况是可以的。