ReactJs — useMemo and useCallback

React provides useMemo and useCallback hooks to optimize performance by memoizing values and functions. This prevents unnecessary recalculations and re-renders.

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

function ExpensiveCalculation({ count }) {
  const calculate = (num) => {
    console.log('Calculating...');
    return num * 2;
  };

  const result = useMemo(() => calculate(count), [count]);
  return <p>Result: {result}</p>;
}

function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(c => c + 1), []);

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <ExpensiveCalculation count={count} />
    </div>
  );
}

export default App;