再描画による「遅い」Reactコンポーネントを速くするための方法を検討しました。追体験しながらどうぞ。 処理結果が変わるようなデータを内部に保持していないステートレスなコンポーネントを解説します。つまりthis.state ={...} を含まないコーポネントです。与えられたプロパティと、下位のコンポーネントを持ちます。 まずは超基本 import React, { Component } from 'react' class User extends Component { render() { const { name, highlighted, userSelected } = this.props console.log('Hey User is being rendered for', [name, highlighted]) return <div> <h3 style={{f
![ステートレスなコンポーネントによるReactのパフォーマンス最適化](https://cdn-ak-scissors.b.st-hatena.com/image/square/030a0fc456b4ac825d4cca7adc7c536dc00ddf50/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2022%2F07%2F27%2F2444408%2Fl%2Fbf8db2e76cfdf999.jpg)