【図解解説】これ1本12分でReact Hooks 全20種を理解できる教科書 - Qiita
はじめに こんにちは、@Sicut_studyです。 Reactを勉強するとまず最初に勉強するのがuseStateなどのHooksだったと思います。 useStateやuseEffectなどは利用する場面が多く慣れている方も多いと思いますが、その他のHooksはどうでしょうか？そもそも名前すら知らないというHooksがたくさんあるかと思います。 その中には利用することでパフォーマンスを向上させたり、ステートを簡単に扱えるようになるものなど便利なものがたくさん用意されています。 React19の登場でuseActionStateやuseOptimisticなど絶対に覚えて活用していきたい重要なHooksも登場しております。 この記事ではそんなReactで用意されている全てのHooksを12分で読める内容にして紹介していきます。 最後まで読めばどのタイミングでどのHooksを選択すればよいかわ
結局 useEffect はいつ使えばいいのか
useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数であることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure
Reactベストプラクティス2: SWRを正しく使うには - Hello Tech
javascripter です。ハローでは、初期メンバーとしてプロダクトのローンチ前からAutoReserve の開発に関わっています。 前回の記事に引き続き、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 前回の記事については、こちらを参照下さい。 Reactベストプラクティス: react-hooks/exhaustive-de
Reactベストプラクティス: react-hooks/exhaustive-depsのエラーを0にする - Hello Tech
javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac
Reactの状態を理解して適切にHooksを利用する
Reactと状態は切っても切れない関係です。なぜなら、Reactは状態に基づいて画面を更新するコンポーネントベースのUIライブラリだからです🤝🏻 そんなReactの状態を管理・操作しやすくしてくれているのが、React 16.8から登場したフックです。それゆえ、フックを正しく利用するにあたってReactの状態の理解は非常に重要であり、Reactの状態の理解があやふやだと、予期せぬ挙動やバグのもとになりかねません。 今回の記事では、Reactの状態を理解しながら適切な箇所で適切なHooksを選択していくプロセスを再確認できた！自信を持ってReactをコントロールできるようになりそう！と言えることをゴールとしています🎉 今回使用した即席匿名メモアプリのコードベースです。 サークルでは、コミットに沿って説明をしていきました。（あくまで即席なので細かいこと気にしながら作ってませんorz） 【
Reactにおけるパフォーマンス最適化のTips
はじめに React は内部でのパフォーマンス最適化により UI 更新に必要な DOM 操作の数を軽減しています。本記事では、さらに React アプリケーションを最適化するテクニックを紹介します。 前提知識 以下にレンダリングの仕組み等を解説します。すでにご存知の方は飛ばしてテクニックの章をお読みください。 React がどのように UI を更新するのか レンダリングされたコンポーネントを作成した時、React はコンポーネントの要素木に対してvirtual DOMを作成します。コンポーネントの状態が変わるたびに React は virtual DOM 木を作成し以前のレンダリング結果と比較します。それらの違いのみを変更された要素の実際の DOM に反映します。 実際の DOM は操作するのにパフォーマンスコストがかかるため、React は virtual DOM を用いることで再レンダ
イントロダクション
本サイトは Next.js 公式ドキュメントの日本語翻訳サイトです。 Next.js の公式 X アカウントにもポスト頂きました。 現在、本サイトでは Canary Version のアップデートに追従し、その内容を翻訳しています。 Next.js とは？ Next.js は、フルスタック Web アプリケーションを構築するための React フレームワークです。ユーザーインターフェースを構築するために React コンポーネントを使用し、Next.js を使用して追加の機能や最適化を行います。 Next.js は、内部でバンドルやコンパイルなどの React に必要なツールを抽象化し、自動的に設定します。これにより、設定に時間を費やす代わりに、アプリケーションの構築に集中できます。 個人開発者でもチームの一員でも、Next.js はインタラクティブでダイナミック、そして高速な Reac
React の useEffect とクリーンアップ関数の実行タイミングがこれだけで分かる
React の useEffect の実行タイミングについて、このように思っていませんか？ 依存配列（第2引数として渡す配列）を省略したら、マウント時に、そのあと再レンダーごとに実行される 依存配列に空配列を入れたら、マウント時に実行される 依存配列に値を入れると、マウント時と、値が変わるごとに実行される しかもクリーンアップ関数も絡んで来て、もっと複雑で覚えられない… …そのように考える必要はありません。 実は、useEffect の規則は至ってシンプルで、しかも UI ロジックの頻出の課題を洗練されたパターンに落とし込んで解決してくれます。 エフェクトとクリーンアップの実行タイミングは、以下のように論理的にシンプルな形で捉えることができます。 マウント時 に初回のエフェクトが発火され、アンマウント時 に最後のクリーンアップが実行される。 再レンダリング時 に、前回のエフェクトをクリーン
Suspense Fetchを3年実用してみて - Encraft#4
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
管理画面等でNext.jsをBetter Reactとして使う | フューチャー技術ブログ
最近、Next.jsが複雑になりすぎて、単なるウェブ画面を作る用途にはNext.jsは重すぎるので別のものが良いとか、Vercel統合のための機能が多いんでしょ、みたいな感想を見かけることが増えた気がします。特に管理画面とか社内システムとかですね。B2Cでも設定画面系とかは当てはまるかもしれません。 ホンダ時代に、タイプRを買っても実際にサーキットとかに走らせに行く人は1/10ぐらい、という話を聞いた気がしますが、必ずしも、そのすべてのパフォーマンスを引き出さないのはダメとかなくて、単にかっこいいからとか、一部のメリットでも自分にあえば良いのです。 Next.jsも、たくさん機能がありますが、ミニマムな使い方もできます。 ほぼNext.jsの機能をオフにした使い方たぶんNext.jsを最低限で使うライン・メリットはここかな、と思います。 基本的に全部CSR(Client Side Rend
Reactを使うならReact Developer Toolsの再レンダリング時ハイライトくらい設定してくれ
モダンフロントエンドについて初めて書きます。お手柔らかに。 最近 React と Next.js に入門したのですが、入門時点で一番最初に知っておきたかったことについて書きました。 「React 初心者が useState とかを学習する前にまず一番にやることはこれ」っていう内容です。。 タイトルは自分への戒めです。 TL;DR この記事を読むと React Developer Tools の簡単な使い方を知り、useState の再レンダリングについて動きがイメージできるようになると思います React Developer Tools これのこと。React を使った開発をするのであれば、必ず導入しないといけないレベルのもの。 再レンダリング時ハイライトの設定 React Developer Tools をインストールした後、F12 を押下して Component を選択この歯車を押下す
React Application Architecture for Production〜これ一冊で全てが網羅〜
はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言
一言で理解するReact Server Components
この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。 皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) をふんだんに用いて構築されています。 React本体でServer Componentがずっとalpha版なのにNext.jsでbetaとかstableとか言ってるのは何で？ という問題も、React Canaryのアナウンスにより無事に解消されました。 React Canaryってなに？ 先日React公式ブログでアナウンスされた、新しいリリースチャネルです。 筆者の理解による概要をお伝えすると、Canary版のReac
useEffectをやめて、Suspenseを使おう
Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹介します。 追記: Suspenseではウォーターフォール問題を解決できないとの指摘について 「Suspenseの実装」に記載のコードを見た限り、ウォーターフォール問題を解決できないとの指摘がありました。 実装の章では問題を解決することではなく、<Suspense>をどのように使うかに焦点を当てました。 具体的な実装方法に踏み込むとテーマから大きく外れてしまう可能性があったためです。 読みやすさを優先した結果、解決のための実装については割
過激派が教える！ useEffectの正しい使い方
ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理
ZOZOTOWNのWebホーム画面をNext.jsでリプレイスして得た知見 - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部の武井と申します。ZOZOTOWNのフロントエンドリプレイスプロジェクトを主に担当しております。ZOZO DEVELOPERS BLOG でも「ZOZOのリプレイスプロジェクトで得られる唯一無二の経験。大規模サービスを進化させるやりがいとは」というインタビュー記事を掲載しておりますので、もしよろしければこちらも併せてご覧ください。 さて、本題です。現在ZOZOTOWNではオンプレミスかつ、モノリスだった既存システムをマイクロサービスAPIに責務を分割したり、インフラをクラウドに移行したりしています。しかし、いわゆるWebのUIを構築するためのシステムは現在も既存システムに新機能開発や機能改修を行なっており、リプレイスに着手できていませんでした。 そこで、まずホーム画面から段階的にリプレイスすべく設計・開発を昨年から行ない、無事リリースできました。ZOZOT
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
2024/04/17: 更新 内容を更新した記事を書きましたので、よかったらこちらも併せて、ご覧ください。 zenn.dev こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考
今後の React ではどの範囲を Suspense で囲むかという設計が重要になってくる
はじめに 今後のReactではどの範囲をSuspenseで囲むか という設計が重要になってくる、という話をSuspenseの説明とともにしていきます！ ※React18がリリースされて１年近く経つので今更感あるかもしれませんが、お付き合いください。 Suspense とは React18で正式な機能として実装された機能 ※React16.6で実験的機能として追加されていた Suspense でできること データ取得中ローディング状態の宣言的な記述 コンポーネント単位でのSSR コンポーネント単位でのJSロード コンポーネント単位でのHydration Suspense は単にローディングを宣言的に記述できるだけの機能ではない Suspenseはローディングを宣言的に記述できるもの、といった内容を目にすることが多い印象です。 しかし、Suspenseは単にローディングを宣言的に記述できるだけ
モダンフロントエンドで始めるつらくないReactディレクトリ構成 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 記事タイトルはReact開発者なら知る人ぞ知るりあクト！ TypeScriptで始めるつらくないReact開発のパロディです。とてもわかりやすい入門書なのでReact初学者の方には学びの第一歩として自信を持ってオススメできます！ さて今回は、モダンなフロントエンド技術を採用したうえで、極力シンプルで開発体験を損なわないようなディレクトリ構成を考えてみたので共有したく記事にしました。現在実際に運用しているのですが、今のところ大きな問題も無くチームからの不満も上がっていません。しかし、個人的に微妙な部分もあるのでそちらの紹介も行いたいと思います。 今回、構成を考えるにあたって重視したポイントは以下の3点です。 新しく参入するメンバーでもすぐに理解できるシンプルな構成にしたい テストやリファクタしやすい構成にしたい できればルールが厳
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【保存版】React Hooks 使用上の注意点が多すぎ問題 _(┐「ε:)_ - Qiita
