Memoize Expensive Calculations with useMemo

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

// A computationally expensive function
const calculateFactorial = (n) => {
  console.log('Calculating factorial...'); // Simulate expensive calculation
  if (n < 0) return -1;
  if (n === 0) return 1;
  let result = 1;
  for (let i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
};

function FactorialCalculator() {
  const [number, setNumber] = useState(1);
  const [theme, setTheme] = useState('light');

  // useMemo will only re-run calculateFactorial if 'number' changes.
  // If 'theme' changes, factorialValue will use the memoized result.
  const factorialValue = useMemo(() => calculateFactorial(number), [number]);

  const handleNumberChange = (e) => {
    const value = parseInt(e.target.value, 10);
    setNumber(isNaN(value) ? 1 : value);
  };

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const themeStyle = {
    background: theme === 'dark' ? '#333' : '#FFF',
    color: theme === 'dark' ? '#FFF' : '#333',
    padding: '20px',
    minHeight: '100px'
  };

  return (
    <div style={themeStyle}>
      <h2>Factorial Calculator</h2>
      <div>
        <label>Enter a number:</label>
        <input type='number' value={number} onChange={handleNumberChange} min='0' />
      </div>
      <p>Factorial of {number} is: {factorialValue}</p>
      <button onClick={toggleTheme}>Toggle Theme ({theme})</button>
      <p>Note: Check console for 'Calculating factorial...' messages.</p>
    </div>
  );
}

export default FactorialCalculator;