うひょさん、よしこさんと改めて考えるReactコンポーネント設計 | Offers Magazine
はじめに 佐藤：佐藤歩です。現職では開発からしばらく離れていたんですが、最近またまとまった量のリプレイス開発に携わってるので、モデレーターとして、よしこさん、うひょさんからいろいろお話を伺っていきたいなと思っております。 よしこ：こんばんは。よしこです。株式会社ナレッジワークに創業期に入社し、フロントエンドエンジニアをしています。プロダクトの0→1のところから、今の1→10のフェーズに入るまで、SPAのアプリケーション設計や運用をしてきました。 うひょ：うひょです。株式会社バベルに在籍しています。これまでずっとTypeScriptとReactでフロントエンドのアプリ開発に携わってきました。昨年はTypeScriptに関する本も出版しています。 佐藤：今回は、Reactのコンポーネント設計におけるこちらの5つのテーマごとに、よしこさんとうひょさんに順番に簡単にお話をしていただきつつ、都度ディ
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
【react-hooks-form 】Material UIを使用したとき、フォームの送信後に入力欄を空欄にする
これは何か？ react-hooks-formとMaterial UIを使用した場合、フォームの送信後に入力欄を空欄（リセット）にする方法を書いた記事です。UIライブラリを使用した場合、フォーム送信後の入力欄を空欄するのに少し手こずったので記事にしてみました。 実装 import "./styles.css"; import { TextField, Button } from "@material-ui/core"; import { useForm, Controller } from "react-hook-form"; export default function App() { const { handleSubmit, control, reset } = useForm({ defaultValues: { title: "" } }); const handleOutpu
react-hook-formの使い方まとめ - Qiita
久しぶりの投稿になります。今後は月1ぐらいで記事投稿できるようにに頑張ります！以前react-hook-formについての記事を書いたのですが、バージョン7になって大きく変わったので改めて書いてみました。バージョン7で大きく変わったので、バージョン7より前を使っている方も多いと思い、以前書いた記事も残しす形にしました。 バージョン6はこちら↓ react-hook-formの使い方を解説 v6.13.0 useController追加! 参考：公式ドキュメント react-hook-formとは inputとかのformに関係するデータを使う際に、useStateを使うときよりもレンダリング回数を減らせたり、バリデーションも簡単に実装できてとても便利です！ インストール import { useForm, SubmitHandler } from 'react-hook-form'; im
【React】TypeScript × MUI v5のSelectコンポーネントの型エラー - Qiita
地味にハマったのでメモします MUI v5のSelectコンポーネントを使用してデータのバインディングを行なっていた時のエラーについて。 結論 問題はSelectコンポーネントの、eventを受け取る方法がMUIv5だとv4と異なる事でした。 以下はエラーが起こった時のコードになるのですが、v4だと動きます。 v4のポイントは、selectのeventハンドラを受け取るときはあらかじめデータ型を定義できない仕様のようで、以下のようにunknownで定義しています。handleSelectCatChange = (e: React.ChangeEvent<{ value: unknown }>) そして受け取った後valueにas numberとして型を定義する流れです。 const SomeForm:React.FC () => { //selectが変化するたびにeditCategory
【React・Material-ui】React-Hook-Formで複数選択可能なMaterial-uiのCheckBoxボタンを実装する。
【React・Material-ui】React-Hook-Formで複数選択可能なMaterial-uiのCheckBoxボタンを実装する。 import { FormControl, FormControlLabel, TextField } from '@material-ui/core' import Checkbox from '@material-ui/core/Checkbox' import FormHelperText from '@material-ui/core/FormHelperText' import { Controller, useForm } from 'react-hook-form' //---------------------------- const { register, handleSubmit, errors, reset, control
React の React.memo：コンポーネントの再レンダリングを最適化する
React.memoとは React.memoは、Reactの高階コンポーネント（HOC）で、関数コンポーネントのレンダリングの最適化を行うために使用されます。主にパフォーマンスの向上を目的としています。 React.memoは、関数コンポーネントが同じpropsで再レンダリングされる場合、以前のレンダリング結果を再利用して無駄なレンダリングを防ぎます。これにより、アプリケーションのパフォーマンスが向上することが期待されます。 HOC（Higher-Order Component, HOC）とは ReactのHOCとは、関数コンポーネントを引数として受け取り、新しいコンポーネントを返す関数です。 HOCは、コンポーネントのロジックやpropsの操作を再利用可能な形で提供することが目的です。HOCは、コンポーネントの構造を変更せず、コンポーネント間で共通の機能やデータを共有するために使用され
【React】useMemo の使い時をまとめる
chot Inc. で Web エンジニアをしているすてぃんです。今回は社内で useMemo の使い時がわからんという話題が挙がったので、ケースによる使い時と解説をまとめました。コードレビュー時などの参考になれば幸いです。 結論 値の計算量が大きい場合: 使う 値の計算量が小さい場合 値が primitive の場合: 使わない 値がオブジェクトや配列の場合 値をスコープ外に持ち出す場合: 使う 値をスコープ外に持ち出さない場合: 使わなくてもいい 値が関数の場合: useCallback を使う 色々条件あってよくわからんという場合: 使わなくていいです 前提知識 useMemo とは useMemo は次のような型で定義される React Hooks の 1 つです。 第 1 引数で渡す関数 factory の戻り値と useMemo 自体の戻り値の型が一致しています。それもそのはず
【React】useEffectの第二引数の使い方と活用事例と無限ループの注意点 | devsakaso – プログラミングの独学サイト
useEffectの第二引数の役割 useEffectの第二引数は、依存配列と呼ばれます。 useEffectの第二引数に指定した変数が更新されると、useEffectの第一引数の処理内容を記述した関数も再実行されるという仕組みです。 stateの更新に伴って再レンダリングしたい場合にuseEffectの第二引数にその値を入れます。 useEffectの第二引数の活用事例 import { useEffect, useState } from "react"; const Sample = () => { const [time, setTime] = useState(0); useEffect(() => { window.setInterval(() => { setTime(prev => prev + 1); }, 1000); }, []) useEffect(() => {
Next.js Server Actions の裏側を理解したくて動きとコードを追う
Next.js Server Actions Next.js 13.4 で、新機能として Server Actions[1] が追加され、バックエンド側のコードをあたかもクライアントから直接呼び出せるかのようにコードを書くことができるようになりました。 リリースブログに掲載されていた Server Actions のコードを見てみましょう。 // app/post/[id]/page.tsx (Server Component) import kv from "./kv"; export default function Page({ params }) { async function increment() { "use server"; await kv.incr(`post:id:${params.id}`); } return ( <form action={increment}
React Server Components 総まとめ
先日、React Server Componentsについてまとめる機会がありました。 この記事では、React Server Componentsの概要と、デモを触る中で感じたことについてご紹介します。 React Server Componentsとは React Server Componentsは、Reactコンポーネントをサーバーサイドでレンダーする新しい技術です。 一部のコンポーネントをサーバーサイドでレンダーしてしまうことで、アプリケーションのパフォーマンスを上げることを目的とします。 図は、デモの画面のうち、サーバーでレンダーされる部分を青で、クライアントでレンダーされる部分を赤で示したものです。 ページ全体をサーバーでレンダーするのではなく、一部のコンポーネントはクライアントにレンダーさせていることがわかります。 また、React Server ComponentsはCo
ページ遷移時にReactコンポーネントの状態を維持する - pixiv inside
こんにちは、VRoid部所属のエンジニアのyueです。 VRoid Hubでページ遷移時にcanvasの状態を維持する改善をリリースしました。本記事ではこの取り込みについて解説していきます。 前提 VRoid Hubではモデル詳細画面と投稿者のみに表示するモデル編集画面が存在しています。この二つのページは別々のレイアウトを使っていたため、モデル表示用のcanvasを操作するインスタンスがお互い共通せず、ページ遷移するたびにモデルを再度読み込むことが必要でした。 今回はDOM APIを利用してコード変更を最小限に押えつつ、再度読みを無くすような改善を行いました。 問題の再現 通常Reactの再レンダリングを防ぐには様々な手段があります。例えば React.memo 、React コンポーネントの key 、classコンポーネントのshouldComponentUpdate などが存在します
Next.js 13のApp DirectoryとEmotionを組み合わせる
Next.js 13からの新機能のApp Directoryを使用すると、CSS-in-JSライブラリであるEmotionを動作させることが出来ません。 Next.jsの公式サイトでも現在のところ未サポートとして記載されています。 Emotion側でも対応が進められていますが、現時点ではまだリリースされていません。 Workaround 上記のEmotionリポジトリのIssueに記載されている通り、現時点では以下のようなWorkaroundを使用することでEmotionを使用することが出来ます。 Emotion Cache Providerの作成 'use client'; import { CacheProvider } from '@emotion/react'; import { ReactNode, useState } from 'react'; import createCa
【衝撃】React Server Componentsが転送量に与えた驚きの影響とは…… - Qiita
皆さんこんにちは。最近React界隈を騒がせているReact Server Components (RSC) には、筆者も興味を寄せています。以下の記事でもRSCについて説明しました。 この記事の中で少し言及しているのが転送量の話です。 というのも、RSCの利点として挙げられているもののうち、パフォーマンスに関係するものとしてバンドルサイズの削減があります。つまり、Server Componentはクライアントに送られる前にただのHTMLになってしまうため、コンポーネントの定義を送る必要がない分だけJavaScriptコードの量が減るということです。 しかし、実は話はそう単純ではありません。よくよく考えると、Server ComponentがただのHTMLになると、逆にサイズが増えるということも考えられます。 // Reactコードがこれなのに <Button>click me!</But
一言で理解するReact Server Components
この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。 皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) をふんだんに用いて構築されています。 React本体でServer Componentがずっとalpha版なのにNext.jsでbetaとかstableとか言ってるのは何で？ という問題も、React Canaryのアナウンスにより無事に解消されました。 React Canaryってなに？ 先日React公式ブログでアナウンスされた、新しいリリースチャネルです。 筆者の理解による概要をお伝えすると、Canary版のReac
Next.js App Router 知られざるClient-side Cacheの仕様
前回、App Routerの遷移の仕組みと実装についてまとめました。 今回はこれの続編として、App RouterのClient-side Cacheの仕様や実装についてまとめようと思います。まだドキュメントに記載のない仕様についても言及しているので、参考になる部分があれば幸いです。 App Routerのcache分類 App Routerは積極的にcacheを取り入れており、cacheは用途や段階に応じていくつかに分類することができます。まずはそのcacheの分類を確認してみましょう。 Request Deduping Request Dedupingはレンダリングツリー内で同一データのGETリクエストを行う際に、自動でまとめてくれる機能です。 nextjs.org/docsより デフォルトでサポートしているのはfetchのみですが、Reactが提供するcacheを利用することでDBア
最速攻略！ Reactの `use` RFC
皆さんこんにちは。最近のReact界隈で話題になっているのは次のRFCです。 そこで、この記事ではさっそくRFCを理解することを目指します。 ただし、このRFCはSuspenseに深く関わるものです。SuspenseはReact 18でもう正式リリースされていますから、この記事ではSuspenseは前提知識とします。もしまだSuspenseをよく知らないのであれば、ぜひ次の記事で学習してください。 また、RFCはあくまでReactの新機能のアイデアを公開するものであり、これが必ず実装されるとは限らない点にご注意ください。例えば、過去にはuseEventというRFCが注目を集めていましたが、意見が集まった結果としてそのRFCは実装されずにクローズされました（RFCが無駄だったというわけではなく、再度検討してよりアイデアがブラッシュアップされることになります）。 新しい use API このR
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
getValuesとwatchとuseWatachの使い分け - mrsekut-p
useWatch
Reactのトランジションで世界を分岐させるハンズオン
