React v18.md

React v18がアルファバージョンになりました:tada:

v18で何が変わるか？

主な変更点

• automatic batching(三分しかないのでこれだけ説明します)
• startTransition
• new streaming server renderer
• createRoot
• etc..?

automatic batching

automatic batchingって何？

そもそもbatchingって何？

「複数回のstate更新によるUIの再描画を１回に抑えること」

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

毎回state更新->UI再描画するより一度にやった方がパフォーマンスがいい

React v17までのbatchingの課題

非同期処理など、直接Reactのイベントハンドラーに紐づかない処理の中で複数回stateを更新する場合、このbatchingが動かない。

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {
      // React 17 and earlier does NOT batch these because
      // they run *after* the event in a callback, not *during* it
      setCount(c => c + 1); // Causes a re-render
      setFlag(f => !f); // Causes a re-render
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

で、automatic batchingって何？

React v18以降、上記のようないままでbatchingが動かなかった場合でも動くようになる:tada:(※)。 これをautomatic batchingと呼ぶ。

※ React v18で追加されるReactDOM.createRootとというAPIを用いてDOMにアタッチしないといけない

ちなみにautomatic batchingだが、現行バージョンでも以下のreact-domのAPIを使用すれば使えたりする。

import {　unstable_batchedUpdates　} from 'react-dom';

参考

https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html