This article will discuss practical patterns in Recoil. It’s an advance topic that goes beyond Recoil basics, so we won’t spend time describing Recoil or its fundamentals concepts. If you’re not familiar with Recoil I suggest starting with the following sources: * Official Recoil YouTube * Recoil documentation This article is brought to you by WeKnow and represents insights gained during architect
「Reduxって今必要なの？」という疑問に対して考える本
ReactのSuspenseListでお手軽CLS対策
みなさん、React のConcurrent Mode使っていますか？ まだという方もまだまだ遅くはありませんのでご安心ください。 この記事では、Concurrent Mode API の一つであるSuspenseListを使って、Core Web Vitalsの一つである Cumulative Layout Shift (CLS) の発生を抑制する方法を紹介します。 SuspenseList とは SuspenseList は React に組み込みのコンポーネントで、複数のSuspenseコンポーネントを子として持ち、それらが表示される順番を制御する機能を持ちます。Suspense についても一応復習しておくと、これは「内部でサスペンドしたコンポーネントがあった（＝中身がまだ読み込み中である）場合は中身の代わりに指定されたフォールバックコンテンツを表示する」というコンポーネントであり、
React server components (RSC) is an exciting new feature that will have huge implications on page load performance, bundle size, and how we write React applications in the near future. We at Plasmic make a visual builder for React, and we care a lot about React performance — many of our customers use Plasmic to build performance-critical marketing and e-commerce sites. And so, even though RSC is s
This blog site has been archived. Go to react.dev/blog to see the recent posts. Although React 17 doesn’t contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it. What’s a JSX Transform? Browsers don’t understand JSX out of the box, so most React users rely on a compiler like Babel or TypeScript to transform
React's UI State Model vs Vanilla JavaScript DOM State — A Beginner's Introduction
This article is aimed at beginners who've never had the chance to see 'why React'. It takes a very contrived example to make a point about how React's declarative state model could help keep state sanity when code scales. If you're an experienced developer these series of posts by Steven might give deep insights about why declarative abstractions scale in a way you might not have thought before. T
import List from "./List"; type ListProps = React.ComponentProps<typeof List>; type TableProps = { color: string; } & ListProps; const Table: React.VFC<TableProps> = ({ color, data }) => { return ( <div> ... <List data={data} />; </div> ); };
Filed underReactoninAugust 16th, 2022.Aug 2022.Last updatedoninMay 9th, 2025.May 2025. IntroductionSo, I'll be honest. I had been working professionally with React for years without really understanding how React's re-rendering process worked. 😅 I think this is true for lots of React developers. We understand enough to get by, but if you ask a group of React developers a question like “What trigg
React Router v6 で登場した <Outlet /> を活用すると、良い感じに共通レイアウトを組み込めて、さらに <React.Suspense> や React.lazy() を組み合わせると体験が良くなるのを見つけました。おそらく React Router v6 を利用する上での頻出イディオムになると思うので、自分用のメモとして残しておきます。 最終的なサンプルコードはこちら。 使用したライブラリは次のとおりです。見た目がしょぼいとテンションが下がるので MUI で装飾していますが、本筋とは関係ないので今回は特に触れません。 react@18.0.0 react-dom@18.0.0 react-router-dom@6.3.0 @mui/material@5.9.3 @mui/icons-material@5.8.4 @emotion/react@11.10.0 @emo
BOXIL SaaSのフロントエンドをモノリポ構成 + Reactで仕切り直した話 - SMARTCAMP Engineer Blog
こんにちは!! スマートキャンプでエンジニアをしている吉永(@__GGEasy)です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaSの開発にフロントエンド、バックエンド問わず携わっています。 今回は、弊社で新規サービスとしてリリースしたBOXIL SaaS質問箱(以下SaaS質問箱)にて、React.js(以下React)を私の主導で採用しました。 この記事では、フロントエンド整備に至った経緯や、今後のBOXIL SaaSにおけるフロントエンドの技術的な展望についてお話します。 BOXIL SaaSのフロントエンドで抱えていた課題感 さまざまな技術が同居している Vue + Atomic Designでの課題 構成変更の検討 どのようにフロントエンド構成を整備したのか SaaS質問箱のフロントエンド技術選定 React + T
React 18正式版リリース。コアとなるレンダリングモデルに並行処理を導入、レンダリング速度、サーバサイドレンダリング速度の向上などを実現
React 18正式版リリース。コアとなるレンダリングモデルに並行処理を導入、レンダリング速度、サーバサイドレンダリング速度の向上などを実現 JavaScript対応のUIライブラリである「React 18」正式版がリリースされました。 React 18はAutomatic Batching、Server-Side Renderingの速度向上などをはじめとする機能強化が行われています。 Automatic Batchingでは、連続してステートの変更が行われる場合、そのたびにレンダリングの処理が走っていたところを、まとめて一回のレンダリング処理が走るだけになることで、速度が向上するというもの。 React 18以前では、Reactのイベントハンドラによる連続処理では、このようなレンダリングのまとめが行われていましたが、React 18では「createRoot」を用いることで、あらゆるス
りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ.React応用編】：くるみ割り書房
🔔「紙+電子セット」は BOOTH にて販売中！ https://oukayuka.booth.pm/items/2367992 📅 2021年 10月に第 3 刷を発行。内容を最新にアップデートしました。 ―― 実践的な React 本として評判の『りあクト！』シリーズ、三部作の第三部「React応用編」です。 第 3.1 版は React 17.0 と TypeScript 4.2、および Create React App 4.0 に対応した最新の内容となっています。 第三部ではまずルーティングを紹介した後、React の難関である副作用処理について本格的に学んでいきます。Redux とその公式スタイルガイド、Effect Hook と組み合わせた非同期処理の書き方、Redux の代替技術、さらに最新の Suspense までを紹介。 なお第一部ではフロントエンドのための Java
React v18.0 has broken ground by introducing a long-awaited feature: Concurrency! Unfortunately, despite a deluge of resources explaining how to use it, explanations of how it works are sparse. As it is a low-level feature, it’s not critical to understand React’s idea of concurrency, but it doesn’t hurt! This post does not attempt to exhaustively document React’s Concurrent API and best practices.
Simple generator for React Component. Select any node and run the plugin, it will generate React code. To get most out of this plugin, be sure to use Auto Layout as possible - layout style is derived from Auto Layout propertiesname Nodes appropriately - Node names are used for component nam...
Zodとの比較 公式サイトで、Valibot は、Zod と比較して、バンドルサイズが最大98%削減できると記述されています。今回作成した問い合わせフォームでも、92.2%の削減を確認できました。 VSCode 上で Zod で作成した Schema ファイルのサイズは gzipped 圧縮で12.8kです（Zod を利用した Schema はこちらを参照ください）。 ZodのSchema実装 import { z } from "zod"; const email: z.ZodString = z .string({ required_error: "入力が必須の項目です" }) .min(1, { message: "入力が必須の項目です" }) .max(255, { message: "255文字以内で入力してください" }) .email({ message: "メールアドレスの
GitHub - refinedev/refine: A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
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
概要プレスルーム著作権お問い合わせクリエイター向け広告掲載開発者向け利用規約プライバシーポリシーとセキュリティYouTube の仕組み新機能を試してみる© 2025 Google LLC
本稿は Next.js で今試せる React canary の機能「useFormState」に関する記事です。Server Action を使用すると、API Client を使用せずにブラウザから直接サーバーサイドの関数を実行できます。Server Action のメリットは以下のものが挙がります。 API Client が不要になる ハイドレーションを待たずに反応できる Progressive Enhancement を維持できる useFormState の話の前に、Server Action について少し触れていきます。 Server Action だけではない「Client Action」とは？ 「Server Action」というワードを知っている方は多いと思いますが「Client Action」はまだ馴染みのないワードかもしれません。React、Next.js いずれも公
この記事について 実際にフォームを使用するときは、バリデーションライブラリと合わせて実装することが多いと思います。 こちらの記事で再描画を抑えるためにはReactHookForm（以下 RHF）を使用するのが良いと投稿しました。 今回の記事では、タイプセーフなバリデーションライブラリ「Zod」とRHFを使用した実践的なフォームを作成していきます。 RHFとZodは以下のresolverを使用すると簡単に組み合わせることができます。 ですが愚直に実装しても、1つのコンポーネントにすべての関心事が詰め込まれ、ファットなコンポーネントになってしまうでしょう。 今回は、フォーム処理における関心事をカスタムフックに切り出し、交換可能（プラガブル）なフックを作成していきます。 画面 以下のようなフォーム画面を実装しています。 InputFieldコンポーネント 以降で使用しているInputFieldの
2022/12/04 追記 RemixをCloudflare Pagesで動かせるようになりました。 詳しくは Deploy a Remix siteをチェックするのがおすすめです。 前回の記事 この記事ではRemixをCloudflare Workersにデプロイしつつ、Workers KVで外部APIから取得したデータをキャッシュしてみたいと思います。 Remixをローカルで開発
GitHub - apitable/apitable: 🚀🎉📚 APITable, an API-oriented low-code platform for building collaborative apps and better than all other Airtable open-source alternatives.
APITable provides a range of amazing features, from the personal to the enterprise. Advanced technology stack and open-source Realtime collaboration allows multiple users to edit together in real time, or simultaneously with the Operational Transformation (OT) Algorithm. Extremely smooth, user-friendly, super-fast database-spreadsheet interface in <canvas> Rendering Engine. Database native archite
ログラスのReactの技術選定について🐳
はじめに こんにちはログラスのフロントエンドエンジニアの @Yuiiitoto です。 「次世代型経営管理クラウド」のSaaSを開発しています。 今回Reactを使って開発しているログラスのフロントエンドがどういう技術を使っているのか、なぜそれを選んだかについて解説していきます。 Reactはライブラリの数が豊富な反面で群雄割拠している領域が多く、技術選定がとても大変です。 同じ悩みを抱えるフロントエンドエンジニアの方に少しでも力になれればと思って記事にしました。 ログラスのフロントエンド 似たようなサービスの場合に特に参考にできる場合が多いと思うので、記事の前提としているサービスについて少し説明します。 ログラスはいわゆるtoBのSaaSの業務システムみたいな立ち位置です。 ほぼ全てのページに認証が入り、画面の中の要素はtoCのサイトより多めです。 Next.jsで構成されていて、SSG
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナ
はじめに 筆者はOpenAPIスキーマからRTK Queryのコードを生成するrtk-query-codegen-openapiに2020年頃からコントリビュートを続けていました. rtk-query-codegen-openapiは現在rtk-incubatorリポジトリではなく、redux-toolkit/packages/rtk-query-codegen-openapiに統合されています. 今回は、RTK Queryを幾つかの現場で本番運用して得られた優位性を公開します. 他ツールとの機能比較 RTK QueryとReact Queryが作成したマトリックスがある為、リンクだけ貼って省略します RTK Queryが作成したマトリックス React Queryが作成したマトリックス Best Futures of RTK Query 他のdata fetchingライブラリと比べても
Announcing SWR 1.0 – SWR
Almost 2 years ago we open sourced (opens in a new tab) SWR, the tiny data-fetching React library that people love. Today we are reaching another milestone: the 1.0 version of SWR! What’s New Smaller Size Performance is one of the most important features of SWR. In 1.0, we made the library significantly smaller without removing any existing features: 41% smaller core (24% smaller when gzipped, 3.9
はじめに こんにちは。calloc134 です。 自分は普段 React を利用してフロントエンドの開発をしています。 SPA のルーティングを実装する上で、TanStack Router を利用することが多いです。 この使い方について、簡単にまとまったドキュメントが思ったより少なく感じたため、まとめていきたいと思います。 TanStack Router とは TanStack Router は、React のルーティングを行うためのライブラリです。 当初は React Location として、TanStack の Tanner Linsley 氏によって開発されました。 その後、改名や設計のし直しが行われ、TanStack Router として開発されており、2023 年のクリスマスに v1 がリリースされました。 現在は色々な機能が追加されており、React のルーティングを行うため
React Trends in 2025
Every year I discuss the most important trends in the world of React. In this article, we will explore the React trends in 2025 that you should be aware of. Whether you are a beginner or an experienced developer, these trends will help you stay up-to-date with the latest developments in the React ecosystem. React Server ComponentsWe've come a long way with React Server Components (RSC). The first
React Router とは React Router のルートのマッチング React Router のドキュメントのRanking Routesのセクションを例として説明します。 以下の 5 つのパスパターンを取り得るアプリケーションがあるとして、/teams/newというパスが与えられたときに、どのパスパターンがマッチするでしょうか。 [ "/", "/teams", "/teams/:teamId", "/teams/:teamId/edit", "/teams/new", ]; React Router はここからさらにルートをランク付けし、最終的に/teams/newを最もマッチするルートとして採用します。 どのようにルートをランク付けするか ランク付けというのは、ルートがどれだけパスにマッチするかを評価することです。React Router は、ルートのパスパターンと与えら
HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す
ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する | フューチャー技術ブログ
Reactでは、画面に関わる表示の制御はかならず何かしらのステート管理を行いそれで行います。ダイアログの場合は開閉をuseState()で作ったフラグで管理するみたいな感じです。 たとえば、ウェブブラウザのJavaScriptから呼べるalert()やconfirm()は、関数を呼び出せばダイアログが表示されますし、ダイアログが閉じたら処理が戻ってきます。confirm()ならユーザーが選択したものと一緒に返ってきます。標準の<dialog>タグが今時ですが、このタグはDOMインスタンスのshowModal()やshow()メソッドを呼ぶ必要があります。命令志向ですね。 一方、Reactでダイアログを実装する場合を考えます。メソッド呼び出しが直接扱えればシンプルですが、Reactでは基本的にステート管理でやりましょう、というのが流儀です。useImperativeHandle()を使うとか
引数 calculateValue: キャッシュする値を計算する関数。純粋で、引数は取らず、任意の型の値を返さなければなりません。Reactは、まず最初のレンダー時に関数を呼び出し、値が返されます。次回以降のレンダリングについてはつぎのとおりです。 直前のレンダー時と依存値が変わっていないとき: Reactは前と同じ値を返します。 直前のレンダー時から依存値が変わった場合: calculateValueが呼び出され、返されるのは新たな結果です。値はあとで使えるように保存されます。 dependencies: CalculateValueのコード内で参照されるすべてのリアクティブ値の配列。リアクティブな値に含まれるのは、プロパティと状態、およびコンポーネント本体に直接宣言された変数と関数です。React用に設定されたリンターであれば、リアクティブな値がすべて依存関係に正しく指定されているかを
GitHub - tajo/ladle: 🥄 Develop, test and document your React story components faster.
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
"use client"; import { parseAsInteger, useQueryState } from "nuqs"; export function Demo() { const [hello, setHello] = useQueryState("hello", { defaultValue: "" }); const [count, setCount] = useQueryState( "count", parseAsInteger.withDefault(0), ); return ( <> <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button> <input value={hello} placeholder="Enter your name" onChange={(e) =>
Next.jsのServer Actionとreact-hook-formでフォームを実装した - BASEプロダクトチームブログ
はじめに 本記事はBASEアドベントカレンダー2024の20日目の記事です。 Pay IDのフロントエンドエンジニアをしているnojiです。 以前執筆した システムリニューアルでNext.jsのApp Router/Server Actionを使って便利だと思ったところ に記載したように、Pay IDのアカウント管理画面ではNext.jsを採用し、Server Actionを活用しています。 今回は、そのServer Action導入時に行ったフォームバリデーション周りの取り組みについて紹介します。 react-hook-formを使ったフォームバリデーション アカウント管理画面の特性上、ログインだけでなく名前や住所など登録情報の編集といったフォーム操作が必須です。そのため、以下の要件を満たすフォームバリデーションが必要でした。 入力中 or 入力後にエラーを検出し、ユーザーに即座に通知で
Micro State Management with React Hooks | Web Development | Paperback
Micro State Management with React Hooks: Explore custom hooks libraries like Zustand, Jotai, and Valtio to manage global states
ReactのCSSの選択肢を比較してみた
世はReact with CSS 戦国時代...! Pure CSS CSS Modules Styled Components(CSS in JS) Emotion(CSS in JS) Linaria(CSS in JS) Tailwind CSS Framework(Chakura UIなど) と、Reactと共に使うCSSの選択肢は非常に多岐に渡り、学習者を混乱に陥れることもしばしばかと思います。 私が実装経験がない Tailwind CSS Framework については今回語りませんが、それ以外のCSS実装方法を全く同じコンポーネントを実装することで比較してみました。 下記が実際にコーディングしたGitHubになります。 Pure CSS 通常のCSSです。 CSSは全てがグローバルで管理されてしまうので保守・管理にコストがかかり、崩壊しやすいです。 なのでBEMなどのCSS設
Webpack App
Blitz.jsの議論から学ぶ，formik vs react-final-form vs react-hook-form - Qiita
What should the default form library be in Blitz apps? BlitzがどのFormライブラリをデフォルトにするかの議論が参考になったので要約しました。 formik react-final-form react-hook-form の３択で，結論としては，React Final Formを推奨とする形に落ち着きました。 最初のコメント Blitz.jsの作者であるBrandon(@flybayer)さんがコメントしています。要約するとこんな感じ。 Formik 以前使ってたけど，パフォーマンスめっちゃ悪いって気づいたから，Formikは無しで。 React-final-form 最近ずっと使ってるけどいい感じ。 React-hook-form ほとんど使ったことない。 React-final-formをReact-hook-formに書き
今までは State 管理といえば、Redux でしたが、ここ最近いろんな State 管理ライブラリが出てきています。その中でも私が一番使いやすいなと思っているのが、React Queryです。 実際、今携わっているプロジェクトでは Redux を使っているのですが、action,reducer,api 周りなどやっぱりコード量が多くなってしまうことがつらみになっています。 React Queryの特徴としては 取得したデータをキャッシュに持たせる キャッシュされたデータをどのコンポーネントからでも簡単に利用可能 Fetch の状態を返してくれる(isLoading, error など) があります。個人的には以前に Apollo を使っていたので、isLoading などの Fetch の状態があるのはとても好印象でした。 そこで、実際に携わっている Redux のプロダクトに Rea
Deno (ディノ) Advent Calendar 17日目の記事です。 今日は Deno 用のフロントエンド開発ツールの packup を紹介します。 packup is 何 packup は Deno 用の parcel です。HTML ファイルをエントリポイントとして、js / css をバンドルして、シングルページアプリを生成します。 JavaScript のバンドルには WASM 版の esbuild を使っています。 使い方 次のコマンドでインストールできます。
Avoiding race conditions and memory leaks in React useEffect
Let us take a look at an implementation of getting data from an API request and see if there is any possibility of race conditions happening in this component: import React, { useEffect} from 'react'; export default function UseEffectWithRaceCondition() { const [todo, setTodo] = useState(null); useEffect(() => { const fetchData = async () => { const response = await fetch('https://jsonplaceholder.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Recoil Patterns: Hierarchic & Separation
Redux or Not Redux 〜Reduxが不要かもと思ったら〜
How React server components work: an in-depth guide
Introducing the New JSX Transform – React Blog
React + TypeScriptでpropsと型を便利に扱うTips集
Why React Re-Renders • Josh W. Comeau
React Router v6のOutletとReact.lazyの組み合わせが便利
Understanding React Concurrency
Figma to React Component | Figma
react-hook-form が Valibot に対応、Zod比較でバンドルサイズが92%削減
Cookpad Online Spring Internship 2021
Server Action と useFormState
Reactでフォーム処理の関心事をカスタムフックに切り出す
RemixをCloudflare Workersで動かす & KVでデータをキャッシュする
TanStack Routerでサクッと始める型安全ルーティング
React Routerはルートをどうランク付けしているか
textareaをカスタマイズできるReact用のライブラリを作成しました
React + TypeScript: useMemoフックの使い方と使いどころ - Qiita
nuqs | Type-safe search params state management for React
REST API なら React Query がファーストチョイス
Deno 用のフロントエンド開発ツール packup について
item.rakuten.co.jp
www.roses-garden.com
crndnewsdig.com
www.e-earphone.jp
forbesjapan.com
www.jiji.com