React useMemo and useCallback for Performance Optimization

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

function factorial(n) {
  console.log('Calculating factorial');
  return n <= 1 ? 1 : n * factorial(n - 1);
}

function FactorialCalculator() {
  const [number, setNumber] = useState(1);
  const [inc, setInc] = useState(0);

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

  return (
    <div>
      <h2>Factorial of {number} is {fact}</h2>
      <button onClick={() => setNumber(number + 1)}>Increment Number</button>
      <button onClick={() => setInc(inc + 1)}>Re-render</button>
    </div>
  );
}

export default FactorialCalculator;

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

const Button = React.memo(({ onClick, children }) => {
  console.log('Button rendered:', children);
  return <button onClick={onClick}>{children}</button>;
});

function Counter() {
  const [count, setCount] = useState(0);
  const [otherCount, setOtherCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={increment}>Increment Count</Button>
      <p>Other Count: {otherCount}</p>
      <button onClick={() => setOtherCount(otherCount + 1)}>Increment Other Count</button>
    </div>
  );
}

export default Counter;