React example: calculate square of a number with useMemo

React example: calculate square of a number with useMemo.md

import React, { useState, useMemo } from "react";

const calculateSquare = (number) => {
  console.log("calculateSquare function called!");
  if (number === 0) return 0;
  return number * number;
};

const App = () => {
  const [number, setNumber] = useState(1);
  const [counter, setCounter] = useState(0);
  const squareResult = useMemo(() => calculateSquare(number), [number]);
  console.log("Rendering app");

  return (
    <>
      <div>Square of the following number: </div>
      <div style={{ marginTop: "0.5rem" }}>
        <input
          type="number"
          value={number}
          onChange={(event) => {
            setNumber(Number(event.target.value));
          }}
        />
      </div>
      <div style={{ marginTop: "0.5rem" }}>
        {" is "}
        {squareResult}
      </div>
      <div style={{ marginTop: "1rem" }}>{` Counter is: ${counter}`}</div>
      <div style={{ marginTop: "0.5rem" }}>
        <button onClick={() => setCounter(counter + 1)}>
          Increment counter
        </button>
      </div>
    </>
  );
};

export default App;

Code on codesandbox