0Pricing
React Academy · レッスン

HOC・Render Props・Custom Hooksの比較

コード共有の3つの方法を、可読性、テスト、コンポジションの観点から比較します。

「HOC・Render Props・Custom Hooksの比較」はCoddyKit上の無料React Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、HOC、render props、カスタムフックを、可読性、テストのしやすさ、合成のしやすさ、そしてそれぞれが適した場面という観点で比較します。

3つすべてが解決する問題

この3つのパターンはすべて、コードをコピー&ペーストせずに、複数のコンポーネント間で状態を持つロジックや振る舞いを共有するために存在します。

HOCの利点

HOCはフック登場前のクラスコンポーネントで利用でき、フックに対応していないライブラリともシームレスに統合できます。また、ラップされたコンポーネントのソースコードを変更せずに透過的に適用できます。

HOCの欠点

HOCはDevTools上でラッパー地獄を生み、2つのHOCが同じ名前のpropを注入するとpropの衝突が起こる可能性があります。また、TypeScriptで正しく型付けするのも難しくなります。refは明示的にフォワーディングする必要があります。

Render Propsの利点

Render propsではデータの流れが明示的になります。振る舞いを提供する側がどの値を公開しているかを正確に確認できます。クラスコンポーネントと関数コンポーネントの両方で使え、ヘッドレスコンポーネントのAPIにも適しています。

Render Propsの欠点

render propのコールバックをネストすると、「callback hell」が発生します。render propの関数をインラインで定義するとメモ化が機能しません。単純なフック呼び出しと比べて、見た目のノイズも増えます。

カスタムフックの利点

カスタムフックは最も合成しやすい方法です。複数のフックを呼び出して組み合わせても、コンポーネントのJSXをすっきり保てます。単独でテストしやすく、TypeScriptの型も素直に定義できます。
const { on, toggle } = useToggle();
const { x, y } = useMouse();
// No wrapper components, no callback nesting

カスタムフックの欠点

カスタムフックは関数コンポーネントでのみ動作し、クラスコンポーネントでは使えません。また、JSXを注入することはできず、データや関数だけを返します。認証ガードによるリダイレクトなど、一部の用途ではHOCやラッパーコンポーネントが必要です。

選択ガイド

ルートをリダイレクトまたは保護する必要がありますか? HOCまたはラッパーコンポーネントを使います。ヘッドレスUIライブラリを構築していますか? render propsまたはフックを使います。関数コンポーネント間で状態を持つロジックを共有しますか? カスタムフックを使います。クラスコンポーネントやサードパーティをラップしますか? HOCを使います。

現代の基本方針:まずはフック

現代的なReactコードベース(すべて関数コンポーネントで構成されている場合)では、カスタムフックがデフォルトの選択肢です。フックで解決できない場合にだけ、HOCやrender propsを検討してください。

クイックチェック

現代のReactの関数コンポーネントで、状態を持つロジックを切り出す際に推奨されるデフォルトのコード共有パターンはどれですか?

まとめ

HOC、render props、カスタムフックは、いずれもロジックを共有する方法です。現代のデフォルトは、すっきりして合成しやすく、テストもしやすいフックです。HOCはクラスコンポーネントやルートガードに、render propsはヘッドレスUIに適しています。状況に応じて選択しましょう。

次のレッスン

次のレッスン:**HOCをカスタムフックにリファクタリングする** — withAuth HOCをuseAuthフックに段階的に変換します。

よくある質問

「HOC・Render Props・Custom Hooksの比較」レッスンは無料ですか?

はい。「HOC・Render Props・Custom Hooksの比較」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「HOC・Render Props・Custom Hooksの比較」で何を学びますか?

コード共有の3つの方法を、可読性、テスト、コンポジションの観点から比較します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「HOC・Render Props・Custom Hooksの比較」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか?

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Render Propsパターン
  2. Higher-Order Components(HOC)の基礎
  3. HOC・Render Props・Custom Hooksの比較
  4. HOCからCustom Hookへのリファクタリング
← React Academyに戻る