モーダルの開閉状態を URL で管理する
よくあるモーダルの実装について考えてみましょう。モーダルは名前のとおり、現在開いているか閉じているかの状態（モード）があります。状態を管理するときには、React の useState フックを利用する方法がまっさきに思い浮かぶのではないでしょうか？ import { useState } from "react"; import Dialog from '@ui/components/Dialog'; import Button from '@ui/components/Button'; const App = () => { const [isOpen, setIsOpen] = useState(false); return ( <> <Button variant="outlined" onClick={() => setIsOpen(true)}> Open dialog </B
Understanding React Server Components – Vercel
Understanding React Server ComponentsLearn the fundamentals of React Server Components, to better understand why (and when) to adopt. React Server Components (RSCs) augment the fundamentals of React beyond being a pure rendering library into incorporating data-fetching and remote client-server communication within the framework. Below, we’ll walk you through why RSCs needed to be created, what the
結局useMemoはいつ使えばいいの？ 僕の決定版 - Qiita
皆さんこんにちは。筆者の以前の記事では、ReactのuseMemoを無駄に使うことによるレンダリング速度のオーバーヘッドがどれくらいかをベンチマークによって示しました。 それによれば、スマートフォンを想定したとしても、useMemoだけで描画に目に見える影響を与える（16msくらいの遅延を発生させる）には万のオーダーのuseMemoが必要なことが分かります。 速度ではなくuseMemoを使うことによるメモリ消費量の増加を気にする声も聞かれましたが、すみませんが筆者はそこまでメモリクリティカルなアプリをReactで書いたことがなく知見に乏しいため、今回はこの記事の対象外となります。 この結果が出たことでuseMemoをいつ使うのかなどという議論には終止符が打たれたかと思いきや、上記の記事の感想などを見ているとまだ喧々囂々です。 そこで、この記事では筆者の考えを皆さんに共有し、いよいよもってこ
React Hook FormとZodを組み合わせて利用する｜食べログ フロントエンドエンジニアブログ
こんにちは。食べログ フロントエンドチームの原田です。 現在担当しているプロジェクトで、React Hook FormとZodを組み合わせて利用する機会があったので、今回はReact Hook Formの基本的な使い方からスキーマバリデーションをZodに任せる方法を紹介をしたいと思います。 React Hook FormとはReact Hook Form は「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」をテーマに掲げた入力フォームの管理に特化した React 向けのライブラリです。 なぜReact Hook Formを利用したか今回のプロジェクトでは複雑なフォームを組む必要があり、フォームの状態管理を任せられる点や、パフォーマンス面、ドキュメントや検索でヒットする情報の多さからReact Hook Formを利用することを決めました。 基本的な使い方まずはReac
Tamagui — React Native + Web UI kit
Core Style React with no outside deps and 100% feature support across web and React Native. Adds many missing features to the RN Style API in ~24Kb. Static A smart optimizer that does partial analysis, extracts CSS, flattens your tree, and removes code. Supports Next, Webpack, Vite, Babel and Metro. Tamagui All the components you'd want, cross platform and adaptable to each other. Composable Compo
react-hooks-use-modalを使ってモーダルコンポーネントを作成する
こんにちはかみむらです。 先日柴田さんが公開していた、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を使えば少ない工数で実装することができま
Next.jsで、サーバー・クライアントで一度だけやりたい処理 - console.lealog();
たとえば`firebase.initializeApp()`とか、特定のライブラリにSSR時には何もしなくてよいことを伝えるAPIとか。 ドキュメントにもコレだ！という部分がなかったので書いておく。 クライアント `pages/_app.js`で、`useEffect(fn, [])`でできる。 import React, { useEffect } from "react"; function MyApp({ Component, pageProps }) { useEffect(() => { /* ここでやる */ }, []); return <Component {...pageProps} /> } export default MyApp という感じ。 Advanced Features: Custom `App` | Next.js この`_app.js`は、`pages`
そうです。わたしがReactをシンプルにするSWRです。
この記事について SWR について色々と学んだので、その知見をここで共有したいと思います 💪 ※ 基本的に以下の公式サイトの情報を参考にしています 📖 そのため、この記事で出すサンプルコードなどは主に上記の公式サイトから引用させてもらっています。予めご了承ください 🙏 SWR とは何か？ SWR は、Next.js を作っているVercel 社が開発しているデータフェッチのための React Hooks ライブラリです。"SWR"と言う名前は、 stale-while-revalidate の頭文字をとって名付けられています。そのため、SWR はstale-while-revalidateに基づいた処理と設計になっています。 stale-while-revalidateについて解説したい所ですが、解説するとすごく長くなってしまうため、ここでは「 キャッシュをなるべく最新に保つ機能 」
React界隈で話題になっている「React Server Components」についてまとめました！ | DevelopersIO
どうもReact大好きCX事業部の片岡です！ 今回はReact界隈で話題になっている「React Server Components」についての内容を意訳してみました。 元ネタ 話題になっているこちらの記事が元ネタです。 https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html 概要 Fetch APIでデータをやり取りすると、バケツリレーが発生します。例えば、Spotifyのアーティストページにはアーティストの情報と人気の曲とアルバム一覧が並びます。この時、人気の曲とアルバム一覧を取得するには、アーティスト情報を取ってこないといけません。そうすると、アーティスト情報を取得している間と人気の曲・アルバム一覧を取得するまでにクライアントサイドとサーバーサイドで無駄な待機時間が出来てし
【React】useSWRはAPIからデータ取得をする快適なReact Hooksだと伝えたい - パンダのプログラミングブログ
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にリクエストを頻繁に送るアプリケーション
Reactコンポーネントが吐き出す HTML をいい感じに整形して表示する
Reactコンポーネントが吐き出す HTML を React でいい感じに表示するという、とてもピンポイントな記事です。 表示したい元となるコンポーネントを Hoge とします。 const Hoge: React.FC = () => { return <div><div>hoge</div><div>fuga</div><p>piyo</p></div> } この Hoge がレンダリングするものをインデントなどを整形してシンタックスハイライトまで行って、いい感じに表示します。 ちょっと特殊なツールを作りたい人にしか需要がない記事だとは思います。 インストール npm派のひとは、yarn add を npm i に読み替えてください。
ReactのカスタムHooksをカジュアルに使ってコードの見通しを良くしよう
もはやReactにHooksのない生活は考えられず、私たちのReactコードの中には多数のHooksが使われています。 一方でその弊害として、使われているHooksが多すぎてコードが散らかり始めた人も多いと思います。Hooksは便利ですが粒度は小さく、プログラムの規模によっては多用しなければなりません。 そこでカスタムHooksの使用を勧めます。カスタムHooksを使うことでコードの見通しを良くすることができます。 カスタムHooksをカジュアルに使っていく カスタムHooksというと、どちらかというとReactの中では難しい部類に入ります。主に「使い方がわからない」「公式ドキュメントが不親切」「ネットの解説が難しい」あたりが問題になるでしょう。しかし難しい機能だからと言って難しく使う必要はなく、自分の使える範囲で自由に使えばいいのではないかと思います。 カスタムHooksは一般にロジック
React hooksのユースケースまとめ - たまめも(tech)
プロダクションでのReact Appの立ち上げ・運用をやっとこ1サイクル回すことができたので、忘れないうちにいくつか知見を書き溜めておこうと思います。 しかし本当に変化が目まぐるしいですね。過去の薄まってしまった記憶を取り戻すためにチュートリアルを一回しして、さーてやっていき〜と思ったところで「クラス型はもうオワコン！これからはhooks！」と言われたときにはどうしようかと思いました（早めに気づけてよかったともいう）。 さて今回はそんなhooksについて。 ベーシックな解説は公式ドキュメントや各種記事に譲るとして、ユースケースに絞ったメモを残しておきます。 useState ご存知stateですね。値のストアとsetterを提供してくれる、シンプルなhookです。 まあこれはそのまんまなんですが…、主にパラメータの受け渡し時に活躍してくれました。 子コンポーネントに値を渡しつつ、onCli
Reactの実験的ステート管理ライブラリRecoilの基本的な使い方
Reactにおける状態管理の方法論は、様々な道を辿ってきました。ある人はReduxを使い、またある人はMobXを、またある人はuseContextで物事を解決してきたでしょう。 先日、また新しい選択肢が増えました。Facebook公式による状態管理ライブラリRecoilです。 まだExperimental（実験版）なので実際のプロジェクトに導入することは難しいですが、ちょっとつまみ食いをしてみましょう。 Recoil RecoilはFacebook製のReact状態管理ライブラリです。 小さくシンプルで、Hooksネイティブなライブラリとなっており、非同期処理にも対応している点が特徴です。 まだExperimental（実験版）ということで仕様は大きく変わるかも知れませんし、もしかしたらプロジェクト自体が凍結になるかもしれません。 しかしそれでも触ってみたくなるのが人間というものです。なの
React に優しい僕でありたい - Qiita
注意書き (2019/12/16 追記) こちらのコメント を受けて追記します。 コメントにあるように、React Developer Tools が示している「レンダリング」とは、関数コンポーネントの本体（あるいはクラスコンポーネントの render()）が呼ばれること、そして結果として仮想DOMの差分検出処理（リコンシリエーション）が走ることを指しています。よって、緑の枠がなんども表示されるからと言って、そこにかかる処理のコストは多くの場合高くないので、そこを減らすためのパフォーマンスチューニングがコストに見合うことはあまりないかと思いますので、この記事を参考にする場合は注意してください。 ただこの記事で紹介した react-redux の useSelector に shallowEqual を渡す手法や、コメントにある React.memo を使用すること自体は最適化の方法として正
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build a React comment form with @mention functionality - LogRocket Blog
Next.jsが出てこないReact Server Componentsハンズオン
GitHub - unlayer/react-email-editor: Drag-n-Drop Email Editor Component for React.js
createapp - webpack/Parcel/Snowpack boilerplate generator
GitHub - sghall/react-move: React Move | Beautiful, data-driven animations for React
