Advanced React: Context, Custom Hooks & Optimization

 As you move beyond the basics of React—JSX, props, components, hooks, and routing—you're ready to dive into more advanced topics that truly empower you to build scalable and maintainable frontend applications.

In this blog, we’ll explore three crucial intermediate-to-advanced concepts in React:

Context API (for global state management)

Custom Hooks (for reusable logic)

Performance Optimization (for faster rendering and smoother UX)

Let’s begin.

1. Context API – Say Goodbye to Prop Drilling

What is Prop Drilling?

Imagine you need to pass a user's login status from a parent component all the way down to a deeply nested child component. You end up passing it through multiple intermediate components that don’t even need it. This is prop drilling—and it's messy.

Enter Context API

The Context API provides a way to share values like theme, authentication, or user data between components without passing props manually at every level.

✅ How to Use Context API

Step 1: Create Context

import React, { createContext } from 'react';

export const UserContext = createContext();

Step 2: Provide Context

<UserContext.Provider value={{ username: "NareshIT" }}>

  <YourApp />

</UserContext.Provider>

Consume Context

import { useContext } from 'react';

import { UserContext } from './UserContext';

const Profile = () => {

  const { username } = useContext(UserContext);

  return <p>Hello, {username}</p>;

};

Use Case Examples:

• Dark/Light Mode toggle
• Language and localization
• Global authentication status

2. Custom Hooks – Reuse Code Like a Pro

Why Custom Hooks?

React’s built-in hooks like useState and useEffect are great, but sometimes you find yourself repeating the same logic across components. That’s when Custom Hooks shine—they let you extract and reuse stateful logic.

Example: Custom Hook for Window Width

import { useState, useEffect } from 'react';

const useWindowWidth = () => {

  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {

    const handleResize = () => setWidth(window.innerWidth);

    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize);

  }, []);

  return width;

};

export default useWindowWidth;

Usage:

const MyComponent = () => {

  const width = useWindowWidth();

  return <p>Window width: {width}</p>;

};

Benefits:

• Cleaner component code
• Separation of concerns
• Easier to test and debug

3. ⚡ Performance Optimization – Make React Faster

Common Performance Bottlenecks in React

• Unnecessary re-renders
• Large component trees
• Frequent state updates
• Tools and Techniques

✅ React.memo()

Use this to memoize functional components and avoid re-rendering unless props change

const MyComponent = React.memo((props) => {

  return <div>{props.name}</div>;

});

Memoize expensive calculations.

const result = useMemo(() => computeHeavyTask(data), [data]);

✅ useCallback()

Memoize functions, especially when passing them to child components.

const handleClick = useCallback(() => {

  console.log("Clicked!");

}, []);

✅ Lazy Loading with React.lazy() and Suspense

Split your code into chunks and load them on demand.

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

<Suspense fallback={<div>Loading...</div>}>

  <LazyComponent />

</Suspense>

Final Thoughts

Mastering advanced React topics like Context API, Custom Hooks, and Optimization will elevate your frontend development skills. These techniques make your apps more maintainable, scalable, and performant.

Whether you're building dashboards, eCommerce platforms, or enterprise apps, these tools are essential for professional-grade development.