タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
前提 本記事は保守性の高いReact hooksコードの指針を記述します。指針はtipsに近いものから原則に近いものまで雑多に含まれます。総じてReact hooksの標準的なAPIを上手く扱う方法が多めです。 これらは保守性の低いコードを反面教師とした私的な経験則に基づきます。（思い出し次第随時追加していきます） ご留意ください。 解消したい痛み 再現が困難な不具合の発生 容易に無限ループが発生しうる 不具合発生箇所の特定が手間 分岐が多くコードリーディングに手間がかかる 解消する手法 useEffectは１ページに１つ useEffectにdeps自動補完除外コメントを入れる stateはプリミティブにする propsにフラグがある場合はコンポーネントを分ける useEffectは１ページに１つ 悪例: ユーザーイベントの処理 const [foo, setFoo] = useStat
javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac
New Network Provisioning System Leveraging Kubernetes and Cloud Native Open Source
この記事について 上記のようなドラッグ&ドロップを使った並び替えの処理を自作したは良いものの、使うことが無くなってしまったので、供養の意味を込めて、その時に得た知見をこの記事で共有したいと思います 💪 実装する条件 この記事で実装する処理は以下の条件のもと実装してきます。 サードパーティ製のライブラリを使用しない React Hooks を使って実装する 並び替えするときにアニメーションさせる 簡単に扱えるようにする！ アニメーションは CSS を使って行いますが、今回は簡略化の為に CSS ファイルは扱わずにインライン CSSを用いる事とします。 どのように使えるか考える では早速、「 実装していくぞー 💪 」と行きたい所ですが、今回のような汎用的な処理を自作する時は、「 どういう感じで使いたいか？ 」という所から考えた方が、色々とやりやすいと思っています。なので、今回はそこから考え
2023/12/25 続編が出ました🙆♂️ この記事は記述されてからある程度時間が経過してしまっており、自分の考え方も少し変化してきています。 その変化について新しく以下の記事を書いたので、ぜひ参照してみてください。 追記 以下の記事は@testing-library/react-hooksのv3系を使っていました。 v5系に上げるとHookResultではなくRenderResultになったようなので、v5を使われる場合はRenderResultの方をお使いください🙏 🦍 テストコードを書くことがプロダクトコードを書くことと、同じくらい重要であるという認識が浸透しつつある昨今、多くの関数にはおそらくテストがあることと思います😊 最近はReactの開発がメインです。 僕は毎回フロントエンドでテストを書く場合は以下のような方針をとっています。 コンポーネントのテスト storybo
Vercel製のuseSWRはReactの非同期データ取得をラクにする SWRとは、Next.jsを作成しているVercel製のライブラリです。**SWRはuseSWRというReact Hooksを提供し、APIを通じたデータの取得をラクに記述する手助けをしてくれます。**このライブラリはなんとGitHubスター数を10,700も獲得しています。 SWRはライブラリ名で、stale-while-revalidateというRFC 5861で策定されたキャッシュ戦略の略称です。このSWRがデータ取得の扱いをラクにしてくれて最高なのです。 React開発者が嬉しいuseSWRの書き心地 useSWRは外部APIからのデータ取得、ローディング状態、エラーが発生した時をシンプルに記述できます。これがあらゆるReact開発者にとって（というか、ReactでAPIにリクエストを頻繁に送るアプリケーション
useEffectの新しいドキュメントが書かれている途中です。useEffectのタイミングでデータ取得を開始するのは、これまでもベストプラクティスではないと言われていたのですが、React 18のStrict Effectにより再び議論されるようになりました。 今のところ、Reactが提供しているAPIだけですんなり実現する方法はなく、3rd-partyライブラリやフレームワークを使いましょうとなっています。react-hooks-fetchはその一つにならないかと開発してます。 また、他のライブラリも開発してます。比較表を作りました。 ちなみに、以前作っていたuseEffectベースのライブラリはdeprecateしました。こちらの記事にも注釈追記しました。 かいつまんだ紹介しかしませんでしたが、こんな議論を楽しめる方がいらしたら、ぜひReact Fanオンラインコミュニティ(Slac
1. はじめに 対象とする読者 以下のような人を読者として想定しています。 ある程度 JavaScript を習得している人 React 公式チュートリアルを終えたものの、次のステップを探しているような人 Node.js をインストール済みである人 Git Bash もしくは何らかの UNIX シェルの操作をある程度習得している人 コードエディタには、 Visual Studio Code（以下、VSCode）を利用します。VSCode に備わる機能の利用を前提とした記述もありますので、インストールしておくことをおすすめします。 目標とする Todo アプリ タスク (Todo) を既済・未済・削除済みなどの状態によってフィルタリングできる 登録済みタスクを編集できる 削除済みアイテムを「ごみ箱」フィルタから完全に削除できる 他のおすすめのドキュメント 2. 開発環境の準備 Vite.js
こんにちはかみむらです。 先日柴田さんが公開していた、Reactのモーダルコンポーネントを簡単に作成できるライブラリ react-hooks-use-modal をmicroCMSのOrganizationに移行しました。 こちらがGitHubのリポジトリです。 https://github.com/microcmsio/react-hooks-use-modal こちらはデモになります。 https://microcmsio.github.io/react-hooks-use-modal/ react-hooks-use-modalはmicroCMSの管理画面内部にも使われています。例えばWebhook追加時のモーダルコンポーネントです。 モーダルのコンポーネントは1から実装すると非常に工数がかかりますが、react-hooks-use-modalを使えば少ない工数で実装することができま
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return <div>failed to load</div> if (isLoading) return <div>loading...</div> return <div>hello {data.name}!</div> } この例では、useSWR フックは key 文字列と fetcher 関数を受け取ります。 key はデータの一意な識別子（通常は API の URL）で、fetcher に渡されます。 fetcher はデータを返す任意の非同期関数で、ネイティブの fetch や Axios のようなツールを使うことができます。 このフッ
概要 Vueの作者であるEvan You氏は、Vueのデフォルトバージョンが2022年2月7日以降3.x系に切り替わる事を開発者ブログにおいて発表しました。 それに伴い、Vue2.x系の最後のマイナーバージョンであるVue2.7が2022年7月1日にリリースされ、こちらの LTS (long-term support)はリリースから18ヶ月であることから、Vue2.x系へのサポートは2023年12月を持って完全に打ち切られる事となりました。 以下の記事でも語られている通りVue2とVue3では破壊的変更が多く、移行コストが格段に高いことから、多くの開発チームがVue３.x系への移行を頑張るかReact等の他のフレームワークへの乗り換えをするかの選択を迫られています。 3.x系へ移行すべきかフレームワークを乗り換えるべきかの是非についてはこの記事では触れませんが、Vueの破壊的変更に伴って多
A collection of dependency-free React hooksCarefully developed React hooks that you can copy and paste into your projects.
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編) useStateとは useState()は、関数コンポーネントでstateを管理（stateの保持と更新）するためのReac
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
この記事は「DMMグループ Advent Calendar 2019」21日目の記事です。 フロントエンドエンジニアは数年前に比べ、技術の幅が広がったことにより担当するべき作業も増えてきています。 テストもその中の一つです。フロントエンドのテストは実装に対するユニットテストだけでなく、コンポーネントのユニットテスト、e2eテスト、Visual Regression Testと考えることが多くあります。 その中で以前書いた「Hooks時代のユニットテスト」というReact Hooksのテストに関する記事が結構反響があり、数ヶ月テストを運用してみて、個人的なReact Hooksにおけるユニットテストをどうすべきかを考えたので、Testing Library・Jestを使う方法で紹介します。 TypeScriptがデファクトになりつつあるので、今回はTypeScriptで書いてるよ！ Reac
Savings automatically calculated. No voucher code required
ReactでHooks APIが登場したのは2019年2月。現在では当たり前のように使われているHooksですが、みなさんは正しく使いこなせているでしょうか？ 本記事ではHooks APIの基本的な使い方から、注意点まで説明します。 useStateとは HooksはReactバージョン16.8で追加された新機能です。stateやライフサイクルといったReactの目玉機能を、クラスコンポーネントでなくとも使えるようになります。次のコードは、ボタンをクリックすると数値が増えるカウンターを作成するコンポーネントです。数値はReactのstate機能を使って管理されています。 import React, { useState } from "react"; export const CounterComponent = () => { // state を追加 const [count, set
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編) useEffectとは useEffectを使うと、useEffectに渡された関数はレンダーの結果が画面に反映された後に動作し
React Hooksに対応した複数のonChangeハンドラを処理する書き方 Functional Componentにおける複数のonChangeハンドラを一元的に処理するコールバック関数をお伝えしたい。 まずフォーム項目の操作は、onChangeハンドラが必要で、記述がなければwarningが発生するケースもある。input要素を有するコンテンツに限れば、必須イベントハンドラといえる。 そしてinput要素がひとつということも考えにくく、複数のinput要素から構成されることが予想される。たとえばログインフォームにしても、メールアドレスとパスワード、ログイン保持などが考えられるが、そのどれもstate変化によって成り立つ。 すなわちonChangeハンドラが必要となるが、それぞれでコールバック関数を定義していては効率が悪い。複数input要素があっても、ひとつのコールバック関数が処理
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 SWRとは SWRは、データの取得や更新に便利なReact Hooksライブラリになります。Next.jsを開発していることでも有名な、Vercelが提供しています。 developersIOでも以下のエントリが投稿されています。 少し前にSWR 2.0が発表されました。今回はその中で、useSWRMutaionを使ってみました。 useSWRMutaion useSWRMutaionでは、通常のuseSWRのようにレンダリング時にミューテーションを行うのではなく、任意のタイミングでミューテーションを実行できます。また、ミューテーション時の状態を取得することで、データ更新の挙動を制御できます。 SWR 2.0 では、新しいフック useSWRMutation によって、宣言的な API を使用してリモートでデー
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Big Sur 11.2.1 Node.js 15.8.0／npm 7.5.0 React 17.0.1 react-scripts 4.0.2 SWR 0.4.2 React Hooksで通信結果をキャッシュする アプリケーション開発において、外部システムとのIO処理はパフォーマンスのボトルネックになりがちです。特に、ネットワークを介した通信はその最たるものでしょう。これを解決するための手法の一つとして、キャッシュ機構を利用する方法があります。ブラウザにも、HTTPヘッダー経由でサーバーと協調しながらキャッシュの有効期間を設定する手段が用意されていますね。サーバーやブラウザ側でキャッシュを制御してくれる
#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編) ↓React.memo, useCallBack, useMemoに関する記事なので、よろしければ参考にしてみてください↓
I started my personal hooks library and decided to publish it as an npm package. Doing this in TypeScript was not straightforward, until: palmerhq/tsdx. Here's what I did. Step by step. Step 1: Creating the project $ npx tsdx create bananahooks The command is interactive and asks you to choose a template. ? Choose a template … basic ❯ react I selected the react template, and TSDX installed everyth
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編) 今ここ useRefとは 関数コンポーネントでは、Classコンポーネント時のref属性の代わりに、useRefを使って要素への参照を行
React Hooks を使っている人なら必ず使うuseEffect。useEffectはとても扱いが難しく、深く考えずに使ってしまうと思わぬバグを生んでしまったり、コードの変更を行うのが難くなってしまう。 本記事は、上記のような扱いの難しいuseEffectの使い方をさっとみることができるように短くまとめたものである。 この記事は主に以下の2つの記事を参考に構成されている。 React Hooks Document FAQ A Complete Guide to useEffect - Overreacted 基本的な使い方 const Counter = () => { const [ count, setCount ] = useState(0); /* * useEffectは、第一引数にcallbackを入れて、第二引数に依存する値の配列を入れる * 依存する値が変更される度にc
React lifecycle Hooks diagram, Functional Components visualized
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
The Lifecycle of React Hooks ComponentIn this article, we will see the order in which different useEffect callbacks and cleanups happen. We will also see how it differs when the app mounts, unmounts, updates.
Reduxで実現していたstate管理が、useContext & useReducerで実現できるようになり、Reduxが不要になってきました。 useReducer()を使ってカウンターを作ってみる スタイリングにはMaterial-UIを使用 Material-UIをinstallしたら、使いたいコンポーネントをすぐ見つけられるし、勝手にスタイリングしてくれるのでテンションあがります😁 参考：MATERIAL-UI sample1:stateが単数 //useReducerをimport import React, {useReducer} from 'react' import Button from '@material-ui/core/Button'; import ButtonGroup from '@material-ui/core/ButtonGroup'; //cou
React Hooks でリストの絞り込み検索と並び替え機能のサンプル ReactとHooks機能を使ってリストの絞り込み検索（フィルター）と並び替え（ソート）機能を作成してみます。 投稿日2019年07月23日 更新日2019年07月23日 準備 適当なコンポーネントファイルを作り作成しましょう。 importするのはuseStateとuseMemo import React, { useState, useMemo } from 'react'; export default () => { // ここにコードを追加していきます。 }; 初期データ（initialState） initialStateとして最初に表示されるデータを作成します。 実際のアプリケーションでは必要ないかもしれませんが、今回はサンプルの動きを見るために作成してます。 今回の検索は、テキスト入力でのタイトル検索と
useState の setter で値を更新しても即時 state に反映されるわけではないので、更新された state を使って別の処理を行いたい時などで意図しない動作になってしまうことがあります。 🐞 function Counter({ initCount }) { const [count, setCount] = useState(initCount); const [square, setSquare] = useState(initCount * initCount); const updateSquare = () => { setSquare( count * count ); } const onCountup = () => { setCount( count + 1 ); // ここではまだ count は更新されているとは限らない updateSquare()
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 Next.jsと同じチームによって作成されている、データ取得のための React Hooks ライブラリとして「SWR」というライブラリがあります。 今回はこのライブラリの一番基本の部分をNext.jsのプロジェクトで試してみたいと思います。 SWRとは 公式サイトにも以下のように記載されていますが「SWR」という名前はHTTPキャッシュ無効化戦略であるstale-while-revalidateに由来しています。 “SWR” という名前は、 HTTP RFC 5861 で提唱された HTTP キャッシュ無効化戦略である stale-while-revalidate に由来しています。 SWR は、まずキャッシュからデータを返し（stale）、次にフェッチリクエストを送り（revalidate）、最後に
React hooks対応のReact ReduxはどこでuseSelector、useDispatchするのか ※試行錯誤の最中で下記は解説ではなくメモ書きに近いです React で Redux を使用するときは、Redux store と connect するための component を使うのが一般的でした。よく見る mapStateToProps と mapDispatchToProps がある風景です。 import { connect } from "react-redux"; import Counter from "../components/Counter"; const mapStateToProps = (state, ownProps) => { return { // 省略 }; }; const mapDispatchToProps = (dispatch, o
について、Vue Composition APIのDocsに記載があったので、自分用にメモ。 Composition API RFC | Vue Composition API このRFCが出たのは2019年の7月なので、ぜんっぜん目新しい情報はないです。 React Hooksとの比較 Composition APIで関数ベースでロジックを記述できるようになる ロジックを合成できるという書き味は、React Hooksと同等であろう ただし、大きな違いもいくつかある まず`setup()`は、本当に1度しか呼ばれない これはつまり より直感的にJavaScriptを記述できる 呼び出し順序も、条件分岐も気にしなくてよい 呼ばれる回数が減るのでGCにも優しい `useCallback()`を使ったインラインハンドラーの最適化などが不要 `useEffect()`や`useMemo()`に正
TL;DR React SWRをJetpack Compose向けに移植して公開したぞ！ 前置き もし今からモダンなAndroidアプリをゼロから書こうと思ったらおそらくJetpack Composeを採用したいという人が多いかと思います、いわゆる宣言的UIと呼ばれるやつですね。 この宣言的と呼ばれるトレンドはUIだけに適用されているものなのでしょうか？ AndroidというプラットフォームだけでみてもCompose以外で宣言的に書ける部分は年々広がってきています。 例えば遷移先の画面から値を受け取るstartActivityForResult()+onActivityResult()は非推奨になり、代わりにregisterForActivityResult()を宣言する形に置き換わりつつあるのは周知の通りです。 また、画面のライフサイクルのハンドリングはActivityのonStart(
Reactでコンポーネントから子コンポーネントや要素などを操作するときに便利なrefだが、 意外に調べても使い方が出てこなかったので、様々な利用シーンに合わせて使い道をまとめてみた。 DOMにアクセス import React, { useRef, useEffect } from 'react'; const Component = () => { const el = useRef(null); useEffect(() => { console.log(el.current); }, []); return ( <div ref={el}>DOM</div> ); }; export default Component; import React, { useRef, useEffect } from 'react'; class Child extends React.Compon
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
