---
tags: jsdc2021
---

# #Session 1 The Future of React: 18 and Beyond

{%hackmd 2YoCBdBPTjmHXDr9lEpWuQ %}

> 從這開始
> 可以直接打字做共筆囉 :point_down:

# 開場
因為疫情，改線上
過去，現在，未來

# 正式文章
[C.T Lin](https://github.com/chentsulin) - Full-stack JavaScript 開發者

## Suspense

### What is Suspense

- 初登場於 React 16.6

<ErrorBoundary>
    <Suspense fallback={<Spining />}>
    </Suspense>
</ErrorBoundary>

- 機制：Promise
- Promise 是狀態機 Pending -> Fulfill or Reject
- React's Suspense
- 一開始是 Pending
- 這個時候傳 Fallback
- Fulfilled 之後傳 children

### Streaming Suspense SSR

- before was Waterfall
- React 18: SSR works
- HTTP 分 chunk 傳輸
- Inline Script

### Selective Hydration

Hydration: 前端內容送達後，讓 React 重新掌控的過程

- 17: 無法處理 Interaction
- 18: 用 inline script

## Concurrent ~~Mode~~ → Features <!-- Optional -->

### Transition

#### 解決問題

遇到複雜情況時（圖片），可能會造成卡死

> 範例網站：ADORA3, 源自 React 官方


<!--  -->

#### startTransition

import { startTransition } from 'react';

// high priority
// Show What was typed
setInputValue(input);

startTransition(() => {
    // low priority
    // Show the results
    setSearchQuery(input);
})

將工作分到另一個分支

#### 中間狀態 (isPending)

const [isPending, startTransition] = useTransition();

### `<SuspenseList>`

- Before 圖片載入慢，且不同步
- After: `revealOrder` 可以控制顯示順序

<SuspenseList revealOrder="forward" />

### Data fetching

- Lifecycle 一致
- 推出不容易
- 還需要一段時間
- 會在之後的 React 18.x 推出

## Server Components

- Next.js 12 有提供相關的實作
- 實驗中


Co-locate - 讓測試與 Style 緊貼 Component

在 Server 一次處理完！

- 以前：Server (Data) -> Client (React -> Render)
- 現在：Server (Data -> React) -> Client (Render)
- Component 在 Server 上，把查詢做完

### Advantage

- 可以減少 bundle size
- 明顯減少 30% bundle size
- 可以接觸 File system
- 防止越權存取
- 更早載入的自動 Code Splitting

### Disadvantage

- 非同步得依循 React 的做法