はてブログ

はてなブックマーク新着エントリーの過去ログサイトです。



タグ カスタムフック

新着順 人気順 5 users 10 users 50 users 100 users 500 users 1000 users
 
(1 - 9 / 9件)
 

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

2024/07/03 このエントリーをはてなブックマークに追加 15 users Instapaper Pocket Tweet Facebook Share Evernote Clip React matchmedia React Hooks

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

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

2024/06/30 このエントリーをはてなブックマークに追加 9 users Instapaper Pocket Tweet Facebook Share Evernote Clip Qiita React コンポーネント 命名 拡張

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

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

2024/06/30 このエントリーをはてなブックマークに追加 13 users Instapaper Pocket Tweet Facebook Share Evernote Clip Qiita React コンポーネント 命名 拡張

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

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

2023/09/04 このエントリーをはてなブックマークに追加 70 users Instapaper Pocket Tweet Facebook Share Evernote Clip React window 自前 ライブラリ フロントエンド

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

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

2022/11/08 このエントリーをはてなブックマークに追加 7 users Instapaper Pocket Tweet Facebook Share Evernote Clip React 関心事

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

react-router 作り方

2021/12/04 このエントリーをはてなブックマークに追加 15 users Instapaper Pocket Tweet Facebook Share Evernote Clip react-router history ライブラリ API

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

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

2021/08/27 このエントリーをはてなブックマークに追加 13 users Instapaper Pocket Tweet Facebook Share Evernote Clip React ガスタ 難問 概念 テーマ

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

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

2021/02/23 このエントリーをはてなブックマークに追加 114 users Instapaper Pocket Tweet Facebook Share Evernote Clip uhyo useCallback Props React

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

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

2020/02/25 このエントリーをはてなブックマークに追加 7 users Instapaper Pocket Tweet Facebook Share Evernote Clip React yigarashi React Hooks 自作

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

 
(1 - 9 / 9件)