Usecallback Development Tutorials, Guides & Insights

This approach ensures that the expensive computation runs only when data changes, improving performance.

The Context API allows for sharing state across components without prop drilling. However, improper use can lead to performance issues, as any change in context value triggers re-renders in all consuming components.([Medium][6], [GeeksforGeeks][2])

As mentioned earlier, useMemo can be used to memoize the result of expensive function calls.

import React, { useMemo } from 'react';

function Fibonacci({ num }) {
  const fib = useMemo(() => {
    const calculateFibonacci = (n) => {
      if (n <= 1) return 1;
      return calculateFibonacci(n - 1) + calculateFibonacci(n - 2);
    };
    return calculateFibonacci(num);
  }, [num]);

  return <div>Fibonacci of {num} is {fib}</div>;
}