import { useMemo } from "react"; export const TodoList: FC<Props> = ({ todos, tab }) => { const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); }; 引数 calculateValue: キャッシュする値を計算する関数。純粋で、引数は取らず、任意の型の値を返さなければなりません。Reactは、まず最初のレンダー時に関数を呼び出し、値が返されます。次回以降のレンダリングについてはつぎのとおりです。 直前のレンダー時と依存値が変わっていないとき: Reactは前と同じ値を返します。 直前のレンダー時から依存値が変わった場合: calculateValueが呼び出され、返されるのは新たな結果です。値はあとで使える
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 は、ルートのパスパターンと与えら
ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する | フューチャー技術ブログ
Reactでは、画面に関わる表示の制御はかならず何かしらのステート管理を行いそれで行います。ダイアログの場合は開閉をuseState()で作ったフラグで管理するみたいな感じです。 たとえば、ウェブブラウザのJavaScriptから呼べるalert()やconfirm()は、関数を呼び出せばダイアログが表示されますし、ダイアログが閉じたら処理が戻ってきます。confirm()ならユーザーが選択したものと一緒に返ってきます。標準の<dialog>タグが今時ですが、このタグはDOMインスタンスのshowModal()やshow()メソッドを呼ぶ必要があります。命令志向ですね。 一方、Reactでダイアログを実装する場合を考えます。メソッド呼び出しが直接扱えればシンプルですが、Reactでは基本的にステート管理でやりましょう、というのが流儀です。useImperativeHandle()を使うとか
ToKyoto.js #02 https://kyotojs.connpass.com/event/302442/
GitHub - facebook/react-strict-dom: React Strict DOM (RSD) is a subset of React DOM, imperative DOM, and CSS that supports web and native targets
Development monorepo for "React Strict DOM". React Strict DOM (RSD) is an experimental integration of React DOM and StyleX that aims to improve and standardize the development of styled React components for web and native. The goal of RSD is to improve the speed and efficiency of React development without compromising on performance, reliability, or quality. Building with RSD is helping teams at M
【Next.js】新規プロダクトのフロントエンドにおけるディレクトリ構成 - 通信レイヤー編 | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow でフロントエンドのテックリードをしている Kazuya です。今回は、筆者が担当しているプロダクト「Offers MGR(オファーズマネージャー) 」で採用しているディレクトリ構成の一部について書かせていただきます。 後述しますが、「Offers MGR」では求められる要件が複雑且つ通信で取得する情報量が膨大であることからAPI関連のディレクトリ構成もやや特殊なものになっています。ベースは以前こちらの記事で紹介した「Viewsレイヤー」を拡張させる形になっています。 専用構成になっている感があるため、参考になるかは分かりませんが、ぜひ最後まで読んでいただけると幸いです。 Offersのディレクトリ構成はこちら 弊社フロントエンドのボスであるAhomu先生が担当されているOffers側のディレクトリ構成は以下の記事をご
THE WORDPRESS for reactthe wordpress for reactBuild React websites, hassle-free.WebCrumbs provides plug-and-play functionalities and an intuitive admin panel, letting you launch and manage modern websites faster than ever.
Next.js 14 の keynote で、「server actions を使って、ボタンと同じファイル内に SQL が書ける」というキャッチーな光景が、賛否両論を呼んだ。 私個人としては、問題だとは思わない。 なぜなら、既存の「分断された クライアント / サーバー を、BFF も無しでがんばって繋げる」という世界が壊れて、 A. コンポーネントに基づいたアプリケーション設計 B. サーバー側のロジック（→必要に応じて、BFF と 真のサーバーに分かれる？） C. UI の細かな調整（→デザイナと連携 or 融合して消滅？） という形の分業に変わり、フロントエンドエンジニア全員が B. まで担当する必要が無いと考えているからである。 この3つのグループは、ソースコードレベルで連携することができるので、従来のような openAPI およびソースジェネレータに頼った開発よりも連携が容易く
クラスメソッドのReact事情大公開スペシャル -「長期運用に耐えるフロントエンド目指して」というテーマで登壇しました #クラスメソッド勉強会 | DevelopersIO
クラスメソッドのReact事情大公開スペシャル -「長期運用に耐えるフロントエンド目指して」というテーマで登壇しました #クラスメソッド勉強会 先日、クラスメソッドのReact事情大公開スペシャルというイベントにて、「長期運用に耐えるフロントエンド目指して」というテーマで登壇しました。 登壇資料 登壇資料はこちらです。 フロントエンド開発、順調に進んでる？ 会場でも来場者のみなさんに軽く聞いてみましたが、首を横に振られている方が多かったように思います。 （残念ながら私もNoです🥺） なぜそんなに苦労しているのか、それはフロントエンドならではの難しさがあるからだと私は考えています。 一つは変化の激しさです。 Reactを例にとって考えてみると、直近では従来からあるSPA・クライアントサイドでのレンダリングが主流だったものからServer Componentが出てきたりして、関心がサーバ
Storybook 7.6 contains massive performance improvements. Most will become the default in our next major release (Storybook 8.0), but you can adopt them today by opting in manually. Here’s how to get started! ⛳️ --test flag for 2-4x faster test builds 🩺 2.2x faster React docgen 🧳 Streamline essential addons 🌐 SWC for 50% faster Webpack projects 🔬 @storybook/test for more streamlined and perform
react-robot
# react-robot Table of Contents react-robot Installation API License The react-robot package provides the useMachine hook for use with React. import React from 'react'; import ReactDOM from 'react-dom'; import { createMachine, state, transition } from 'robot3'; import { useMachine } from 'react-robot'; const machine = createMachine({ off: state( transition('toggle', 'on') ), on: state( transition(
React + TypeScript: Framer MotionのvariantsでDOMツリーに調和したアニメーションを加える - Qiita
React + TypeScript: Framer MotionのvariantsでDOMツリーに調和したアニメーションを加えるJavaScriptTypeScriptECMAScriptReactframer-motion Framer Motionは、本番環境に対応したReact用のモーションライブラリです。構文は宣言的で、複雑なアニメーションのコードも簡潔に書けます。つまり、コードベースが読みやすく、保守しやすいということです。 ライブラリの基本的な使い方については「React + TypeScript: Framer Motionでアニメーションを加える」をお読みください。本稿は、公式サイト「Animation」の「Variants」について解説します。つぎのサンプル001が、公式作例を参考にしたプルダウンメニューです。 サンプル001■React + TypeScript: F
ja.react.dev の紹介
2023 年の 5 月に Introducing react.dev というブログにて新しい React のサイトが公開されました。 そこから翻訳の準備が整った後に、有志の方達による翻訳が進んできて主要な部分の翻訳が終わってきたので紹介したいと思います。 オリジナルのサイトからリンクされていないけど URL は https://ja.react.dev/ です。 ↑のブログの記事は react.dev のご紹介 です。 私自身はレビューをやっているだけなのでたいした貢献はしてなくて、@smikitky さんをはじめとするコントリビュータの方のおかげです。 New Translation Progress Checklist #452 まだ英語のままのドキュメントもありますがすでにレビュー待ちのものもあるので順次翻訳が公開されていく予定です。 全体的に実際に動かして試せるサンドボックスが特徴
GitHub - mdx-editor/editor: A rich text editor React component for markdown
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
【2024年版】ReactのUIコンポーネントライブラリ23選
【2024年版】ReactのUIコンポーネントライブラリ23選 ReactのUIコンポーネントライブラリは、Reactベースのソフトウェアアプリケーションやウェブサイトの優れたインターフェースを作成するのに役立ちます。 デザインの特徴や機能ごとにコードを記述することもできますが、UIコンポーネントライブラリを活用すれば、作業効率が高まります。 ボタンなどのデザインに必要なパーツを、ゼロから記述することなく使用することができます。 多くの時間と労力を劇的に削減できるだけでなく、より重要な課題への対策を検討し、イノベーションに取り組む機会を与えてくれます。 テーブルやマップのような基本機能、あるいはテーマのような高度なものを追加する際は、毎回、利用可能な選択肢から選ぶだけで、そのままデザインに適用することができます。 その結果、ソフトウェア開発プロセス全体が効率化され、より短い期間で質の高いア
はじめに アイディオットDX開発部の岩澤です。 とあるプロジェクトで、現在パフォーマンスチューニングを行っています。 いろいろ見ていく中で、フロントエンド側でReactのuseEffectの中でデータフェッチをしてしまうことで起こる問題を発見しました。 せっかくなので、それがなぜ問題を引き起こすのかと、その対策について、今回は記事にしたいと思います。 useEffectの良くない使い方 以下のサンプルコードは、React初級者がよくやりがちな記述です。 useEffectの中で、コンポーネントの初回レンダリング後にデータを取得しています。 また、useStateでローディング状態を管理しています。 そして、Parentsコンポーネントの子コンポーネントとしてChildコンポーネントがあり、Childコンポーネントでも必要なデータをuseEffectの中で取得しています。 export fu
はじめに こんにちは、フロントエンドエンジニアをしている大倉です。 この記事では、個人的に興味があったReactのProps Drilling問題について焦点を当て、この課題を解決するための効率的なコンポーネント設計について学んだことを紹介します。 本記事はHRBrain Advent Calendar 2023の6日目の記事です。 Prop Drilling問題とは？ Prop Drillingは、Reactのコンポーネント構造において、データ（Props）を親コンポーネントからその子孫コンポーネントへと階層を下っていく形で渡していくプロセスのことです。 Reactアプリケーションは多くのコンポーネントで構成され、これらはツリーのような階層構造を形成しています。Reactには、アプリケーションの状態管理を単純化し、データの流れを追跡しやすくするため「データは常に親から子へと一方向に流れる
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React + TypeScript: useMemoフックの使い方と使いどころ - Qiita
React Routerはルートをどうランク付けしているか
ありがとう、create-react-app
WebCrumbs - We're building the modern web
サーバーサイドの人を React に引き込む作戦――コンポーネントベースの考え方をまとめる
How to make Storybook 2-4x faster
useEffectでデータフェッチすると起こる問題
ReactにおけるProps Drilling問題を意識したコンポーネント設計 - Qiita