useEffectのdeps比較関数をカスタムしたくなったときにやること - uhyo/blog
Reactにおいて、useEffectなどいくつかのフックは第2引数として依存リストを取ります。 例えばuseEffectの場合、レンダリングの度に依存リストのいずれかの値が前回から変化したかどうかがチェックされ、変化していた場合はレンダリング後にコールバック関数が呼び出されます。 具体例としては、次のコンポーネントはcounterが変化するたびにconsole.logでそれを表示するでしょう。 const Conter = () => { const [counter, setCounter] = useState(0); useEffect(()=> { console.log(counter); }, [counter]); // ... }この場合、このuseEffectの依存リストはcounter一つということになります。 最初counterが0だった場合、次の再レンダリング時に
Recoil — Another React State Management Library?
There are many React state management libraries, and new ones pop up from time to time. But it is not every day that Facebook themselves introduce a state management solution. Is it any good? Does it bring anything new to the table? Let’s dive in and see if it’s worth your time (spoiler: yes, it does). It was quite something, watching Dave McCabe, A Facebook software engineer, introduce a new stat
styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき
Mackerel のフロントエンド "React化" プロジェクトを支える技術と設計 - Hatena Developer Blog
こんにちは, Mackerel 開発チーム アプリケーションエンジニアの id:susisu です. 現在 Mackerel では, Web コンソール画面の開発に使用しているフレームワークを, これまで使用してきた AngularJS から React へ移行することを中心とした, フロントエンド開発の刷新プロジェクトを行っています. このプロジェクトの立ち上げについては以前 Hatena Engineer Seminar で発表しましたが, そこでは時間の都合もあり, 技術的側面についてはあまり深く掘り下げることは出来ませんでした. ということでこの記事では, より技術的な面にフォーカスしてプロジェクトの内容をご紹介できればと思います. "React化" プロジェクトについて Mackerel の開発は 2014 年ごろから始まりましたが, フロントエンドのフレームワークとしては当初か
Accessible Animations in React with "prefers-reduced-motion" • Josh W. Comeau
Accessible Animations in ReactThe “prefers-reduced-motion” Hook Filed underReactoninMay 4th, 2020.May 2020.Last updatedoninJuly 25th, 2024.Jul 2024. IntroductionLong-time readers of this site have probably picked up that I am a big fan of animations. When used properly, I believe they add a ton of value to the user experience. That said, it's important to be mindful of the fact that not everybody
Recoil について勉強した
Fecebook が新しく発表した Recoil について 自分の学習手順 Getting Started | Recoil を写経して動かす Facebook 製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog で非同期周りを理解 公式ドキュメントの API Reference で理解 <RecoilRoot ...props /> | Recoil これは自分が写経しながら書いた型定義。色々足りてないがチュートリアルで出る範囲は理解できる。 declare module "recoil" { export type RecoilState<T> = {}; export const RecoilRoot: React.ComponentType<{ initializeState?: (options: { set: <T>(recoilVal:
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
React Summit Remote Edition まとめ(前編)
naturalclar.devReact Summit Remote Edition まとめ(前編)April 18, 2020 2020/04/17 に開催された React Summit Remote Edition を視聴していたのでそのレポートを書きます。 コロナウィルスが蔓延っているなか、登壇者、実況者、参加者すべてがリモートで参加する盛大なイベントとなりました。 YouTube Live で視聴するのみなら参加費は無料（！）で大変ありがたかったです。 有料枠では、登壇者に質問できる Slack チャンネルや、登壇者と直接 Zoom で対話できる枠、技術的な質問を自由に聞ける Workshop、懇親会にてオンラインバー、QuakeJS大会など、世界中の参加者と交流する枠などが用意されていました。 開催時間が日本時間の22:00-2:30で、質問する体力がでなさそうだったので、今回
React Router v6 Preview
The next major version of React Router, version 6, is just around the corner. We published the first alpha release back in January, and we released another alpha last week. For version 6, I'm using "alpha" to mean "not yet feature complete". I also anticipate having some minor breaking changes between alphas as we nail down the final APIs. For these reasons, I've been hesitant to publish anything
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
2020 年、 React 軸で学ぶべき技術 - mizchi's blog
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
SPA + SSR + PWA の作り方とセキュリティについて - hiroppy's site
<script nonce="xxxxx" id="initial-data" type="text/plain" data-json="${preloadedState}" ></script> このpreloadedStateはエスケープ処理が必要なので注意してください。 クライアント側の読み込み方 const initialData = JSON.parse( document.getElementById("initial-data")!.getAttribute("data-json")!, ); const { store } = configureStore(initialData); https://github.com/hiroppy/ssr-sample/blob/master/src/client/index.tsx#L21-L22 useEffect SSR では、
React+Redux環境に『Jest』と『 Enzyme』を導入し、フロントエンドでのテスト環境を構築しました - Zeals TECH BLOG
みなさんこんにちは！ Zealsでフロントエンドエンジニアとしてインターンをしている栂瀬といいます。 この度Zealsで、テスティングフレームワークのJestを導入しました！ 背景や導入にあたっての取り組みなど、何を行なったかを詳しくご紹介していきたいと思います！ Jest & Enzyme とは 背景 実際に動かしてみた 【準備】React Componentをテストしよう 実際のテストコードをご紹介 タグの有無をテスト イベントのテスト Reduxのテスト reducerのテスト テストコード勉強会 勉強会のコンテンツ：shallow is faster than mount ?? 検証結果 勉強会の成果 テスト導入のメリット 今後の展望 まとめ Jest & Enzyme とは JestとはFacebookが開発しており、細かい設定なしで簡単にフロントエンドのユニットテストを行うこと
The story of a V8 performance cliff in React · V8
Show navigation Previously, we discussed how JavaScript engines optimize object and array access through the use of Shapes and Inline Caches, and we’ve explored how engines speed up prototype property access in particular. This article describes how V8 chooses optimal in-memory representations for various JavaScript values, and how that impacts the shape machinery — all of which helps explain a re
Reactのべからず集 - Qiita
Reactは便利なライブラリですが、ライブラリの想定を外れる使い方をするとうまく動かないとか、進化が続いているのですでに古くなってしまった書き方とかが存在します。 ここでは、そのような、Reactでやるべきでない書き方についてまとめてみました。 ★★★★ この「★★★★」は、「守らないと正常動作しなくなる」レベルのものについて扱います。 JSXを使うファイルでReactを用意し忘れる JSXはReact.createElementに変換されますので、直接アクセスしているように見えなくても、名前空間内にReactが必要です。 eslint react/react-in-jsx-scope コンポーネント内部からpropを書き換える あくまでpropsは親から子へ渡されるものなので、子の側で書き換えることはReactの枠組みの想定外となります。 setState以外の手段でstateを書き換え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Recoil: A New State Management Library Moving Beyond Redux and the Context API
Introducing Recoil: Simplified state management for React - LogRocket Blog
Managing States with Recoil in React Applications
GitHub - alewin/useWorker: ⚛️ useWorker() - A React Hook for Blocking-Free Background Tasks
ReactHooksでvideoを乗りこなす
