skillhub-088-vercel-react-best-practices/rules/rerender-derived-state-no-effect.md

---

在渲染期间计算派生状态

如果一个值可以从当前的 props/state 计算得出，就不要将其存储在 state 中，也不要在 effect 中更新它。应在渲染期间直接推导该值，以避免多余的渲染和状态漂移。不要仅为了响应 props 变化而在 effect 中设置 state；应优先使用派生值或带 key 的重置方式。

错误做法（冗余的 state 和 effect）：

function Form() {
  const [firstName, setFirstName] = useState('First')
  const [lastName, setLastName] = useState('Last')
  const [fullName, setFullName] = useState('')

  useEffect(() => {
    setFullName(firstName + ' ' + lastName)
  }, [firstName, lastName])

  return <p>{fullName}</p>
}

正确做法（在渲染期间派生）：

function Form() {
  const [firstName, setFirstName] = useState('First')
  const [lastName, setLastName] = useState('Last')
  const fullName = firstName + ' ' + lastName

  return <p>{fullName}</p>
}

参考链接：你可能不需要 Effect