タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに こんにちは、@Sicut_studyです。 Reactを勉強するとまず最初に勉強するのがuseStateなどのHooksだったと思います。 useStateやuseEffectなどは利用する場面が多く慣れている方も多いと思いますが、その他のHooksはどうでしょうか？そもそも名前すら知らないというHooksがたくさんあるかと思います。 その中には利用することでパフォーマンスを向上させたり、ステートを簡単に扱えるようになるものなど便利なものがたくさん用意されています。 React19の登場でuseActionStateやuseOptimisticなど絶対に覚えて活用していきたい重要なHooksも登場しております。 この記事ではそんなReactで用意されている全てのHooksを12分で読める内容にして紹介していきます。 最後まで読めばどのタイミングでどのHooksを選択すればよいかわ
前提 本記事は保守性の高いReact hooksコードの指針を記述します。指針はtipsに近いものから原則に近いものまで雑多に含まれます。総じてReact hooksの標準的なAPIを上手く扱う方法が多めです。 これらは保守性の低いコードを反面教師とした私的な経験則に基づきます。（思い出し次第随時追加していきます） ご留意ください。 解消したい痛み 再現が困難な不具合の発生 容易に無限ループが発生しうる 不具合発生箇所の特定が手間 分岐が多くコードリーディングに手間がかかる 解消する手法 useEffectは１ページに１つ useEffectにdeps自動補完除外コメントを入れる stateはプリミティブにする propsにフラグがある場合はコンポーネントを分ける useEffectは１ページに１つ 悪例: ユーザーイベントの処理 const [foo, setFoo] = useStat
javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac
この記事について 上記のようなドラッグ&ドロップを使った並び替えの処理を自作したは良いものの、使うことが無くなってしまったので、供養の意味を込めて、その時に得た知見をこの記事で共有したいと思います 💪 実装する条件 この記事で実装する処理は以下の条件のもと実装してきます。 サードパーティ製のライブラリを使用しない 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.
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
Micro State Management with React Hooks: Explore custom hooks libraries like Zustand, Jotai, and Valtio to manage global states
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に渡された関数はレンダーの結果が画面に反映された後に動作し
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 SWRとは SWRは、データの取得や更新に便利なReact Hooksライブラリになります。Next.jsを開発していることでも有名な、Vercelが提供しています。 developersIOでも以下のエントリが投稿されています。 少し前にSWR 2.0が発表されました。今回はその中で、useSWRMutaionを使ってみました。 useSWRMutaion useSWRMutaionでは、通常のuseSWRのようにレンダリング時にミューテーションを行うのではなく、任意のタイミングでミューテーションを実行できます。また、ミューテーション時の状態を取得することで、データ更新の挙動を制御できます。 SWR 2.0 では、新しいフック useSWRMutation によって、宣言的な API を使用してリモートでデー
対象読者 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ヘッダー経由でサーバーと協調しながらキャッシュの有効期間を設定する手段が用意されていますね。サーバーやブラウザ側でキャッシュを制御してくれる
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
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
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
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.
//useReducerをimport import React, {useReducer} from 'react' import Button from '@material-ui/core/Button'; import ButtonGroup from '@material-ui/core/ButtonGroup'; //counterの初期値を0に設定 const initialState = 0 //reducer関数を作成 //countStateとactionを渡して、新しいcountStateを返すように実装する const reducerFunc = (countState, action)=> { //reducer関数にincrement、increment、reset処理を書く //どの処理を渡すかはactionを渡すことによって判断する switch (acti
React Hooks でリストの絞り込み検索と並び替え機能のサンプル ReactとHooks機能を使ってリストの絞り込み検索（フィルター）と並び替え（ソート）機能を作成してみます。 投稿日2019年07月23日 更新日2019年07月23日 準備 適当なコンポーネントファイルを作り作成しましょう。 importするのはuseStateとuseMemo import React, { useState, useMemo } from 'react'; export default () => { // ここにコードを追加していきます。 }; 初期データ（initialState） initialStateとして最初に表示されるデータを作成します。 実際のアプリケーションでは必要ないかもしれませんが、今回はサンプルの動きを見るために作成してます。 今回の検索は、テキスト入力でのタイトル検索と
こんにちは！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）、最後に
について、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開発者のみなさん、React Hooks使ってますか？ フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 フックの導入 – React 2020/2/6に正式版としてリリースされたReact 16.8から、React Hooksという便利すぎる機能が使えるようになりました。 Reactを使い始めたばかりでも経験が長くても、意外と敬遠している人が多いんじゃないかな？と思います。 ということでこんにちは、株式会社Playground Webシステム開発部の稲垣です！ 僕も最初は「Reactのライフサイクルすらよく分かってないのに新しい機能に手を出すのは危険や…」と思っていましたが、Reactに慣れてきて、いざ使ってみると「最高」でした。 もっとHooks広まれ！ってことで今回はRe
事前準備 モーダル実装 本日はReact.js Hooksでモーダルコンポーネントの実装を他のライブラリを活用せずに、独自に作成していきます。 こちらは初学者様に向けた入門となります。 Web開発されてるならば、モーダルはごく一般的なUX要素です。 現在のページの上部に表示されるダイアログボックス/ポップアップウィンドウとなっています。 より効率よくそしてUIを壊す事なくコンテンツを動的にレンダリングする事を意識して作成していく事が重要となります。 当ブログの記事では複雑なコードではなくシンプルな実装となっております。 事前準備 • create-react-appを使用していきます。 npx create-react-app プロジェクト名 • VS Code • React Hooksの最低限の理解 モーダル実装 まずはコンポーネント全体コードからどうぞ。 import { useSt
By TK After seven years of full stack development using Ruby, Python, and vanilla JavaScript, these days I mostly work with JavaScript, Typescript, React, and Redux. The JavaScript community is great and moves really fast. Tons of things are created "overnight", usually figuratively, but sometimes literally. All this makes it is really difficult to keep up to date. I always feel like I'm late to t
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事について モダンフロントエンドにおいて、Fluxというアプリケーションアーキテクチャが存在します。 従来、Fluxの思想に従って実装を行うためには、同名ライブラリ"Flux"やReduxが採用されるケースが多かったのですが、React16.8でのReact Hooksの登場により、ライブラリに頼ることなくFluxを実現できるようになりました。 本記事では、Fluxの概念・なぜそれが必要なのかについて説明した後、React Hooksを用いたFlux実装の一例を紹介します。 使用する環境・バージョン OS: macOS Mojav
Editor’s note: This list of the top React Hook libraries was last updated on 17 July 2023 to add more popular libraries, including React Hook Form, TanStack, React Hook Router, and useHooks-ts. React’s Hooks API is now the de facto method for creating components. It coexists alongside the class component API, which lets us create components with JavaScript classes. In addition to the standard hook
はじめに 本投稿の背景と目的 React HooksはReactアプリケーションを開発する際のファーストチョイスになっていると言っても過言ではありません。 Reactの初学者がHooksを学ぶ際に、一通りの情報は公式ドキュメントにまとまっているのですが、従来の公式チュートリアルのHooks版があったらいいのにな〜、と思いました。 というわけで、React Hooksに入門するためのチュートリアルを提供することが本稿の目的です。 なお、このチュートリアルではフックの中でも最も基本的かつ重要な useStateフックとuseEffectフックを習得対象とします。まずはこの2つを覚えれば、ちょっとしたReactアプリケーションの開発を始めることが可能です。 （2020-10-11追記） 「次に学ぶこと」の章を追加しました。 （2021-1-27修正） ステップ4で追加されたBookに設定するid
はじめに これはno plan inc.の Advent Calendar 2022の9日目の記事です。 先日参加した東京web3ハッカソンでwagmiというEVM互換のコントラクトとのやりとりやmetamask等のウォレットとの接続ができるreact hooksのコレクションを使用したので使い方や感想について書いていきたいと思います。 目次 ウォレット接続 コントラクトRead コントラクトWrite 感想 参考文献 ウォレット接続 wagimiを使って一番感動的だったのはウォレット接続です。 本当に一瞬で出来ます。 import { useAccount, useConnect, useDisconnect } from 'wagmi' import { InjectedConnector } from 'wagmi/connectors/injected' function Prof
この記事は ABEJA Advent Calendar 2020 の 8 日目の記事です。 こんにちは。そろそろ年末。今年興奮した技術的トピックは Erlang VM の JIT コンパイラ と Apple の M1 チップです。よろしくお願いします。MacBook Air は最高のユーザー体験ですね。 去年[1]と一昨年[2]は、機械学習プラットフォーム ABEJA Platform の使い方について書きましたが、今年は趣向を変え、開発の舞台裏について書いてみたいと思います。 もともと、言語処理系やコンパイラに興味がある[3]人間なので、最近ではこの趣味を実務に活かすべく、React アプリケーションの自動コード変換に取り組んでいる、というお話です。 これまでの ABEJA Platform の Web フロントエンドは... ABEJA Platform は Web フロントエンドも備
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
