Create a Counter Component: Implement a Counter component that accepts a count prop and displays the current count.

Simulate Expensive Rendering: Inside the Counter component, add an expensive function that slows down rendering (e.g., a loop or a console log).

Create a Button Component: Implement a separate Button component that increments the count when clicked.

Use React.memo to Optimize Rendering: Wrap the Counter component with React.memo to prevent unnecessary re-renders.

Test Optimization: Click the button multiple times and observe that only the button re-renders while the counter remains efficient.

Create an Expensive Computation Function: Implement a function that calculates the factorial of a number and call it inside a FactorialCalculator component.

Track User Input: Add an input field where users can enter a number.

Use useMemo for Optimization: Wrap the factorial function inside useMemo so it only recalculates when the input value changes.

Add an Unrelated Button: Add a separate button that updates some other state (e.g., a theme toggle) and ensure it does not trigger a recalculation of the factorial.

Test Optimization: Change the input value and see the factorial update efficiently. Click the unrelated button and confirm the factorial computation does not run again unnecessarily.

Create a ThemeContext: Set up a ThemeContext to manage dark/light mode.

Implement a ThemeProvider: Create a ThemeProvider component that stores and updates the theme state (light or dark).

Use useMemo to Optimize Context Value: Wrap the context value inside useMemo so it only updates when the theme state changes.

Create a Theme Toggle Button: Implement a button that toggles the theme when clicked.

Test Optimization: Add console logs inside the provider to check that the theme context value is only recalculated when needed and not on every re-render.