親コンポーネントが更新されると、子コンポーネントは必ずre-renderされる
from 配列の一部だけを更新してre-renderを抑制する
親コンポーネントが更新されると、子コンポーネントは必ずre-renderされる
対策
React.memo()を使う
Preactにはないぞ。どうすりゃええねんtakker.icon
preact/compatを入れたら使えるが、そうするとファイルサイズが大きくなってしまい、Preactを使っている意味がなくなる
2024-07-10全部入れても2kBしか増えないから、いれてもよさそう
ただ、eventの挙動がReact準拠になってしまう
Render Hooks
react hooksでJSXを返す
ありなんかいそれtakker.icon
でも、これならReact.memo()と同じことができそうだ
配列の一部だけを更新してre-renderを抑制するのapp.jsxの場合は、こうする
code:jsx
const Dial = ({ onClick, children }) => useMemo(() => {
console.log("rendered!");
return (
<div style="user-select: none;" onClick={onClick}>
{children}
</div>
);
}, onClick, children);
ComponentChildrenを受け取って描画するだけのwrapper componentを作る
references
React の再レンダリングについてのメモ - かもメモ
コンポジション(props.children)を利用する | Reactコンポーネントの再レンダリング発生条件と防止方法 | Enjoy IT Life
公式の解説
state の保持とリセット – React
#2024-07-10 11:52:35
#2024-06-30 18:50:47
#2022-10-09 10:03:06
#2022-08-01 09:35:39