React Labs React 19 - Memoization, useFormState

💡 2024년 2월 15일 React Labs에서 나온 React 19에 대한 게시글의 요약 및 정리를 제 주관적으로 작성하였습니다. 문제점 있을 시 지적해주시면 감사하겠습니다.

React Labs: What We've Been Working On – February 2024 – React

Memo

React의 수동 Memoization 제거되고 자동 Memoization 시행으로 코드 복잡성 및 추가 작업 불필요하게 되었습니다.
(이미 작동되고 있는 Memoization 하위 호환성은 유지됨)

 

React는 상태가 변경될 때 때때로 너무 많이 다시 렌더링할 수 있습니다. React 초기부터 이러한 경우에 대한 솔루션은 useMemo, useCallback 등을 사용해 수동으로 메모하는 것이었습니다.

그러나 수동 메모는 절충안으로서 코드가 복잡해지고, 잘못되기 쉽고, 최신 상태를 유지하려면 추가 작업이 필요합니다.

수동 메모는 합리적인 절충안이지만 만족하지 못했습니다. 우리의 비전은 상태가 변경될 때 React의 핵심 정신 모델을 손상시키지 않고 UI의 올바른 부분만 자동으로 다시 렌더링 하는 것입니다 .

useFormState

양식 작업의 결과에 따라 상태를 업데이트할 수 있는 Hook로서 액션의 현재 상태와 응답에 액세스하여 데이터 제출의 수명 주기를 관리합니다.

useFormState – React

const [state, formAction] = useFormState(fn, initialState, permalink?);

• fn : 이벤트 발생 및 양식 제출 시 호출되는 함수
• initialState : 초기 값
• state : 현재 상태
• formAction : fn에서 할당된 작업 함수
  • prevState : 이전 상태 값
  • formData : form 내부 데이터

예시

import { useFormState } from "react-dom";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  const [state, formAction] = useFormState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  )
}