[React] React 19 변경점 알아보기

틀린 내용이 있으면 댓글로 알려주시면 감사하겠습니다!

New Hooks

React 19에서 제공하는 새로운 Hook들은 다음과 같다.

use(Promise)

import { use } from 'react';

function MessageComponent({messagePromise}) {
  const message = use(messagePromise);
  // ... 
}

use(Context)

Form Action

useFormState

useFormStatus

useOptimistic

---

Actions

React App에서 데이터 mutation을 수행한 후, 해당 응답으로 상태를 업데이트하는 과정이다.

기존 방식은 다음과 같이 사용하였다.

pending, errors, optimistic updates(낙관적 업데이트) 등의 로직을 직접 작성하여 사용하였다.

function UpdateName({}) {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);
  
  const handleSubmit = async() => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if(error) {
      setError(error);
      return;
    }
    redirect('/path");
  }
             
  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );           
             
}

React 19에서는 useTransition() 훅을 본격적으로 활용하여 pending, errors, forms, optimistic updates에 대하여 따로 로직을 구성하지 않아도 자동으로 수행할 수 있도록 도와준다.

function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

---

참고 문헌

React 19 공식문서

[번역] React 19에서 새롭게 등장하는 클라이언트 사이드 훅