【ふぁいばー】

Fiber（React）とは？

最終更新: 2026年10月8日

💡 画面の更新を計算する作業を、単位に分けて管理する

Reactの更新処理を管理する内部アーキテクチャと、その作業単位を表すデータ構造の名前。更新の計算を小さな単位で進める土台となり、並行レンダリングでは中断・再開や優先度の調整を可能にする。

📌 このページのポイント

中断できる計算と、画面への反映を区別した例です。全更新が中断されるわけではなく、任意のJavaScript関数を途中で止める仕組みでもありません。

ひよこ

光ファイバーの話？

ペンギン先生

英語の綴りは同じだけれど、ここではReact内部の仕組みだよ。Fiberという構造に、対象の種類、親子や兄弟の関係、状態などを持たせて更新作業を管理する。アプリから普通に呼び出す公開APIの名前ではないんだ。

ひよこ

何を小さく分けるの？

ペンギン先生

主に次の画面をどうするか計算する作業だね。コンポーネントなどに対応する作業単位を扱い、ブラウザーへ実行を返す機会を作れる。画面のピクセルを分割することや、アプリの任意の関数を途中で止めることとは違うよ。

ひよこ

途中で止めると画面が半分だけ変わる？

ペンギン先生

更新の計算とDOMへの反映を分けて考えよう。並行レンダリングでは計算を中断・再開したり、不要になった計算を捨てたりできる。Reactは計算途中の結果をそのまま少しずつDOMへ反映せず、整合した内容を反映するんだ。

ひよこ

Fiberがあれば、全ての更新を中断する？

ペンギン先生

そうとは限らないよ。React 16でFiberが導入されたことと、並行レンダリングの機能を使うことは別だね。React 18の公式説明でも、新しい並行機能を使う前の更新は同期的に処理されるとしている。更新の種類や使う機能が関わるんだ。

ひよこ

使えば、どんな画面も速くなる？

ペンギン先生

緊急性の低い更新より入力への反応を優先する、といった使い方の土台になるよ。ただし総計算量が必ず減るわけではなく、重い処理自体の改善も必要。内部構造へ直接依存するより、Reactの公開APIを使い、実際の応答を確認しよう。

まとめ：ざっくりこれだけ覚えればOK！

「Fiber」って出てきたら「Reactが画面の更新の計算を、作業単位に分けて管理する内部の仕組み」と思えればだいたいOK！

📖 おまけ：英語の意味

「Fiber」＝繊維

💬 fiberは英語で繊維。ここではReact内部のアーキテクチャとデータ構造の呼び名で、通信の光ファイバーとは別の用語だよ

参考資料