# Week 3 - How to Upgrade to the React 18 Release Candidate

## What's New
1. Concurrent rendering
2. Server rendering APIs
3. Automatic batching
4. useId
5. Dropping Support for Internet Explorer

## Install

npm install react@rc react-dom@rc

Or

yarn add react@rc react-dom@rc

## #1 Concurrent rendering with createRoot


### Concurrent Mode 語法
- ReactDOM.render => createRoot
- unmountComponentAtNode => root.unmount();
- hydrate => hydrateRoot
- Removed the callback from render

### Concurrent Mode 好處
Can do heavy update or setState in the background 🙌 🙌 🙌

:::info
Blocking Mode 是專門給 Code base 如果需要客製化一些功能，但會破壞既有功能

:::

## #2 Server rendering APIs

> React Server Component or React Server Side Sreaming Support

### Client-Only Rendering App


所有 React Code 都是 JavaSrcitp 且放在 script in html，當 Browser 收到 request from page，Browser send html css script tag，script 在 load，load好後，網站可以互動，像是 Video Play 或是 modal open ..等

但當你網路慢或是 Js bundle size 很大，會需要等一段時間，會導致 blank white page 等很久後，script 才會被 load，畫面才會被user看到


SSR並無解決網路慢或是Js打包的問題，但他解決UX問題，當JS在load的時候嫌給東西看，所以SSR算是幫CSR做一層優化

當瀏覽器收到Page Request ,改成Server負責fetch網站的data,不是client fetch

同時 Server render 所有 React Component 到HTML, html 再被送到 Client, sender in the browser(這對Heavy content website很有用）此時JS還在load, 但我們可以先看到頁面，但還是不能互動

### React Server Components (RSC)

1. Show everything before fetching everything
1. load everything before you can hydrate anything
1. hydrate everything before you can interact with anything

New API


[參考](https://www.youtube.com/watch?v=pj5N-Khihgc&t=443)

## #3 Automatic batching

### Batch update
在 React 裡面，不管是 state 或者是 props 的改變都會造成 Component 的 re-render

那如果當一個操作中多次改變了 state，是不是就會造成 component 多次 rerender 呢？那對應的就會造成資源耗損，所以這時候就會將所有的改變 state 的操作一次蒐集起來，再統一改變 state，這樣就只需要 re-render 一次就好了，這個就是 Batch update。

export default function App() {
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
      setCounter(counter + 1);
      setCounter(counter + 1);
  }

  return (
    <div className='App'>
      <h1>Function Component</h1>
      <div>
        counter: {counter}
      </div>
      <br/>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

#### useEffect 的 Batch

[Demo](https://codesandbox.io/s/effectbatch-mrmunb?file=/src/EffectBatchSample.jsx)

#### Redux 的 Batch

在 Redux 裡面也有 [batching](https://react-redux.js.org/api/batch)，可以使用 batch 這個 API 一次 dispatch 多個 action，避免多次的 rerender。

[Legacy Mode](https://codesandbox.io/s/react-with-legecy-mode)

[Concurrent Mode](https://codesandbox.io/s/react-with-concurrent-mode-us1v4k)

1. React 18 在所有的狀況都會預設進行 batching（原本在非同步的狀況不會進行）
2. 有需要即時更新 state 來讓 DOM 渲染的話，則可以使用新的 API ReactDOM.flushSync()
3. ReactDOM.unstable_batchedUpdates() 就可以說是被棄用了。

## #4 New APIs

### useId
`useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches

function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Do you like React?</label>
      <input type="checkbox" name="react" id={id} />
    </>
  );
);

> [More detail](https://github.com/reactwg/react-18/discussions/111)

### useSyncExternalStore

### useInsertionEffect

> React 18 Other API👇
- startTransition
- useDeferredValue

## #5 Dropping Support for Internet Explorer

因為 Concurrent Rendering 與 未來新功能得支援，所以放棄 IE