memoizedrender.js

import React from 'react';
import { render } from 'react-dom';
import memoize from "lodash.memoize";

const somethingExpensive = iters => {
  const arr = [];
  for (let i = 0; i < iters; i += 1) {
    arr.push(Math.random());
    arr.sort(); // ¯\_(ツ)_/¯
  }
  return arr[Math.floor(iters / 2)];
};

const memoizedSomethingExpensive = memoize(somethingExpensive);

class Inner extends React.Component {
  render() {
    const then = performance.now();
    const val = memoizedSomethingExpensive(this.props.iters);
    const duration = (performance.now() - then) / 1000;
    return (
      <div>
        Value {val.toFixed(3)} was calculated as the median random number in {duration.toFixed(3)} seconds for {this.props.iters} random number
      </div>
    );
  }
}

class Outer extends React.Component {

  state = {
    iterIndex: 0,
  }

  handleClick = () => this.setState({
    iterIndex: (this.state.iterIndex + 1) % this.props.iterToggles.length
  });

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Toggle iters</button>
        <Inner iters={this.props.iterToggles[this.state.iterIndex]} />
      </div>
    );
  }
}

render(<Outer iterToggles={[1, 2000, 3000]} />, document.getElementById('root'));