React useMemo and useCallback Hooks - Practical Examples

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

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

function FactorialComponent() {
  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 FactorialComponent;

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

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

function CallbackComponent() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);

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

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={increment}>Increment</Button>
      <button onClick={() => setOtherState(s => !s)}>Toggle Other State</button>
    </div>
  );
}

export default CallbackComponent;