React 19 의 새로운 Hook

useTransition

UI 를 차단하지 않고 상태를 업데이트 할수 있는 React Hook 을 말합니다.

 

React19 version 에서는 비동기처리도 우선순위를 줄 수 있게 변경이 됩니다.

원래 useTransition 은 수많은 state 가 존재할 경우 우선순위를 주기 위해서 탄생했습니다.

예를 들어, 사용자가 검색어를 입력하면 결과를 가져오는 작업이 있는데, 결과를 가져오는 동안 앱이 멈춘 것처럼 보이는 문제를 사전에 방지해 줍니다.

 

쉽게 말해 긴급한 작업과 덜 긴급한 작업의 UI 가시성을 처리하고 싶을 때 사용합니다.

import React, { useState } from "react";

const Transition = () => {
  const [number, setNumber] = useState("");
  const [delayNumber, setDelayNumber] = useState("");
  const [isPending, startTransition] = useTransition();
  
  const update = () => {
    setNumber("급한문제");
    
    startTransition(() => {
      setDelayNumber("안급한것");
    })
  }
  
  return (
    <div>
      <h1>{number}</h1>
      {isPending ? <p>로딩중..</p> : <p>{delayNumber}</p>}
	  <button onClick={update}>UI Update</button>
    </div>
  )
}

 

React 19 version 부터는 아래처럼 비동기에도 적용할 수 있게 변경됩니다.

    startTransition(async() => {
      const error = await fetchAPI(...);
    })

 

useActionState

비동기처리에 관련된 모든 State 를 제공해준다 라는 말입니다.

예를 들어 state 만 사용해서 비동기 함수를 만든다면 setError, setPending 처럼 여러 useState 를 이용하여 불필요한 코드가 많아질 수 있습니다. 따라서 이 모든것을 쉽게 도와주는 것이 useActionState 라고 생각하시면 됩니다.

기존에 react-query 를 사용하시는 분들은 "아 React-query 에서 사용하는 기능이 react 로 넘어왔구나" 라고 생각하시면 이해하기가 쉽습니다.

 

하지만 불러오는 data 는 따로 state 로 관리하거나 저장해야 합니다.

const changeName = () => {
  const [error, submitAction, isPending] = useActionState(async() => {
    // 비동기 동작...
  })
  
  return (
    <form action={submitAction}>
      <input type="text" name="name"/>
      //...
  )
}

 

useOptimistic

쉽게 말해 낙관적 업데이트를 지원해줍니다.

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

낙관적 업데이트
서버 요청에 대한 응답을 기다리지 않고, 사용자가 원하는 결과를 미리 UI 에 반영하는 방식입니다.

 

작업이 실패하게 된다면 자동으로 이전상태로 복구해 줍니다.

import { useState, useOptimistic } from "react";

const Comments = () => {
  const [comments, setComments] = useState(["첫번째댓글", "두번째댓글"]);
  
  const [optimisticComments, addOptimisticComments] = useOptimistic(
    comments,
    (currentComments, newComment) => [...currentComments, newComment]
  );
  
  const addComment = async (newComment) => {
    addOptimisticComments(newComment);
    
    try {
      //서버요청
    } catch(error) {
      alert("댓글 추가 실패");
      // 실패 시 자동으로 롤백
    }
  };
  
  return (
    <div>
      {optimisticComments.map(comment => {
        //...
      })}
    </div>
  )
}

 

useFormStatus

폼의 상태를 관리하는 Hook 입니다.

주로 서버 액션과 함께 사용되며, 폼의 제출 상태를 추적할 수 있게 도와줍니다.

const { pending, data, method, action } = useFormStatus();

import { useFormStatus } from "react-dom";
import action from "./actions";

const Submit = () => {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

const App = () => {
  return (
    <form action={action}>
     <Submit/>
     //...
  )
}

 

간단하게 최신 React 19 Hook 에 대해서 알아봤는데 더 자세한 내용은 공식홈페이지에서 찾아보시길 바랍니다.