useId
- map의 유니크한 key를 서버에서 내려준 키로 쓰지못할때가 있다. 그떄 nanoId같은 라이브러리로 대체를 한적이있다.
- id를 서버에서 Math.random()으로 넘겨주면 client에서도 Math.random()으로 다시 실행하기때문에 동기화 에러가 난적이있다.
이럴때 간단하게 useId()를 사용하면 서버와 클라이언트단에서 동일한 id를 사용 할 수 있다.
Improved Automatic Batching
배칭은 리액트가 더 나은 성능을 위해 여러개의 state 업데이트를 하나의 리렌더링이 발생하도록 그룹화 하는 것을 의미한다.
17버전까지는 배칭 기능은 React event handler 내부에서만 사용할 수 있었다.
- 예를들어, Promise, setTimeout, native event handlers 내부에서는 배칭이 일어나지 않았다.
- react 이벤트 핸들러 내부에서 발생하는 업데이트만 배칭했다.
배칭을 원하지 않는 경우도 있을 것이다. 일반적으로 배칭은 안전한 절차지만 일부 코드에서는 state 변경 후에 즉시 DOM으로부터 가져오는 값에 의존적인 경우도 있다. 이러한 경우
ReactDom.flushSync()를 사용하면 배칭하지 않을 수 있다.
이해에 도움되는 참고서 : https://immigration9.github.io/react/2021/06/12/automatic-batching-react.html
Transition
이제 render 에 대한 비동기 관리를 할 수 있습니다.
이전 React 17 버전에서는 state 에 대한 처리는 비동기적으로 관리 되었지만 (batching), rendering 에 대한 관리는 동기적으로 처리되었습니다.
이 때문에 값비싼 rendering 작업이 앞에 있는 경우, 즉각적인 rendering 이 일어나야 하는 작업이 지연되는 현상이 벌어졌습니다.
React 18 버전에서는 이를 startTransition(useTransition) 으로 관리할 수 있습니다.
예를 들어, Input 을 타이핑할 때 자동 완성 추천 기능이 있다고 상상해봅시다.
우리는 Input 에 대한 타이핑 결과를 즉각적으로 보고자 하지만 (urgent updates), 자동 완성 추천은 즉각적으로 보여줄 필요는 없습니다. (transition updates)
해당내용은 스터디에서 발췌한 내용입니다. 추후에 업데이트 할 에정입니다.
Offscreen
현재 추가된 컴포넌트는 아니지만, 추후 Minor 버전에 나올 예정인 컴포넌트다.
Offscreen 은 컴포넌트를 사용하기 전 pre-render 하여 사용할 수 있는 컴포넌트다.
Suspense
이제 선택적 hydration이 가능하다.
앱에서 렌더링 비용이 많이 드는 서브 컴포넌트 트리를 Suspense로 감싸서 전체 앱의 Hydration을 방해하지 않고 별도의 Hydration을 진행 할 수 있다.
그리고 선택적 Hydration의 대상이 여러 가지 일 때 사용자가 상호작용하길 원하는 (정확히는 상호 작용이 발생한) 영역이 있다면
앞서 진행한 Hydration을 멈추고 사용자가 인터렉션 하기 원하는 영역의 Hydration을 먼저 진행하는 기능도 추가됐다. 이게 대박인거같다.
