【保存版】「そのuseEffectの使い方あってる？」と言われる前に
参考 目的 プロジェクトで使用されている不適切なuseEffectを減らす 本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました． データフェッチング アプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // 🔴 Avoid: クリーンアップなしでのフェッチング fetchResults(query, page).then(json => { setResults(json); }
React で <Stack.Item> みたいな作り方の使い所を考える
自分ではあまり使ったことがないのですが、最近他所のデザインシステムの実装なんかを眺めていて <Stack.Item> のようにあるコンポーネントのプロパティとして他のコンポーネントを定義するパターンを何度か見かけて、どんな時に有効なのかを考えてみたくなった次第です。 具体例 Shopify のデザインシステムの中にある Stack と Stack.Item が当てはまります。 これらのコンポーネントは次のようにセットで使われます。 <Stack> <Stack.Item fill> <Heading>Order #1136</Heading> </Stack.Item> <Stack.Item> <Badge>Paid</Badge> </Stack.Item> <Stack.Item> <Badge>Fulfilled</Badge> </Stack.Item> </Stack> //
そうです。わたしがReactをシンプルにするSWRです。
この記事について SWR について色々と学んだので、その知見をここで共有したいと思います 💪 ※ 基本的に以下の公式サイトの情報を参考にしています 📖 そのため、この記事で出すサンプルコードなどは主に上記の公式サイトから引用させてもらっています。予めご了承ください 🙏 SWR とは何か？ SWR は、Next.js を作っているVercel 社が開発しているデータフェッチのための React Hooks ライブラリです。"SWR"と言う名前は、 stale-while-revalidate の頭文字をとって名付けられています。そのため、SWR はstale-while-revalidateに基づいた処理と設計になっています。 stale-while-revalidateについて解説したい所ですが、解説するとすごく長くなってしまうため、ここでは「 キャッシュをなるべく最新に保つ機能 」
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
Reactの歴史 - Qiita
こちらは React Advent Calendar 2019 ７日目の記事です。 目次 Reactの誕生とその背景 ReactのOSS化 Reactと周辺環境の時系列 Reactの誕生とその背景 2011年後半、Facebook Ads(Facebook広告の管理ツール)のUIにおいて、機能が増えていくことによりコードが複雑になり保守が困難な状況に陥っていた。 それを解決するためにFacebookの社員であるJordan Walke氏が、FaxJSというReactのプロトタイプを開発しプロダクトに導入した。 そのときのコアな発想としては、f(data)がUIになるといったように、関数にデータを与えることによってUIを生成するというものだった。 FaxJSによるコンポーネント宣言 TestProject.PersonDisplayer = { structure : function()
React Hooks、useStateの更新関数引数には関数を - Qiita
最近 Hooks を触って思ったことを綴ります。よく見る useState の increment 例です。 const [count, setCount] = useState(0) const handleClick = () => { setCount(count + 1) } return ( <div className={props.className}> <p>count: {count}</p> <button onClick={handleClick}>+1</button> </div> ) これはアンチパターンで、handleClick は render毎に再定義されます。この再定義を skip するため、useCallback による関数memoizeを行います。 アンチパターン集
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
React を TypeScript で使う際のツール考察 2018 春 | La Verda Luno
最近のフロントエンドの流れから取り残されている感じがしたので、一念発起して React で小さなアプリを作ろうと思いました。 せっかくなので、 React 関連ツールはなるべく統合して使うようにし、コード本体は TypeScript を使って開発しようと設定を始めました。 （ webpack 4 が出てきてしまいましたので、まだ周回遅れです。） 残念ながら、 create-react-app でテンプレートを作成してからツールを追加していくたびにエラーに見舞われたので、メモ書きとして記録しておきます。 執筆に長い期間かかってしまいましたので、もしその間にライブラリがアップデートされ、動かなくなっていたら申し訳ありません。 目次と使用ツール （以下のリンクは関係する部分へジャンプします。） TL;DR create-react-app React 16 TypeScript webpack
Vanilla JSで学ぶRedux - Qiita
この記事はReact #1 Advent Calendar 2017の5日目です。 はじめに 私はなんとなくReduxが好きなのですが、 初めて手を出した時はreact-reduxのボイラープレートやディレクトリ構成やstore、Provider、middlewareのセットアップなど初見ではどれも意味不明で、最初はReact専用のフレームワークだと思っていました。 しかしソースコードを読んでみるとRedux自体は実装にflowもTypeScriptも使っていない非常に小さなJSライブラリに過ぎず、Reactとは独立した存在であることが分かりました。 ここではreact-reduxや他のJSフレームワークの事を一旦忘れてVanilla JSでReduxを動かし、純粋にReduxの動作原理について学んでみたいと思います。 FluxアーキテクチャとRedux1 ReduxはFluxアーキテクチ
ミドルウェアを使わないreduxをちゃんと理解するための個人メモ - 個性は次々死んでいく
仕事でいきなりredux/redux-saga さらに redux-actions の環境を触ってきて ミドルウェアを使わないシンプルな構成のreduxの理解が浅かったのでちゃんと覚えようと思った 環境構築 お手軽 create-react-app github.com $ create-react-app react-redux-example 次にreduxを使うのに必要なnpmモジュールをインストールする $ yarn add redux react-redux react-redux は react で redux を扱うために必要 これだけで環境は整った 処理の流れ ActionType ただの変数 イベントの名前を付けてく const ADD_ITEM = 'ADD_ITEM' const DELETE_ITEM = 'DELETE_ITEM' Action オブジェクトを返す
イカリング2におけるシングルページアプリケーション
࠾༻ٕज़ w ϑϩϯτΤϯυ41" w 5ZQF4DSJQU w 3FBDU3FEVY w ཪଆʹΦʔέετϨʔγϣϯͱͯ͠ͷ"1*αʔόʔ w 1FSM w %PDLFSͰಈ͍͍ͯΔ
Flow導入して数ヶ月がたった所感 - tomoima525's blog
ReactNativeプロジェクトで、型がないことによるつらいシーンが多くなり(特に変数の解釈に起因するバグ)、Facebook製の静的型解析ツールであるFlowを数ヶ月前に導入しました。導入時の学びと、しばらく運用して感じていることについて個人的な感想を書きました。 Flow選定理由 Javascriptで静的な型付けをするといえばTypeScript(正確にはJavascriptのスーパーセット)がありますが、プロジェクト途中からの導入しやすさの観点からFlowにしました。Flowはお作法(行頭に @flow つける等)さえ押さえれば誰でも使えることから導入障壁はだいぶ低いといえます。導入のメリットについては以下のスライドがとてもわかりやすいです。 speakerdeck.com flow status でプロジェクトに対して静的型解析を走らせることもできますが、 コーディング時にワー
真・Flow & Redux で Reducer の実装パターンを考える - Qiita
4ヶ月ほど前、 Flow & Redux で Reducer の実装パターンを考える という記事を書いたが、 reducer を型付けするという目的は達しているものの、明らかに記述量が増えて冗長だという問題があった。 ところでこういう記事を見つけた。 これを flow 向けに書き直した、というかセマンティクスが一緒だったので、そのまま動いたのだが、これを自分向けに書き直したらとてもいい感じになった. flow は v0.54.1 コード // @flow type __ReturnType<B, F: (...any) => B> = B type $ReturnType<F> = __ReturnType<*, F> // Actions const INCREMENT = 'counter/increment' const ADD = 'counter/add' export func
Reactでも使える！シンプルなJavaScriptステート管理ライブラリー Mobxを試す
Reactのステート管理といえばReduxですが、React以外でも使えるライブラリーとして注目されているのが、MobXです。jQueryとReactを使ったサンプルコードで解説します。 あなたが開発したのがjQueryを使ったごくシンプルなアプリに過ぎなくても、UIのさまざまなパーツの同期を維持する問題に直面したことがあるはずです。たいていの場合、データを変更すると複数の箇所に反映する必要があり、アプリの規模が大きくなるにつれて対応が困難になります。この問題にうまく対処するには、イベントを利用して、アプリのさまざまなパーツに対して、変更があったことを知らせるのが一般的です。 それでは現在、多くの人はアプリケーションのステートをどのように管理しているのでしょうか。 「ステート」とはいったい何者なのか？ ある人物がこう言っています。「こんにちは、ぼくだよ！ ぼくにはfirstName、las
ゼロから始めるJavaScript生活 - Qiita
（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitBook – Knowledge management simplified
今、我々は、 GUI の設計について 何を考えるべきか