[筆記 + 使用心得]React 18 的更新

react reactjs react-hooks

janlin002 2022-10-30 16:26:28 ‧ 2299 瀏覽

分享至

React 18 在今年稍早推出了穩定版，聽說解決了很多長久以來的問題，所以花了點時間，體驗看看這些新功能，並且統整一下，寫成今天的文章

5 new Hooks

useTransition
useDeferredValue
useId
useSyncExternalStore
useInsertionEffect

useTransition

React 18 新加的功能之一，就是 Transition，作用在於將State分為 緊急(Urgent) 及 非緊急(Non-urgent) 兩種，Transition 對應的也就是 非緊急的state 更新。

const [isPending, startTransition] = useTransition();
startTransition(()=>{
 // 顯示Todo 內容的狀態更新不是緊急至必須馬上有反應。
 setTodos(todos);
})
// isPending用來表示該Transition 是否已經完結。

如果不需要 isPending ，可以改寫成:

import { startTransition } from 'react';

useDeferredValue

useDeferredValue 主要是解決一直重複 render 的行為，大家都知道 React 是資料驅動畫面，所以當如果取得資料上面有延遲，那麽畫面上就會有卡頓的感覺
傳統上會用 debounce 來解決這類的問題，但是跟 debouce 不一樣的是 useDeferredValue 是 被觸發後 才做回傳更新後的資料，引發 re-render，而 debounce 是 不管有沒有需要，都會固定去觸發

p.s. 依賴 deferred value 的 child component 要記得使用 useMemo，避免不必要的 re-render

const deferredValue = useDeferredValue(value);
// 參數是設定要延遲的 value 值
// 最後返回一個延遲的值 deferredValue

useTransition vs useDeferredValue

以下是我個人對於使用上的感覺，或許不是絕對

體驗下來感覺這兩個使用起來差不多，都是將事件狀態改成 Non-urgent ，不過可監聽的對象數量不一樣，useTransition 可針對多個狀態一次改成 Non-urgent，useDeferredValue 感覺是針對單一狀態去改變

useId

useId is a hook for generating unique IDs that are stable across the server and client

Note: useId is not for generating keys in a list. Keys should be generated from your data.
記得別把 useId 是用到 list 中，list 中的 keys 應該是要取自於你的資料

const id = useId();

useSyncExternalStore

https://andyyou.github.io/2022/01/05/use-sync-external-store-with-solving-problem/
https://milkmidi.medium.com/react-18-usesyncexternalstore-a427bf82c198

useInsertionEffect

useInsertionEffect工作原理類似useLayoutEffect，區別在於回調執行時還不能訪問ref中的DOM節點。
你可以在這個 Hook 內操作全局 DOM 節點。

function useCSS(rule) {
  useInsertionEffect(() => {
    if (!isInserted.has(rule)) {
      isInserted.add(rule);
      document.head.appendChild(getStyleForRule(rule));
    }
  });
  return rule;
}
function Component() {
  let className = useCSS(rule);
  return <div className={className} />;
}

Automatic Batching

17版以前，只有 useState 會做 Automatic Batching，而其他的非同步行為，例如: Promise, setTimeout，fetch 是不會自動 Automatic Batching ，不過 18 版後這些非同步預設都會自動 Automatic Batching
不過也不是所有的部分都需要 Automatic Batching ，可透過 flushSync 來跳脫 Automatic Batching