【React】1度だけ変更されるstateにはuseStateよりuseReducerを使う方が最適
useStateでしょ！ という声が聞こえてきますね。 おっしゃる通りなんですが、それよりも実はそういう時はuseReducerの方がより適しているという話です。 はじめましてスペースマーケットでフロントエンドエンジニア兼リーダーをしています。 はじめに useState / useReducerがなんぞや？という方は公式のリファレンスをご確認ください。 1度だけ変更されるstateでいうと下記のようなイメージでしょうか？ const Hoge: FC = () => { const [finished, setFinished] = useState(false) const onClick = () => { setFinished(true) } if (finished) return <div>送信しました！</div> return ( <div> <button onClic
最速攻略！ Reactの `use` RFC
皆さんこんにちは。最近のReact界隈で話題になっているのは次のRFCです。 そこで、この記事ではさっそくRFCを理解することを目指します。 ただし、このRFCはSuspenseに深く関わるものです。SuspenseはReact 18でもう正式リリースされていますから、この記事ではSuspenseは前提知識とします。もしまだSuspenseをよく知らないのであれば、ぜひ次の記事で学習してください。 また、RFCはあくまでReactの新機能のアイデアを公開するものであり、これが必ず実装されるとは限らない点にご注意ください。例えば、過去にはuseEventというRFCが注目を集めていましたが、意見が集まった結果としてそのRFCは実装されずにクローズされました（RFCが無駄だったというわけではなく、再度検討してよりアイデアがブラッシュアップされることになります）。 新しい use API このR
What the useEvent React hook is (and isn't)
This past week, the React core team published a Request for Comment (RFC) for a new React hook: useEvent. This post attempts to capture what this hook is, what it isn’t, and what my initial reactions are. Note that this is an RFC and isn’t released yet, so it isn’t available yet and its behavior could change. Trying to solve a real problem There’s a real problem useEvent is trying to solve. Before
How to use React Hooks with Firebase Firestore - LogRocket Blog
Editor’s note: This article was last updated on 2 February 2022 to reflect the most recent updates to Firebase. What do React Hooks and Firebase have in common? They both accelerate development and reduce the amount of code you need to write to build something that would otherwise be complex. It is actually quite incredible how quickly you can put together a web app with data persistence when you
フックに関するよくある質問 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しいドキュメントではフックを使って React が学べます。 フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 このページではフックに関するよくある質問にいくつかお答えします。 導入の指針 フックが使える React のバージョンはどれですか？ クラスコンポーネントを全部書き換える必要があるのですか？ クラスではできず、フックでできるようになることは何ですか？ これまでの React の知識はどの程度使えますか？ フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか？ フックはクラスのユースケースのすべてをカバーしていますか？ フックは
How to useRef to Fix React Performance Issues
Photo by the author.Refs are a seldom-used feature in React. If you’ve read the official React guide, they’re introduced as an “escape hatch” out of the typical React data flow with a warning to use them sparingly. They’re primarily billed as the correct way to access a component’s underlying DOM element. But alongside the concept of Hooks, the React team introduced the useRef Hook, which extends
How to use React Context effectively
How to use React Context effectivelyJune 5th, 2021 — 11 min read In Application State Management with React, I talk about how using a mix of local state and React Context can help you manage state well in any React application. I showed some examples and I want to call out a few things about those examples and how you can create React context consumers effectively so you avoid some problems and im
SWR を 状態管理 として活用しているよという話
対象の読者 react の状態管理ライブラリ選定をしている方 SWR + Context API を使って状態管理を実現している方 結論 全て SWR で完結すると考えることが少なくなるので楽 SWR とは 日本語でも書かれているので分かりやすいです。 簡単にいうと SWR は データ取得のための React Hooks ライブラリ(公式サイトからそのまま引用)です。 今回のタイトルにある 状態管理は、アプリケーションレベルで管理される state と定義します。 すなわち特定のコンポーネントに限らず Global state として複数のコンポーネントから参照させたい値を保持させることも可能です。 SWR はデータ取得のためのライブラリでは...? あまり知られていないですが、SWR を状態管理としても使うことが可能です。[1] ドキュメントに記載されている箇所は確認できませんでしたが、
React v18 での Effects に関する変更内容(予定)
The Plan for React 18 のブログで React v18 の計画が発表され、アルファもリリースされました。当初の計画からは色々と変わりましたが、順調に進めば今年中に v18 がリリースされそうです。 このアルファリリースは、React 関連のライブラリ作者に試してもらってフィードバックもらうことを目的にしているため、現時点でプロダクトのコードに導入することは推奨していません。 アルファリリースなのでまだまだ破壊的な API も予想されます。 reactwg/react-18 フィードバックをもらう場所として、reactwg/react-18 という GitHub Discussions のためのリポジトリが作成されています。この Discussions は誰でも見ることはできますが書き込めるのは Collaborators になっている人のみです。そのため比較的議論の内容
useEffect()内でsetState()するのを減らすテク
コンポーネント上の useEffect() （or useLayoutEffect()） で複雑なこと、特に再レンダリングを発生させるsetState()等をすると、deps配列（第2引数）の指定方法などによっては、おかしな挙動を起こしうるのでなるべく避けたいです。何より、テストが面倒なプレゼンテーションロジックは、常にシンプルに保つ方がメンテナンスが容易になります。 追記: これはStateの更新がEvent（setState()）を発生させ、さらなるState更新を生むことで、データの流れが複雑になっているというところが本質かなと思います。ReduxじゃなくてもUnidirectional Data Flow（単方向データフロー）は普遍的な概念として有効なはずです。 Unidirectional Data Flowについては画像作りをサボってしまったのでこの記事あたりを参照してください
React.Context で作る GlobalUI Custom Hooks
GlobalUI を、React.Context を利用して作る TIPS です。どの Component からも利用しやすい様に Custom Hooks を経由します。何かを更新した際、画面上部に通知を表示する（Notification）よくあるサンプルを元に解説します。（↓ の画像の様なもの） Custom Hooks 利用例 Notification を呼び出す Component は次の様なコードになります。showNotification関数に任意の文字列を与え表示する、というシンプルな作りです。 export const Example = () => { const { showNotification } = useNotificationDispatch(); const handleClick = () => { showNotification("更新しました");
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
Hooks, State, Closures, and useReducer | Next.js Blog Example with
For those of us coming from a Redux background, useReducer can seem deceptively complex and unnecessary. Between useState and context, it's easy to fall into the trap of thinking that a reducer adds unnecessary complexity for the majority of simpler use cases; however, it turns out useReducer can greatly simplify state management. Let's look at an example. As with my other posts, this code is from
useEffect完全ガイド
あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？ []ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？ 私も Hooks を使
useCallbackはとにかく使え！ 特にカスタムフックでは - uhyo/blog
Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する効果を持ちます。 これらは最適化のためのツールなので、「過度な最適化」を避けるように啓蒙する言説がよく見られます。 すなわち、ちゃんと本当に最適化のために必要なところにだけこれらを使おうということです。 特に、React.memoはpropsが以前と変わっているかどうかを判定するためのオーバーヘッドがあるし、useMemoやuseCallbackもフック呼び出しのオーバーヘッドがあります。 意味がないところでReact.memo
React Hooks Testing
この記事は「DMMグループ Advent Calendar 2019」21日目の記事です。 フロントエンドエンジニアは数年前に比べ、技術の幅が広がったことにより担当するべき作業も増えてきています。 テストもその中の一つです。フロントエンドのテストは実装に対するユニットテストだけでなく、コンポーネントのユニットテスト、e2eテスト、Visual Regression Testと考えることが多くあります。 その中で以前書いた「Hooks時代のユニットテスト」というReact Hooksのテストに関する記事が結構反響があり、数ヶ月テストを運用してみて、個人的なReact Hooksにおけるユニットテストをどうすべきかを考えたので、Testing Library・Jestを使う方法で紹介します。 TypeScriptがデファクトになりつつあるので、今回はTypeScriptで書いてるよ！ Reac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - DavidHDev/react-haiku: A clean & lightweight collection of React Hooks & Utilities!
rfcs/text/0000-useevent.md at useevent · reactjs/rfcs
Lazy useRef instance variables · Issue #14490 · facebook/react
関数コンポーネントはクラスとどう違うのか?