Reactで再レンダリングを抑えるシンプルな方法

はじめに 「React で再レンダリングを抑えたい...」となった場合、多くの人が React.memo や useMemo、useCallback などのいわゆる 「メモ化」 を思い浮かべることでしょう。 しかし、そういった「メモ化」を用いなくても再レンダリングを抑える方法が実は存在しています。 今回はその代表的な例を２つ紹介していきたいと思います。 よくある例 まず例として、以下のような 「パフォーマンスに問題を抱えたコンポーネント」 を考えてみましょう。 import { useState } from "react"; export default function App() { let [color, setColor] = useState("red"); return ( <div> <input value={color} onChange={(e) => setColo

[tokuniimihanai]

何で人間がこんなこと考慮しないといけないの。普通に更新された部分だけ再描画するフレームワークを使いたい。

[ichi404]

設計の問題だから自動でどうにかなるものではないんじゃ？自分はContextも使う

[boxshiitake]

Reactこれが面倒だよね。svelteとかは自動でやってくれるのに

[coolworld]

正直めんどくさい！フレームワーク側で何とかして欲しい

[mayumayu_nimolove]

コアな部分で何とかしてほしい

[shingo-sasaki-0529]

フレームワーク側が最小限の再レンダリングを勝手にやってくれってのは最もで、Vue や Svelte がそれなんだけど、それこそ Easy より Simple なほうが良いって理由でみんなが React を選んできた結果じゃないか。

[J138]

わ

[sa-yama321]

Reactはコレが面倒なんだけど、実際には全部無視しても動くから、無視していい。差分検出して再描画させないというより、差分検出などせずに再描画させた方がはやい、わけはないが、気にしないのが精神的にいいよ。

[nemoba]

コンポジションによる参照同一性は修正ですぐ間違って壊すので本当に必要な時だけ。それ以外は、Stateを広域に使うのやめようって規約で十分よ。まあ、それさえ無くてもだいたいは大丈夫ｗ

[Nobkz]

どうでもいいけど、DOM(または仮想DOM)の更新を「レンダリング」とか言うのやめないか？

[fantatchi]

結果的にコンポーネントの肥大化が防げそう

[masa8aurum]

Reactは、これを意識しないといけないのは若干面倒。この前のVueの話につながる

[onesplat]

フレームワークが自動でやれや