# React 18 미리보기

> Clean Markdown view of GeekNews topic #5949. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=5949](https://news.hada.io/topic?id=5949)
- GeekNews Markdown: [https://news.hada.io/topic/5949.md](https://news.hada.io/topic/5949.md)
- Type: news
- Author: [seonghyeonkimmm](https://news.hada.io/@seonghyeonkimmm)
- Published: 2022-02-10T11:50:14+09:00
- Updated: 2022-02-10T11:50:14+09:00
- Original source: [gist.github.com/seonghyeonkimm](https://gist.github.com/seonghyeonkimm/86411e2bf274063db45731c42b271033)
- Points: 6
- Comments: 0

## Topic Body

* React 18 rc가 확정되면서 어떤 기능들이 추가가 되었는지 알아보자

* Automatic batching for fewer renders

    * React 18 이후부터는 promise, setTimeout 등에서 발생한 연속적인 setState도 배치로 처리

* SSR support for Suspense

    * SSr에서도 Suspense를 사용할 수 있게 개선

* Concurrent features 추가

    * useTransition: urgent, not urgent state update를 구분. debouncing하던 코드들을 해당 hook을 사용해서 개선 가능

    * useDeferredValue: startTransition안에 state 업데이트하는 코드를 넣는 것과 동일하게 state의 지연된 값을 사용하는 것이 가능

    * useId: unique한 id를 사용할 수 있게 개선

    * useSyncExternalStore: internal store인 props, state 제외하고 외부의 mutable한 object의 변화를 감지하고 component의 state로 사용할 수 있게 됨.

* StirctMode + StrictEffect

  * 앞으로 추가된 OffScreen API + 이미 추가되어있는 Fast Refresh 관련해서 문제를 발생시킬만한 코드가 있는지 알아보기 위해서 effect를 포함해서 dev 환경에서는 두번 rendering됨. 컴포넌트 코드를 작성할 때 mount, unmount, mount와 같이 effect가 몇 번 실행되더라도 문제가 없는 코드를 작성해야함.

## Comments



_No public comments on this page._