React performance

bad.js

import React from "react";
import ReactDOM from "react-dom";

function Spinner({ label }) {
  console.log(`[${label}] I started spinning`);
  setTimeout(() => {
    console.log(`[${label}]  I stopped spinning!`);
  }, 1000 + Math.random() * 1000);
  return null;
}

function Bad() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(c => c + 1);
  return (
    <div>
      <button onClick={increment}>[Bad] The count is {count}</button>
      <Spinner label="bad" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Bad />
  </React.StrictMode>,
  rootElement
);

fast.js

import React from "react";
import ReactDOM from "react-dom";

function calculateSum(x, y) {
  let i = 0;
  let wait = Math.random() * 1000000000 + 1000000000;
  while (i < wait) {
    i++;
  }
  return x + y;
}

function Sum({ x, y }) {
  const sum = React.useMemo(() => calculateSum(x, y), [x, y]);
  return (
    <div>
      The sum of {x} and {y} is {sum}.
    </div>
  );
}

function Counter() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(c => c + 1);
  return (
    <div>
      <button onClick={increment}>The count is {count}</button>
      <Sum x={2} y={3} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Counter />
  </React.StrictMode>,
  rootElement
);

good.js

import React from "react";
import ReactDOM from "react-dom";

function Spinner({ label }) {
  console.log(`[${label}] I started spinning`);
  setTimeout(() => {
    console.log(`[${label}]  I stopped spinning!`);
  }, 1000 + Math.random() * 1000);
  return null;
}

function Good(props) {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(c => c + 1);
  return (
    <div>
      <button onClick={increment}>[Good] The count is {count}</button>
      {props.spinner}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Good spinner={<Spinner label="good" />} />
  </React.StrictMode>,
  rootElement
);

slow.js

import React from "react";
import ReactDOM from "react-dom";

function calculateSum(x, y) {
  let i = 0;
  let wait = Math.random() * 1000000000 + 1000000000;
  while (i < wait) {
    i++;
  }
  return x + y;
}

function Sum({ x, y }) {
  const sum = calculateSum(x, y);
  return (
    <div>
      The sum of {x} and {y} is {sum}.
    </div>
  );
}

function Counter() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(c => c + 1);
  return (
    <div>
      <button onClick={increment}>The count is {count}</button>
      <Sum x={2} y={3} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Counter />
  </React.StrictMode>,
  rootElement
);

suspense-usage.js

import * as React from "react";

const Text = React.lazy(() => import("./text"));

export default function App() {
  return (
    <div className="App">
      <React.Suspense fallback={<p>Loading...</p>}>
        <Text />
      </React.Suspense>
    </div>
  );
}

text.js

import * as React from "react";

export default function Text() {
  return <p>This is Text component</p>;
}