タグ「カスタムフック」

タグカスタムフック

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 10 / 10件)

フロントエンドのテストを書きたい！ - iimon TECH BLOG

2024/12/05 21 users フロントエンド iimon tech blog テスト種類

はじめにテストの種類テストレベルテストタイプテスト戦略 Reactのテストで個人的に躓いたところ UIコンポーネントのテスト Reduxを使っている場合 @mui/x-date-pickerを使用している場合 MUIのコンポーネントでテーマを使用している場合カスタムフックのテストまとめ参考記事はじめにこんにちは、株式会社iimo... 続きを読む

【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 9 users Qiita React コンポーネント命名拡張

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

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

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

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

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

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

Reactでフォーム処理の関心事をカスタムフックに切り出す

2022/11/08 7 users React 関心事

この記事について実際にフォームを使用するときは、バリデーションライブラリと合わせて実装することが多いと思います。こちらの記事で再描画を抑えるためにはReactHookForm（以下 RHF）を使用するのが良いと投稿しました。今回の記事では、タイプセーフなバリデーションライブラリ「Zod」とRHFを使用した実践的なフ... 続きを読む

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 uhyo useCallback Props React

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

【React】カスタムフックでstatefulなコンポーネントを整理する - yigarashi のブログ

2020/02/25 7 users React yigarashi React Hooks 自作

こんにちは。最近は仕事で React を書き始めました。数年前に React を触った時は class component をせっせと書いた覚えがあるのですが、最近は functional component と react hooks を組み合わせて書くこともできるようです。react hooks の概要は公式ドキュメント等を読んでもらうことにして、本記事では、自作のカ... 続きを読む

(1 - 10 / 10件)