useFormState から useActionState に移行する
はじめに useActionState とは useFormState に取って代わる新しい React Hooks です。 既存の useFormState の問題点を解消するために導入されました。 useFormState useFormState とは渡されたアクションの結果に基づき state を更新するためのフックです。 const [state, formAction] = useFormState(fn, initialState, permalink?); このように useFormState にアクションと初期 state を渡すことにより、フォームが送信された後のアクションの返り値と <form> や <button> に渡せる新しいアクションを取得できます。useFormState は <form> 内でなくても使用できます。 import { useFormStat
Next.js App Router / React Server Components(RSC)を紐解いてみた - estie inside blog
デザインエンジニアの表(@HirokiOmote)です。 Next.jsでApp Routerがリリースされて、1年が過ぎました。 弊社では、@hiroppyさんを技術顧問に迎え、Frontendを中心とした長期的な技術選定にご協力いただきました。 本日は、そこで得た学びをご紹介したいと思います。 App Routerについて 2023年5月にNext.js 13.4がstableとしてリリースされ、App Routerが登場しました。 ツリー構造でのファイル配置が基本となりました。 ディレクトリ構成とルーティング page単位・feature(機能)ごとに切り分けたディレクトリ構成が可能になったため、より直感的で再利用性の高い構造が実現しました。 // App Router . ├── dashboard │ ├── components │ │ ├── button.tsx │ │ └
Server Actions時代のformライブラリconform
conformはプログレッシブ・エンハンスメントを意識して作られたReactのformライブラリです。 RemixやNext.jsなどのフレームワークをサポートしています。react-hook-formのServer Actions対応は現状検証段階なのですが、conformはすでにServer Actionsにも対応しています。 本稿ではNext.js(App Router)におけるconformの使い方を中心に紹介します。 Server Actions もう散々他の記事や公式ドキュメントで紹介されていますが、簡単にServer Actionsについて復習します。 基本的な使い方 Server Actionsはクライアントサイドから呼び出すことができる、サーバー側で実行される関数です。 この機能の最も一般的なユースケースは、サーバー側のデータを変更する際に呼び出すことです。ReactはJ
Loading.tsxはServer Action中に待機画面を表示しない【NextJS】
Server Actionで状態遷移するベストプラクティスが知りたい フォーム入力 データベース更新 画面更新 というよくある黄金シナリオを考えます。 NextJSはSSR Frameworkなので可能な限りServer Componentを利用することを推奨しています。しかしServer ComponentではHooksが使えません。 これまでのようにAPIを叩く→State更新→画面再レンダリングという黄金のパターンは使えなくなります[1]。そこでhooksに頼らずにデータの更新と再レンダリングを行う新しいNextJSのメンタルモデルに適応する必要があります。 公式ドキュメントでおすすめされる１つの方法はServer Actionを使うことです。今日はこのあたりのベストプラクティスについて備忘録としてまとめます。 Server Action Server Actionとはサーバーサイド
Conformを使う？React Hook Formでいけるかもよ - kk-web
以前 React Hook Form を無理やり Server Action に落とし込む という記事を書いたのですが。 最近 Conform というパッケージが Server Action へ対応しており、こっちを使おうみたいな記事がちらほら見受けられます。 とはいえ React Hook Form の書きっぷりと比べると結構イマイチな書きっぷりが多く、移行するのやだなーと思っていまして。 改めて React Hook Form で Server Action に繋げる方法はないかと探したところ、公式 に思いっきり記載がありました。 現在ベータ版とのことですが、結構開発も進んでいるっぽく、それならばと思い本サイトのコンタクトフォームで組んでみたところ、あっさり動いてくれました。 React Hook Form は公式ドキュメントがかなり丁寧に書かれているので、今更ここに書くようなこともな
Recoil で管理する状態を atom から atomFamily に変更した話 - spacelyのブログ
目次 目次 はじめに 状態管理したいデータ構造と機能要件 atom と atomFamily について atom atomFamily atom と atomFamily の使い分け atomFamily を使った実装 atom で実装した場合 atomFamily で実装した場合 atomFamily だからこその課題 atomFamily からデータを取得するためにはパラメータが必要 atomFamily の default に selector を設定できない 課題に対応した結果 リファクタリング前の状態一覧 (atom を使った実装の場合) リファクタリング後の状態一覧 (atomFamily を使った実装の場合) まとめ 最後に はじめに フルスタックエンジニアとして開発を行っている五十嵐です。弊社でリリースしている パノラマ変換 3D プレイヤー について、サーバサイドの Ru
Storybook First な開発のススメ
Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ
[React]ContextAPIのアンチパターン
ContextAPI と useState は本来組み合わせてはいけない ContextAPI の機能は、コンポーネントの階層を飛び越えてデータを配信することにあります。しかしここで気をつけなければならないのが、Provider に設定する値を useState で管理すると、Provider を持っているツリーが全て再レンダリングされることです。この書き方は最悪のアンチパターンです。 アンチパターン Provider に渡す値を更新をするのに上位のコンポーネントの useState のディスパッチャーが使用しています。どれか一つでも値を更新すると、全てのコンポーネントが再レンダリングされます。ContextAPI での解説などでこの方法をよく見かけます。しかし値一つの変更で全てを再レンダリングするなら、状態管理の必要性そのものが無くなってしまいます。これはやってはならない書き方です。 i
![[React]ContextAPIのアンチパターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/272a515da385a1f469e3be36a2c50fa6ade78082/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--bZLUf-z---%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%25255DContextAPI%2525E3%252581%2525AE%2525E3%252582%2525A2%2525E3%252583%2525B3%2525E3%252583%252581%2525E3%252583%252591%2525E3%252582%2525BF%2525E3%252583%2525BC%2525E3%252583%2525B3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%2525A9%2525BA%2525E9%25259B%2525B2%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VlZTgzMDYyMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
【React】複数ページに分割し進捗を表示する入力フォームの設計
概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ
TailwindCSSでコンポーネントを作成するときに意識していること
1. ComponentPropsを使う 多くの人が述べていますが、拡張性を高めるためにReact.ComponentPropsを使います。 import { ComponentProps, FC } from 'react' type ButtonProps = { loading: boolean } & ComponentProps<'button'> export const Button: FC<ButtonProps> = ({ loading, children, ...props }) => { return <button {...props}>{loading ? children : 'Loading...'}</button> } このようにすると、ページで用いるときにデフォルトのボタンと同じような使用感で用いることができます。 2. tailwind-mergeを
ReactからVueコンポーネントをブリッジして使う方法
始めに Vue.jsからReactに乗り換えよう！そんなふうに思ったときに、規模が小さいなら一気に全部差し替えることができるかもしれませんが、大きくなるとそれは難しくなると思います。段階的にやる方法の1つとして1ページずつReactに差し替えていくことが考えられますが、そこで使われているVueコンポーネントが他のページと共通で使われていて迂闊に差し替えることができない・・・なんてケースもあると思います。 最初の移行コストを下げるために、そもそもVueコンポーネントをブリッジさせて表面上だけReactで動かすみたいなことができないかなと色々検証していて、ある程度動くようになったので記事にまとめたいと思います。今回は移行の話なのでVue2を対象にしています。 検証イメージ 下のGifアニメのような、Reactアプリの中でVue.jsで作ったカウンターコンポーネントを呼び出してデータやイベントを
React Native製アプリケーションをプロファイリングしてレンダリングを最適化する
執筆時点でのバージョンは 4.28.0 でした。 プロファイリングを開始する プロファイリングを開始するにあたっては、まずReact Developer Toolsを起動し、アプリから接続する形をとります。 まずは以下のコマンドで起動し、 React Nativeアプリから接続を行います。接続するには、React NativeアプリのDev Menuを開き（三本指タップ）、Open React Native dev menu > Debugとタップしていきます。（iOSの場合はOpen React Native dev menu > Open React DevTools） 自動的にReact Developer Toolsの表示が以下のように「No profiling data has been recorded.」と表示されるようになれば接続完了です。 また、プロファイリングを行うにあ
formik を使う前に、知っておきたかった点をまとめてみた
import React from 'react'; import { useFormik } from 'formik'; const SignupForm = () => { // Pass the useFormik() hook initial form values and a submit function that will // be called when the form is submitted const formik = useFormik({ initialValues: { email: '', }, onSubmit: values => { alert(JSON.stringify(values, null, 2)); }, }); return ( <form onSubmit={formik.handleSubmit}> <label htmlFor=
React Hook FormでuseFieldArrayの初期化方法を間違っていた話。初期値はdefaultValuesで設定すること
React Hook FormのuseFieldArrayは動的にフォームの入力項目を増減する必要がある場合にとても便利な機能です。 とても便利な機能なのですが、私は最初間違って使っていました。 正しい使い方を理解したので記事にまとめておこうと思います。 useFieldArrayの公式ドキュメントは下記を参照してください。 どう間違えたのか？ サンプルコードを交えて説明した方が理解しやすいので、サンプルコードに沿って説明します。 サンプルコードのバージョンは下記の通りです。 react: 18.2.0 react-hook-form: 7.43.0 例えば下記のようなデータをAPIで受け取り、valueの数だけテキストボックスを作成する画面を考えます。 import { useEffect } from 'react'; import { useFieldArray, useForm,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Magic UI
Next.jsでrewritesを使うと全く関係ないページで再レンダリングが発生する
Promise や Context から値を読み取る use React フック
💧 MistCSS
Next.js で Props をソートすると gzip 時のビルドサイズを少しだけ減らせる
ComponentProps: React's Most Useful Type Helper