検索対象

並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 16 件 / 16件

新着順 人気順

useContextの検索結果1 - 16 件 / 16件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

useContextに関するエントリは16件あります。 react、 techfeed、 programming などが関連タグです。 人気エントリには 『ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている』などがあります。

useContextの関連エントリー

  • ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている

    「Redux は学習コストが高い」などと言って useState（または useReducer）と useContext を組み合わせ 劣化 オレオレ Redux を作ってしまうのを見かけます[1]。よくないことだと思いますが、気持ちは非常にわかります。Redux エコシステムがそういう気持ちにさせてしまう部分は大いにあります。 Redux は それ単体なら 学習コストは useReducer + useContext と同等であることを示してこの気持ち（誤解）を解かしつつ、なぜそういう気持ちになってしまうのか考察してみます。 まず useState と useReducer の違いを押さえておく 知っている方はスキップしてください。 useState と useReducer は本質的には同等で、どちらもコンポーネントにステート（状態）を持たせる役割があります。次のようなカウンターアプリ

      ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている

    • useReducer + useContext + Typescriptに慣れよう

      概要 以下の記事で「useReducer + Typescript」について記事を書きました。 今回はその第 2 弾として、useReducer での状態管理を子のコンポーネントでも使えるようにするために、 useContext と組み合わせた場合にどのようにプログラムを書けば良いかをご説明します。 想定読者 React がなんとなく書けるレベル以上の方 Typescript が基礎レベル以上の方 (型についてわかれば十分) React の useReducer と useContext の使い方がなんとなくでもわかっている方 useContext と useReducer を組み合わせる際に Typescript でどう書くと良いのか悩んでいる方 もし、useReducer について、どのように書けばいいかまだわからない方は、 概要に張りましたリンクの記事を読んでいただければと思います。

        useReducer + useContext + Typescriptに慣れよう

      • Reactの状態管理におけるuseReducerとuseContextの活用例

        こんにちは、アルダグラムでエンジニアをしている松田です。 Reactで状態を管理するにあたっては、useStateの利用が挙げられることが多いです。 実際、数値や文字列、真偽値などのプリミティブな値であれば、useStateが適切なケースが大半でしょう。 ただ、値を投入するだけではなく、追加・削除・更新といった操作が要求されるケースもあると思います。 その際に、配列やオブジェクトなどといった形式でデータを取り扱うことに併せて、useReducerやuseContextの利用も視野に入れると、開発手法の幅が広がります。 今回は、次の目標に掲げるUIを実現する過程を、useReducerとuseContextの活用方法の1つとしてご紹介します。 目標 以下のような操作ができるUIを作成する。 名前と年齢を入力して、ユーザーを作成 作成したユーザーは一覧に表示 各ユーザーの権限(一般 or 管理

          Reactの状態管理におけるuseReducerとuseContextの活用例

        • useContext + useReducer の使いどころ - パンダのプログラミングブログ

          TR;DR useContext は、階層の深いコンポーネントに state を渡す場面で使うと良い useReducer は、state の変更パターンが多い場面で使うと良い useContext + useReducer は、state を使うコンポーネントの階層が深い上に、前回の state を元に新しい状態を作る場面で使うと良い useContextだけを使うケース useContext は React の組み込みの Hooks の1つです。Provider でラップしたコンポーネントのツリーのどこからでも、同一の Context Object を参照できるようにする Hook です。 useContext は Context を通じて子や孫以下のコンポーネントで同一の JS オブジェクトを呼び出せる Hook です。これにより props のバケツリレー （Props Drill

            useContext + useReducer の使いどころ - パンダのプログラミングブログ

            • useContextの関連エントリー

          • useContext + useState 利用時のパフォーマンスはProviderの使い方で決まる！かも。。。？ - Qiita

            useContext + useState 利用時のパフォーマンスはProviderの使い方で決まる！かも。。。？ReactreduxuseStateuseContext この記事は2020/6/7 に投稿した「useContext + useState におけるパフォーマンス上の懸念と、その解消法として(不本意ながら)Reduxを使っちゃう話」を再調査の上修正したものです。タイトル含め色々と中身が変わっていますので一度ご覧になった方も楽しめる(?)と思います。なお修正前の記事は以下別記事として残しました。興味のある方はご参照ください。 [修正前記事]useContext + useState におけるパフォーマンス上の懸念と、その解消法として(不本意ながら)Reduxを使っちゃう話 本記事では「useContext + useState を用いたグローバルなステート管理は、Provide

              useContext + useState 利用時のパフォーマンスはProviderの使い方で決まる！かも。。。？ - Qiita

            • こんなに簡単なの？React Hook useContextでデータ共有 | アールエフェクト

              ReactのuseContextはコンポーネント間でのデータ(状態)の共有とデータ(状態)の受け渡しに関するHookです。useStateやuseReducerと組み合わせて利用することができます。まず本文書では最も基本的なuseContextの使用方法について説明を行い、その後にuseStateとuseReducerを使った利用方法を別々に説明します。その後コンポーネントのRe-renderについても動作確認を行い、本文書を読み終えるとuseContextがどのようなものかを理解することができます。 React 18で動作確認を行なっています。 useContextとは 通常親コンポーネントから子コンポーネントにデータを渡す際はpropsを介して行います。しかし親から子、そのまた子といったように複数のコンポーネントを介してデータを渡す場合にprops(prop-drilling)では設定

                こんなに簡単なの？React Hook useContextでデータ共有 | アールエフェクト

              • React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜 - Qiita

                React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜Reactreact-hooks はじめに React（v16.12.0） の Context の更新による不要な再レンダリングを防ぐ方法についての備忘録です。 useContextフックなどで利用する Context のデメリットとして 「Context を更新したら、その Context を利用しているコンポーネントがすべて再レンダリングされてしまう」 ということが記載されている時がありますが、関数コンポーネントであれば再レンダリングを防げます（クラスコンポーネントでもできるかも）。 ということで、この記事は関数コンポーネントを対象としています。 また、デモは CodeSandbox 上に置いてあります。編集して動作を確認してみる

                  React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜 - Qiita

                • [React] useContextの使い方を改めて確認してみた | DevelopersIO

                  こんにちは、CX事業本部 IoT事業部の若槻です。 ReactでGlobalなデータ共有を実現できるライブラリはいくつかあるのですが、React hooksで既定で使えるuseContextでも同様のことは行なえます。 今回は、useContextの使い方を改めて確認してみました。 環境 react@18.0.0 typescript@4.6.3 useContextを使ってみる useContextを使うことにより、Component treeのどの階層であっても、propsによる値の引き渡しを行うこと無く、Globalにデータの共有を行うことができます。 Context – React Function ComponentにおけるuseContextの使い方は次のようになります。 createContextでContextを作成する。defaultValueの指定は必須。 <Conte

                    [React] useContextの使い方を改めて確認してみた | DevelopersIO

                  • React hooksを基礎から理解する (useContext編) - Qiita

                    React hooksとは React 16.8 で追加された新機能です。 クラスを書かなくても、stateなどのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。 React hooksを基礎から理解する (useState編) React hooksを基礎から理解する (useEffect編) React hooksを基礎から理解する (useContext編) 今ここ React hooksを基礎から理解する (useReducer編) React hooksを基礎から理解する (useCallback編) React hooksを基礎から理解する (useMemo編) React hooksを基礎から理解する (useRef編) useContextとは Contextとは? Reactコンポーネントのツリーに対して「グローバル」とみなすデータについて利用す

                      React hooksを基礎から理解する (useContext編) - Qiita

                    • React Context API と useContext() の使い方

                      フロントエンドフレームワーク React の Context API と useContext() の使い方についてまとめました。 ウェブ上で見つかる Context API と useContext() についての説明は、読者にクラスコンポーネントの知識があることを前提としているものが多いようですが（私が見たものがたまたまそうだっただけかもしれません）、そのような説明はクラスコンポーネント主流の時代から React を使い続けてきた人にはわかりやすいですが、今の「 Hooks + 関数コンポーネント」主流の時代に React を学ぶ人にはかえってわかりづらいのではないかと思います。 今回は「 Hooks + 関数コンポーネント」が主流の時代に React を学ぶ方（＝かつての私）に向けて、クラスコンポーネントの知識を前提としない形での説明をしてみます。 対象読者 React を少しだけ知

                        React Context API と useContext() の使い方

                      • useContext / React Hooks – React入門

                          useContext / React Hooks – React入門

                        • React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜 - Qiita

                          React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜Reactreact-hooks はじめに React（v16.12.0） の Context の更新による不要な再レンダリングを防ぐ方法についての備忘録です。 useContextフックなどで利用する Context のデメリットとして 「Context を更新したら、その Context を利用しているコンポーネントがすべて再レンダリングされてしまう」 ということが記載されている時がありますが、関数コンポーネントであれば再レンダリングを防げます（クラスコンポーネントでもできるかも）。 ということで、この記事は関数コンポーネントを対象としています。 また、デモは CodeSandbox 上に置いてあります。編集して動作を確認してみる

                            React の Context の更新による不要な再レンダリングを防ぐ 〜useContext を利用した時に発生する不要な再レンダリングを防ぐ方法に関して〜 - Qiita

                          • 【React Hooks第1回】useState, useEffect, useContext について @ ウォーターセル社内勉強会

                            ■ React Hooks 第1回 初回は導入となる「React Hooksとは」、 そして基本のHooksであるuseState, useEffect, useContextについて学んでいきます。 ■ 勉強会概要 React Hooksが2019年2月に登場[1]し、もう一年が過ぎました。 ウォーターセル社内でも小規模なプロダクトには使用事例も出てきましたが、まだまだ本格活用できいません。 今後の利用が見込まれる中、全員の理解度を深めるために、週に一度のReact Hooks勉強会をやろうということになりました。 今までの社内勉強会は会議室で閉じた形式でやっていましたが、現在は全員が在宅で仕事をしているため、オンライン開催となります。 それならば、いっそのこと公開コンテンツとしてしまえ！という決定をしましたので一般配信をしてみたいと思います。 [1] https://github

                              【React Hooks第1回】useState, useEffect, useContext について @ ウォーターセル社内勉強会

                            • 【React】状態管理でuseContextとRecoilを試してみた。

                              概要 Reactにおける状態管理といえば、通常親コンポーネントから子コンポーネントにデータを渡す際はpropsを介して行います。ただ階層が深くなるごとに、バケツリレーのように受け渡していく方法では、管理が大変になってしまい、それを解決するために、ReactにはuseContextというReactHooksがあります。 今回は、RecoilというMeta社(旧Facebook)が開発しているReactの状態管理ライブラリらしく昨年から？？あったのかシンプルで使いやすそうなのでちらっと見てみた。 useContextとRecoilとの違いは？ そうなってくると気になるのがuseContextとRecoilとの違いです。 useContext こちらはReactから提供されているReact純正のReactHooks。 基本的な使い方はuseContextもRecoilも似てるなーと思っていました

                                【React】状態管理でuseContextとRecoilを試してみた。

                              • Reactの標準機能（useContext/useReducer）でステート管理[TypeScript版]

                                Reactの標準機能（useContext/useReducer）でステート管理[TypeScript版] React HooksのuseContext/useReducerを使用して、ステート管理する方法をご紹介します。 投稿日2020年09月13日 更新日2020年09月13日 useStateだけの場合 よくあるカウンターコンポーネントを作ってみます。 useStateでカウントを更新できるようにしています。 import React, { useState } from 'react' const Parent: React.FC = () => { const [count, setCount] = useState(0) return ( <div> <h1>カウント: { count }</h1> <button onClick={() => setCount(count +

                                  Reactの標準機能（useContext/useReducer）でステート管理[TypeScript版]

                                • useContextの使い方 - すな.dev

                                  業務で一時的に新プロジェクトにアサインされた際にuseContextを多用していた。 Reduxはよっぽどの時じゃないと使わない方針ぽい。 確かにReduxはファイル数多くなるし何かとややこしいことが多い。 Reduxを使うかどうかは以下の記事がわかりやすかった。 https://ics.media/entry/200409/ useContextの使い方はだいぶ理解できてきたのでここでまとめる。 useReducerは正直まだよくわかってないから別の機会に。 useContextはどういう時に使う？ コンポーネントをまたいで値を渡す時。 propsで渡すと孫コンポーネントに渡す時に、一度子コンポーネントを経由しなければならなくなりバケツリレーになってしまう。(propドリルとか言われてるっぽい) さらにContextのいい点はContextで管理している状態や関数をそれぞれの子コンポーネ

                                    useContextの使い方 - すな.dev
                                  1

                                  新着記事

                                  はてなブックマーク

                                  公式Twitter

                                  はてなのサービス

                                  • App Storeからダウンロード
                                  • Google Playで手に入れよう
                                  Copyright © 2005-2024 Hatena. All Rights Reserved.