optimizing_rendering.jsx

// Taken from here: https://www.reddit.com/r/reactjs/comments/f37x69/what_are_not_popular_but_great_react_tricks
// If you want to optimize some of your subrender methods, you can do the trick:
import React from 'react';
class Parent extends React.PureComponent {
    render () {
        const Table = this.renderTable;
        return (
            <div style={{color: this.props.color}}>
                Multiplication table:
                <Table maxX={1000} maxY={1000} />
            </div>
        );
    }

    renderTable = React.memo(({maxX, maxY}) => {
        const rows = [];
        for (let y = 1; y <= maxY; y++) {
            const columns = [];
            for (let x = 1; x <= maxX; x++) {
                column.push((
                    <td>{x * y}</td>
                ));
            }
            rows.push((
                <tr>{columns}</tr>
            ));
        }
        return (
            <table>{rows}</table>
        );
    })
}