タグ

ブックマーク / zenn.dev/uhyo (5)

  • React 19の新機能まるわかり

    2024年4月にリリースされたReact 19 Betaの新機能について、細かい点やポイントを解説します。

    React 19の新機能まるわかり
    Pasta-K
    Pasta-K 2024/05/29
  • 過激派が教える! useEffectの正しい使い方

    ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基原則を紹介します。 筆者がもっとも重要視する原則は、ReactUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理

    過激派が教える! useEffectの正しい使い方
    Pasta-K
    Pasta-K 2023/05/03
  • React 18 alpha版発表まとめ

    先日、The Plan for React 18という記事が React チームから発表されました。これは React の次期メジャーバージョンである React 18 で予定されている変更や新機能を紹介するとともに、React 18 の alpha 版の公開を知らせるものです。この記事自体に技術的なトピックは載っておらず、それらはReact 18 Working Groupという新設されたリポジトリに Discussion としてまとめられています。 記事では、今回あった発表のポイントを厳選してお伝えします。ポイントを絞ってお伝えするため載せる情報は取捨選択しています。隅々まで理解したいという方は原文か他の記事を参照しましょう。 アップグレードの簡単さ React 17 の際もそうでしたが、最近の React は「簡単にアップデートできる」ことをたいへん重要視しており、React 18

    React 18 alpha版発表まとめ
    Pasta-K
    Pasta-K 2021/06/15
  • useMemoのコストを心配する前に余計なdivを減らせ!

    React では、useMemoやReact.memoなどが最適化の手段として知られています。 これらは最適化であるため、必要が無いのにuseMemoを使うことは無駄な最適化であるとして避けられる傾向にあります。 筆者が簡単なベンチマークを取ってみたところ、あるコンポーネントが一つ余計なuseMemoを持っているよりも、一つ余計な<div>をレンダリングする方が、パフォーマンス(レンダリングにかかる時間)をより悪化させることが分かりました。 したがって、useMemoなどを減らすことに執心する場合は、それと同等以上の熱量で余計な要素を減らすことに執心する必要があります。 ベンチマークはこちらです。 結果には当然ばらつきがありますが、筆者の環境では次のような結果が典型的なものとして現れました(Mac 上の Google Chrome・Firefox・Safari で同じような傾向)。 bas

    useMemoのコストを心配する前に余計なdivを減らせ!
    Pasta-K
    Pasta-K 2021/05/29
    そこが差になるの面白いというか、実際に気にすることはそんなにないだろうけど、早すぎる最適化とかuseMemoのコストガーという感じで視野が狭くなることに気をつけようという話だと理解した
  • React17におけるuseEffectの破壊的変更を理解する

    しばらく前、React 17 RCが発表されました。現行のReact 16に比べて、いくつかの破壊的変更がある一方、新機能が何もないというのが特徴です。Reactチームとしては、新機能が無いとはいえ、破壊的変更も少なくなっておりなるべく16から17へのアップデートを行なってほしいという考えのようです。 この記事では、React 17における破壊的変更のうち、useEffectのクリーンアップのタイミングに関する変更を取り上げます(以下は公式サイトから引用)。 In React 17, the effect cleanup function also runs asynchronously — for example, if the component is unmounting, the cleanup will run after the screen has been updated.

    React17におけるuseEffectの破壊的変更を理解する
    Pasta-K
    Pasta-K 2020/09/23
  • 1