React

Miscellaneous

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(1);
  const [rerenderCount, setRerenderCount] = useState(0);

  const factorialOf = value => {
    console.log("factorial called!");
    return value <= 0 ? 1 : value * factorialOf(value - 1);
  };

  const factorial = factorialOf(number);

  const onChange = event => {
    const value = event.target.value;

    // Restrict the user from typing more than two digits
    if (parseInt(value) <= 99 || value === "") {
      setNumber(value);
    }
  };

  return (
    <div>
      Factorial of
      <input type="number" value={number} onChange={onChange} />
      is {factorial}
      <div>
        <button
          onClick={() =>
            setRerenderCount(prevRerenderCount => prevRerenderCount + 1)
          }
        >
          Re-render
        </button>
        count: {rerenderCount}
      </div>
    </div>
  );
};

export default App;

import { useMemo, useState } from "react";

const App = () => {
  const [number, setNumber] = useState(1);
  const [rerenderCount, setRerenderCount] = useState(0);

  const factorialOf = n => {
    console.log("factorial called!");
    return n <= 0 ? 1 : n * factorialOf(n - 1);
  };

  const factorial = useMemo(() => factorialOf(number), [number]);

  const onChange = event => {
    const value = event.target.value;

    // Restrict the user from typing more than two digits
    if (parseInt(value) <= 99 || value === "") {
      setNumber(value);
    }
  };

  return (
    <div>
      Factorial of
      <input type="number" value={number} onChange={onChange} />
      is {factorial}
      <div>
        <button
          onClick={() =>
            setRerenderCount(prevRerenderCount => prevRerenderCount + 1)
          }
        >
          Re-render
        </button>
        count: {rerenderCount}
      </div>
    </div>
  );
};

export default App;