React Interview Questions (Part 7): Context API & Prop Drilling

1. What is the Context API, and how does it help avoid prop drilling?

The Context API is a React feature that allows you to manage global state efficiently without passing props through multiple levels of components (i.e., avoiding prop drilling). By using the Context API, you can wrap components inside a context provider and make the state directly accessible to any component within that provider, regardless of its nesting level.

2. What are the common use cases for the Context API?

• Theme switching (dark/light mode)

• Managing user authentication

• Locale or language switching

• Global application settings or state

3. How do you create and use context in React?

Creating and using context in React involves three steps: creating the context, providing a value, and consuming the context in any component that needs it.

1. Create the context using createContext().

2. Wrap your components inside the context provider and pass the value.

3. Use the context with the useContext() hook in the child components.

Example:

import React, { createContext, useContext } from "react";

// Create the context
const ThemeContext = createContext();

// Use context in a functional component
function App() {
  const theme = "dark";

  return (
    <ThemeContext.Provider value={theme}>
      <CurrentTheme />
    </ThemeContext.Provider>
  );
}

// Consuming the context in a single component
function CurrentTheme() {
  const theme = useContext(ThemeContext);
  return <div>Current Theme: {theme}</div>;
}

export default App;

In this example, the Toolbar component can access the theme value without the need to pass it through the parent components.

4. What are the limitations of the Context API compared to other state management solutions?

While the Context API is great for managing global state, it has a few limitations when compared to libraries like Redux:

• Performance Issues: If your context value changes frequently, it can cause unnecessary re-renders of all components that consume the context, even if only one component needs the update.

• No Built-in Side Effect Handling: Unlike Redux, the Context API doesn’t offer tools like middleware for managing side effects (e.g., async actions).

• Scalability: In large applications, using the Context API for deeply nested and complex state can become challenging and might lead to performance bottlenecks.

For simple state management, the Context API works well. For more complex apps with intricate state logic and side effects, a state management library like Redux might be more suitable.

5. When would you use Context API over Redux?

The Context API is perfect for small to medium-sized applications where the complexity of global state is minimal. You should use Context API over Redux in scenarios where:

• Minimal State Sharing: If you're sharing a small number of values (e.g., theme settings or user authentication status) across different components.

• Simpler Codebase: The Context API requires less setup compared to Redux, making it ideal for simpler applications.

• No Complex Side Effects: If your application doesn’t have complex async actions or middleware requirements, the Context API will serve well.

If your application involves complex state transitions, async operations, or needs to scale, then Redux, with its middleware and debugging capabilities, might be a better choice.