React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をするJavaScriptReactreact-hooks はじめに React（v16.12.0）のReact.memo、useCallback、useMemoの基本的な使い方、使い所に関しての備忘録です。 「React でのパフォーマンス最適化の手段を知りたい」 「なぜReact.memo、useCallback、useMemoを利用するのかわからない」 といった人達向けに書いた記事です。 デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 本記事で用いている用語 メモ化 計算結果 メモ化 計算結果を保持し、それを再利用する手法のこと。 キャッシュのようなものだとイメージすれば良いと思う。 そのため、以下の言葉の意味は
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
関数型Reactコンポーネントでレンダリングと副作用Hookが実行されるタイミング | Hypertext Candy
この記事では、いくつかの簡単なサンプルを通して、関数型の React コンポーネントにおいて、レンダリングと副作用 Hook（useEffect）がいつ実行されるのかを検証してみます。 関数型コンポーネントのレンダリング 先に検証から得られたルールを要約すると、以下の通りです。 内部状態またはプロパティが変更されると、コンポーネントの関数が再実行される。 関数の結果が前回の呼び出し時と同じであれば、レンダリングは発生しない。 レンダリングが完了すると、useEffect が実行される。 3番目に関して、レンダリング完了後に必ず useEffect が呼ばれるのか、一回だけ呼ばれるのか、特定の内部状態をチェックして変化があったときのみ呼ばれるのか、その挙動は useEffect の第二引数に依存します。 これらのルールを理解すれば、ほとんどのケースでレンダリングと副作用 Hook の挙動を予
React入門~環境構築から簡単なSPAの作成~ - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは、Engawaです。 ここ最近業務でReactについて触れる機会があり、Reactの学習を行ったので、 環境構築からreact-router-domを使用した簡単なSPAの作成方法についてザックリ紹介していこうと思います。 はじめに Reactとは 環境構築 起動 SPAの作成 react-router-domのインストール サンプルコード 実行 おわりに 参考資料 Reactとは React はFaceBook社が開発した、UIを作るためのJavaScript用ライブラリです。 アプリに特化したReactNativeもあります。 そちらについてはこちらで紹介していますのでご覧いただけれと思います。 環境構築 私が学習をした際の環境は以下になります。 node： v10.19.0 OS ： macOS Catalina 使用したエディタ：VSCode こちらで記載する環
When to use JSX.Element vs ReactNode vs ReactElement?
I am currently migrating a React application to TypeScript. So far, this works pretty well, but I have a problem with the return types of my render functions, specifically in my functional components. I have always used JSX.Element as the return type, now this doesn't work any more if a component decides to not render anything, i.e. returns null, since null is not a valid value for JSX.Element. Th
TypeScript: ReactNode型とReactElement型とReactChild型 - dackdive's blog
メモ。 ReactNode ReactElement ReactChild の関係性、何回か調べている気がするので整理しておく。 @types/react の型定義 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts を参照した。 図で、ReactNodeArray → Array<ReactNode> 以外の線は Union Types を表している。 たとえば type ReactChild = ReactElement | ReactText である。 メモ JSX が受け付けるすべてのものをまとめた type として ReactNode があり、そこから string や null などを除いた純粋な React コンポーネントを意味するのが ReactEleme
Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ～少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末～ でした。 ただのポエムかと思いきやかなりコアなセキュリティの話だったのでとても勉強になりました。 テックタッチのフロントエンドエンジニアの taka です。 最近テックタッチでは、品質を更に向上させるため、また今後開発を加速できるようにするためにコードを一新しました。 そこで Amplify と Nx を使って monorepo の開発環境を構築したので、その手順を記しておこうと思います。 ざっくり言うとこれらを使うことで、 monorepo の環境を簡単にセットアップしたい React + Typescript で開発したい ESLint や Jest などの開発ツールを使いた
TypeScript + React: Component patterns
Published on July 28, 2020 Stefan on Mastodon Reading time: 10 minutes More on TypeScript, React, Preact This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
