React 19：Actions、use() Hook 与 React 编译器

React 19 主要变化

Actions（异步过渡）、React 编译器（自动记忆化）、改进的 ref 处理。

异步 Actions

function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false)
  const [isPending, startTransition] = useTransition()

  function handleLike() {
    startTransition(async () => {
      await toggleLike(postId)
      setLiked(prev => !prev)
    })
  }

  return <button onClick={handleLike} disabled={isPending}>{liked ? 'Liked' : 'Like'}</button>
}

useActionState

async function submit(prevState, formData) {
  try {
    await api.update({ name: formData.get('name') })
    return { ok: true, msg: 'Saved!' }
  } catch (e) {
    return { ok: false, msg: e.message }
  }
}

function Form() {
  const [state, action, pending] = useActionState(submit, {})
  return (
    <form action={action}>
      {state?.msg && <p>{state.msg}</p>}
      <input name="name" />
      <button disabled={pending}>{pending ? '...' : 'Save'}</button>
    </form>
  )
}

useOptimistic

const [list, addOptimistic] = useOptimistic(todos, (s, n) => [...s, n])

async function add(text) {
  addOptimistic({ id: 'temp', text, done: false })
  await api.createTodo(text)
}

use() Hook

function Profile({ userPromise }) {
  const user = use(userPromise) // 挂起直到解析完成
  return <h1>{user.name}</h1>
}

React 编译器：自动记忆化

编译器自动插入 useMemo/useCallback——无需手动优化。

ref 作为 Prop

function Input({ ref, ...props }) { return <input ref={ref} {...props} /> }

-> 使用 JSON 查看器 调试状态。