React: アプリ内のエラーを全部まとめて処理する（react-error-boundary）
はじめに 前回は、「Error Boudary」を使用したエラー処理方法について調べました。 React: アプリ内のエラーを処理する（Error Boundary） このError Boudaryコンポーネントは、クラスコンポーネントで定義する必要があり、関数コンポーネントとして作成できません。 また、イベントハンドラでのエラーや、非同期処理でのエラーが処理できません。 そこで、コンポーネントでのエラーやイベントハンドラでのエラー、非同期処理でのエラー、全部まとめて簡単に処理できるError Boudaryのラッパー「react-error-boundary」について調べてみました。 環境 Windows11 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-error-boundary: v3.1.4
状態管理どうしてますか？ - Qiita
昨年7月の話になってしまいますが、スタートアップReact LTで「状態管理どうしてますか？」と題して、発表しました。 tl;dr justInCaseTechnologiesウェブフロントエンド、2021年7月時点での大まかな方針： 小規模のプロダクトには Recoil / Jotai を使っていく 中規模以上のプロジェクトでは Redux Toolkit を使っていく スライド サンプルコード github にサンプルコードを挙げています。 context-sample jotai-sample mobx-sample recoil-sample redux-sample zustand-sample にそれぞれのライブラリを使ったサンプルプロジェクトが納められています。 dist ディレクトリにある index.html だけ共有していますが、基本各サンプルは独立させているので、それ
【LINE証券 FrontEnd】コンポーネントをカスタムフックで提供してみた
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。 以前の記事でご紹介した通り、LINE証券ではReactを使用しています。React 16.8で導入されたフックの機能は非常に革新的で、特にカスタムフックの概念によってReactにおけるコンポーネント設計は大きく様変わりしました。我々もフック時代のコンポーネント設計を試行錯誤しており、その結果はLINE証券にも反映されています。 この記事では、その中でも我々が最近ハマっている「カスタムフックを通じてコンポーネントを提供する」という、いわば“render hooks”とも言うべき設計パターンを紹介します。 今回のお題 今回は、「いくつかのチェックボックスがあり、全部チェックを入れると次に進める」という典型的なパターンを題材にしましょう。次の画像では3つのチェックボックスと「次へ」ボタンが並んでおり
How to Fetch and Update Data From Ethereum with React and SWR | Consensys
How to Fetch and Update Data From Ethereum with React and SWR Here's how to configure your dapp's frontend so token balances and fund transfers update in your users' Ethereum wallets. Ethereum allows us to build decentralized applications (dapps). The main difference between a typical application and a dapp is that you don't need to deploy a backend—at least as long as you take advantage of the ot
保守性の高いReact hooksコードの指針
前提 本記事は保守性の高いReact hooksコードの指針を記述します。指針はtipsに近いものから原則に近いものまで雑多に含まれます。総じてReact hooksの標準的なAPIを上手く扱う方法が多めです。 これらは保守性の低いコードを反面教師とした私的な経験則に基づきます。（思い出し次第随時追加していきます） ご留意ください。 解消したい痛み 再現が困難な不具合の発生 容易に無限ループが発生しうる 不具合発生箇所の特定が手間 分岐が多くコードリーディングに手間がかかる 解消する手法 useEffectは１ページに１つ useEffectにdeps自動補完除外コメントを入れる stateはプリミティブにする propsにフラグがある場合はコンポーネントを分ける useEffectは１ページに１つ 悪例: ユーザーイベントの処理 const [foo, setFoo] = useStat
React Hooks を理解しよう - 電通総研 テックブログ
本記事は電通国際情報サービス Advent Calendar 2021の 13 日目の記事です。 執筆者は 2021 年新卒入社の XI 本部 AI トランスフォーメンションセンター所属の山田です。 はじめに React Hooks とは useState useState を使うユースケース useEffect useEffect を使うユースケース useContext useContext を使うユースケース useReducer useReducer を使うユースケース useMemo useMemo を使うユースケース useCallback React.memo と useCallback useCallback を使うユースケース React Hooks を正しく使うために おわりに はじめに 本記事では React Hooks の代表的なフックについて、その使い方とユースケ
Reactのユニットテスト2021
React でユニットテストをするときのベストプラクティスはいつも悩むのですが、とりあえず 2021 年 2 月時点では、こうかなーというのをまとめてみます。 まずテストランナーは jest で確定です。ここで悩む要素はまずありません。 では、React のテストをどうやるか？です。 公式の react-dom/test-utils を使う 公式の react-test-renderer を使う @testing-library/react を使う 選択肢としてはこの三種類が有名なところでしょう。 公式という響きはとても魅力的ですが、実は公式ドキュメントから「ボイラープレートを減らすため、エンドユーザが使うのと同じ形でコンポーネントを使ってテストが記述できるように設計されている、React Testing Library の利用をお勧めします。」という形で、@testing-library
React でレンダリングを遅延させたい - Diary
React でレンダリングを遅延させたい ということがありまして。 const Todesking = ()=> { return <> <LightComponent /> <UltraHeavyComponent /> </> } このようなコンポーネント。 LightComponent のレンダリングは一瞬、UltraHeavyComponent は複雑な state の処理が遅い。で、 LightComponent の中身はとりあえずさっさと表示しておくと UX が向上する、というような事例。そういうことありませんかね? そこで以下のようなことをした。 const useDelay = msec => { const [waiting, setWaiting] = useState(true); useEffect(()=>{ setTimeout(()=> setWaiting(
React and Video.js
These are several React and Video.js player implementations and examples. Don't forget to include the Video.js CSS, located at video.js/dist/video-js.css! React Functional Component and useEffect Example import React from 'react'; import videojs from 'video.js'; import 'video.js/dist/video-js.css'; export const VideoJS = (props) => { const videoRef = React.useRef(null); const playerRef = React.use
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
【React】コンポーネントのdefaultPropsを使おう
※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。 記事が見づらいなどの問題がありましたらContactからお知らせください。
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Typescript】いろいろな型の指定方法：React・Recoil編
React dApp Template - How to Build a React dApp - Moralis Web3 | Enterprise-Grade Web3 APIs
GitHub - musnit/react-solidity-starter: Starter repo for dApps with react/redux/drizzle/truffle
ReactのSuspense対応非同期処理を手書きするハンズオン
GitHub - twilio/twilio-video-app-react: A collaboration application built with the twilio-video.js SDK and React.js
useRef / React Hooks - React入門
@types/react Cannot use React.memo with defaultProps · Issue #36320 · DefinitelyTyped/DefinitelyTyped
https://developpaper.com/using-react-hooks-and-eventemitter/