useCallbackはとにかく使え！ 特にカスタムフックでは - uhyo/blog
Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する効果を持ちます。 これらは最適化のためのツールなので、「過度な最適化」を避けるように啓蒙する言説がよく見られます。 すなわち、ちゃんと本当に最適化のために必要なところにだけこれらを使おうということです。 特に、React.memoはpropsが以前と変わっているかどうかを判定するためのオーバーヘッドがあるし、useMemoやuseCallbackもフック呼び出しのオーバーヘッドがあります。 意味がないところでReact.memo
React Hook Formのアップデート内容 - Version 7 - Qiita
(❤️ ブログ記事を翻訳してくれた日本のチーム、Kotaro、Keiya、Marinaに感謝します。) React Hook Formもそろそろ2年目を迎えようとしています。プロジェクト自体は、初日と同じように今でも活発に活動しています。この数年の間に、バージョン7の作成やデザインに繋がる多くの学びや経験がありました。私はここで、次のメジャーバージョンでの改善点とその理由をいくつか紹介します。フォームを構築するという点で、React開発者がより楽に開発できるようにする私たちの使命に変わりはありません。 V7 visions:  📖 (DX)厳密に型付けされたフォーム 🏋🏻♀️ シンプルさと一貫性 🏎 パフォーマンス 💁♂️ パッケージサイズの削減 このビジョンを説明するために、APIの変更点を見ていきましょう。 </> register 主な変更点の一つは register
Visual Regression Testing はじめました - 具体的な運用 Tips | Recruit Tech Blog
こんにちは。スタディサプリ ENGLISH Web フロントチームの kazuma1989 です。 先日、私たちのチームは開発フローに Visual Regression Testing を導入しました。Visual Regression Testing は、フレームワークを紹介する記事は見つかるものの、具体的な知見があまり広まっていない印象なので、具体的な設定値や選定理由も含め紹介してみます。 React による Web フロント開発を前提にしていますが、Visual Regression Testing のコア部分は「画像の比較」であるため、他のプラットフォーム開発でも参考になればと思います。 Visual Regression Testing (VRT) とは Visual Regression Testing （日本語で 画像回帰テスト、以下 VRT）は、画像の差分を検出する、スナ
転職の意思決定（クックパッド → Ubie） - maru source
こんにちは丸山@h13i32maruです。タイトルの通り、2020年末に転職の意思決定をしました。現職のクックパッドには大変お世話になりました。次はUbie（ユビー）という医療系ベンチャーに行きます。今は有給消化中で入社は3月1日からです。 この転職の意思決定をするにあたり「事業ドメイン」「組織」「自分の成長」「報酬」の視点で色々と検討しました。そこで未来の自分に検討したことを残しておこうと思います。今の正直な気持ちを書いているので、Ubieに限らず転職しようか迷ってる人にとって何か参考になれば幸いです。 ちなみに今回の転職は以下のような経緯によるものです。 転職活動をしていたわけではなく、中の人からお誘いいただき入社に至ったため、他に検討していた会社はありません 転職するかどうかは最後の最後まで迷っており、オファー後に色々考えて転職するかどうかの意思決定をしました 目次 感情に流されない
ブログの OGP 画像にエントリのスクリーンショットを使うようにした
ブログエントリの OGP 画像は、これまでエントリ中に画像を使っていればそれを指定して、特に指定できる画像がなければアバタの画像を出すようにしていたのだけど、アバダは何も表せてないので何かいいものはないかなあと思っていた。 第一候補は @ladicle の tcardgen でこのツールを使うと次の感じでエントリのタイトルやタグを入れて OGP 画像を生成できる。 これもすっごいよいのだけど、なんか他にないかなあと思っていたところ、エントリのスクリーンショットがそのまま出ていればどんなページなのか分かってよい感じなのでは？と思い、やってみた。結果としては次のような感じで個人的には気に入っている。 ブログエントリの ogp イメージにスクショを設定するようにしてみた。スクショは pageres-cli で生成してる。どうだろうか。 https://t.co/rOe8awTNow — すぱぶら
Web VitalsとJavaScript Errorの可視化
こんにちは、@watilde です。Amplifyの開発者体験体験の向上をすべく、ツイートのウォッチやGitHubでの反応などしています。もう去年のことですが、最近はcliの改善としてcreate-react-appのようにinitの実行時にREADMEの生成を行うPRなど作ったりしてます。参考: aws-amplify/amplify-cli#5808 この記事は英語で書いた Improve UX by observability in front-end with Amplify and QuickSight を自分で日本語に意訳してみたものです。Node学園 35時限目 オンライントライアル でも同様の内容を発表予定です。 JavaScriptのエラー例 JavaScriptは100%動いているのか 私達の作るWebアプリ・Webサイトが様々なデバイスで100％動作しているかは、実態
Understanding Z-Index in CSS
@shadeed9 Understanding Z-Index in CSS A visual guide on how z-index and stacking contexts work in CSS. What is Z-Index?The z-index property defines the order of the elements on the z-axis. Basically, it works on elements with a position value other than static. The duck and the ring are within the same parent (the water). Can you guess which will come in front of the other? <div class="water"> <d
フロントエンドのテストはユースケースに注目して書こう - Adwaysエンジニアブログ
こんにちは、梅津です。 Kent C. Doddsのブログを見ていたら面白い記事を見つけました。 テストの書き方や考え方の参考になりそうだったので、内容をかいつまんで紹介します。 よくあるテストの書き方 こういう書き方はどうですか おわりに 参考リンク よくあるテストの書き方 テストを書くとき、次のような書き方をすることがあると思います。 describe('成功時', () => { ... // title, subtitleなどの定数を定義 let utils beforeAll(() => { getCourseInfo.mockResolvedValueOnce(buildCourse({title, subtitle, topics})) }) afterAll(() => { cleanup() jest.resetAllMocks() }) it('ローディングスピナーが表
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp
Maximally optimizing image loading for the web
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
Before You memo() — overreacted
There are many articles written about React performance optimizations. In general, if some state update is slow, you need to: Verify you’re running a production build. (Development builds are intentionally slower, in extreme cases even by an order of magnitude.) Verify that you didn’t put the state higher in the tree than necessary. (For example, putting input state in a centralized store might no
早くチームにマッチするために気をつけてる事 - そーだいなるらくがき帳
新入社員として1週間が過ぎた。 ブルックスの法則的に考えても私はまだチームにとって生産性をマイナスさせる存在でしかない。 ブルックスの法則 - Wikipedia だからいち早くチームにとって必要な存在になる必要があるし、そのために気をつけてる事をメモする。 これを見て「もっとコレした方がいいよ」ってアドバイス、逆に「それは不要だよ」ってアドバイスを期待してる。 チームやプロダクトを好きになる これはとても大切なことだ。 嫌いな人とは仲良くできないし、嫌いなプロダクトは育てれない。 もし、コレを読んでる人が職場のチームもプロダクトも嫌いなら転職した方がいい。 ただ好きの反対は無関心なので無関心の場合は条件付きでやっていけると思う。 この辺の話は主旨が変わるのでまた別の機会があれば話したい。 コミュニケーションについて 新しいチームに合流してまず一番大事なのはコミュニケーションコスト。 自分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Effective Remote Working