【React】useMediaQuery は最終手段にしよう

2024/07/03 15 users React matchmedia React Hooks

こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせるこ... 続きを読む

Render hooksをコンポーネントの拡張として理解する - Qiita

2024/06/30 13 users Qiita React コンポーネント 命名 拡張

Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。... 続きを読む

【React / useHooks】開発不要で使える便利なカスタムフックス20選

2023/09/04 70 users React window 自前 ライブラリ フロントエンド

フロントエンドで処理をカスタムフックス化する際、windowの高さを取得するなど、どのプロジェクトでもある程度決まったコードがありますよね。 useHooksはそういったカスタムフックスのライブラリとなっています。カスタムフックは自前で作ってしまうことが多いものの部分的に任せられるかなと思い、useHooksに登録され... 続きを読む

react-router 作り方

2021/12/04 15 users react-router history ライブラリ API

history で自分だけの最強のルーターライブラリを作ろう！ react-router は history というライブラリを内部で使用しています。ブラウザの history API の抽象化を提供するのが目的のライブラリです。 react-router v5 の API に useHistory というカスタムフックがあります(v6 から名前が変更されています)が、それはま... 続きを読む

React 初心者の難問、カスタムフック（Custom Hook）を解説します

2021/08/27 13 users React ガスタ 難問 概念 テーマ

最近社内レビュー会で React レビューが多くなり、「カスタムフック使ったらスッキリできます」という言葉もよく聞くようになりました。 私が初めてそれを耳にしたときは「なにそれ美味しいの？」みたいな感じでしたし、初心者にはピンとこない概念かなーと思いましたので、今回のテーマにしたいと思います。 1. カスタ... 続きを読む

useCallbackはとにかく使え！　特にカスタムフックでは - uhyo/blog

2021/02/23 114 users useCallback uhyo Props useMemo

Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する... 続きを読む