React 19 Modern — use(), Actions, Concurrent

use() — promise 와 context 를 inline 으로 읽기

React 19 가 use() 도입: promise 를 읽는 (pending 이면 suspend) 또는 context 를 읽는 (useContext 와 똑같) hook. useContext 와 달리 use() 는 조건부로 호출 가능 + 루프 안에서 호출 가능. 그게 돌파구야 — 더 이상 'rules of hooks' 의 special case 위반 안 됨.

Actions — 그냥 동작하는 form submission

Action 은 form 에 bind 하는 async 함수. React 가 pending 상태, error, optimistic update 다 처리해 줘. useActionState 가 마지막 결과 + pending flag 줘 — setLoading(true); try { ... } finally { setLoading(false); } ritual 없이.

The compiler — 자동 메모이제이션

React Compiler (cwkPippa 빌드 동안엔 아직 beta 였지만 곧 land) 가 컴파일 타임에 컴포넌트와 hook 자동 memoize. 모든 걸 수동으로 useMemo + useCallback 으로 감싸던 시대가 끝나가. 코드 깨끗 유지, 성능 좋게 유지.

수동으로 over-optimize 하지 마: 컴파일러가 무료로 memoize 할 거에 useMemo 손대면, 노이즈 추가하는 거. 먼저 profile. hot 한 것만 optimize.

Code

use() with a promise — inline async data·tsx

function ConversationDetail({ conversationPromise }: { conversationPromise: Promise<Conversation> }) {
  // Suspends until the promise resolves; <Suspense> above renders fallback.
  const conversation = use(conversationPromise);
  return <ChatView conversation={conversation} />;
}

Actions — useActionState for a save form·tsx

async function saveTitle(prevState: State, formData: FormData) {
  const title = formData.get('title') as string;
  await fetch('/api/conversation/title', { method: 'PATCH', body: JSON.stringify({ title }) });
  return { title, error: null };
}

function TitleEditor() {
  const [state, formAction, isPending] = useActionState(saveTitle, { title: '', error: null });
  return (
    <form action={formAction}>
      <input name="title" defaultValue={state.title} disabled={isPending} />
      <button type="submit" disabled={isPending}>{isPending ? 'Saving…' : 'Save'}</button>
    </form>
  );
}

React 19 Modern — use(), Actions, Concurrent

use() — promise 와 context 를 inline 으로 읽기

Actions — 그냥 동작하는 form submission

The compiler — 자동 메모이제이션

Code

Progress

댓글 0