Top React Interview Questions for Developers

Question: What is the Context API in React?

Answer:

The Context API in React is a feature that allows you to share state or other values across your application without having to pass props down manually at every level of the component tree. It provides a way to manage global state and avoid “prop drilling,” which occurs when you pass data through many layers of components just to reach a deeply nested component.

The Context API is particularly useful when you need to share state that is accessible by many components at different nesting levels, such as user authentication, themes, or language settings.

Key Concepts of the Context API:

1. Provider: The Provider component is used to provide the context value to the components that need it. It is typically placed at a higher level in the component tree, and it allows any nested components to access the context value.

2. Consumer: The Consumer component is used to access the context value in class components or functional components before hooks were introduced. However, with the introduction of useContext in React hooks, using Consumer has become less common in functional components.

3. useContext: The useContext hook (introduced in React 16.8) is the preferred way to consume context in functional components. It allows you to read the context value directly without using Consumer.

Basic Usage of the Context API:

Step 1: Create a Context

You first create a context object using React.createContext(). This object will hold the default value and provide methods for creating and consuming the context.

import React from 'react';

// Create a context with a default value
const MyContext = React.createContext('default value');

Step 2: Wrap Your Components with a Provider

The Provider component is used to make the context value available to all components in the tree below it. It takes a value prop that defines the value to be shared.

import React from 'react';

// A component that provides the context value
const MyProvider = ({ children }) => {
  const value = "Hello from Context API!";
  
  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
};

Step 3: Consume the Context with useContext (Functional Component)

You can use the useContext hook to access the context value in any nested functional component.

import React, { useContext } from 'react';

// A component that consumes the context value
const MyComponent = () => {
  const contextValue = useContext(MyContext); // Access the value of the context

  return <div>{contextValue}</div>;
};

Step 4: Putting it All Together

You can now wrap your components with the MyProvider so that they can access the context value.

const App = () => {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
};

export default App;

Alternative: Using Context with Class Components (Consumer)

In class components, the Consumer component is used to access the context value.

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {value => <div>{value}</div>}
      </MyContext.Consumer>
    );
  }
}

Benefits of the Context API:

1. Avoid Prop Drilling: You don’t need to pass data through every intermediate component. Instead, you can provide context at a higher level in the component tree and consume it in any child component.
2. Global State Management: It’s ideal for scenarios where you need to share data like user authentication status, themes, and language settings across different parts of the app.
3. Simplicity: The Context API provides a simple, native solution for managing global state, without needing external libraries like Redux (although Redux may be more appropriate for large applications with more complex state management needs).
4. Component Decoupling: Components that consume the context don’t need to depend on parent components passing down props, making the components more reusable and easier to maintain.

Drawbacks of the Context API:

1. Performance Concerns: If context values change frequently, re-rendering every component that consumes the context can cause performance issues. You should be careful about updating context too frequently.

2. Not a Replacement for Complex State Management: While the Context API is great for simple global state management, it is not meant to replace more advanced state management solutions like Redux, especially when your state logic becomes complex and involves actions and reducers.

3. Component Overhead: If you use context excessively in a large application, it can make your component tree harder to manage and debug. Sometimes it’s better to use context sparingly, for specific use cases, rather than as a universal state management solution.

Example: Using Context for Theme Switching

Here’s an example of using the Context API to manage a global theme (light/dark mode) across an app:

import React, { useState, useContext } from 'react';

// Create a context with a default value
const ThemeContext = React.createContext('light');

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const ThemedComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
};

export default App;

Conclusion:

The Context API in React is a powerful tool for sharing state across an application without the need to pass props down multiple levels. It is a great solution for simpler global state management scenarios but should be used carefully in more complex cases to avoid performance issues and unnecessary complexity. With the addition of useContext and the simplicity it provides, the Context API has become an essential feature for React developers.

Question: What are Pure Components in React?

Answer:

A Pure Component in React is a component that only re-renders when its props or state change. In other words, a pure component implements a shallow comparison between previous and next props and state, and it will only trigger a re-render if something has changed. This helps optimize performance by avoiding unnecessary re-renders of components when their inputs haven’t changed.

React provides the PureComponent class as an alternative to Component. If you extend React.PureComponent instead of React.Component, React automatically handles the comparison of props and state for you.

Key Concepts:

• Shallow Comparison: Pure components perform a shallow comparison of the props and state. For objects and arrays, it checks whether the reference to the object or array has changed, not if the contents of the object/array have changed.
• Optimization: Pure components help optimize performance by preventing unnecessary renders. If props and state are the same (based on a shallow comparison), the component will not re-render.
• Functional Components: While PureComponent is a class-based feature, a similar concept for functional components is provided via React.memo().

Example of a PureComponent:

Here is a simple example of how PureComponent works:

import React, { PureComponent } from 'react';

class Counter extends PureComponent {
  render() {
    console.log('Rendering Counter');
    return <div>Count: {this.props.count}</div>;
  }
}

export default Counter;

In this example:

• The Counter component extends PureComponent.
• React will only re-render this component if the count prop changes. If the same count value is passed down multiple times, React will skip the render.

Shallow Comparison Behavior:

The shallow comparison checks if:

1. Primitive values (e.g., numbers, strings, booleans) have changed.
2. Object references have changed, not the deep equality of objects.

For example:

import React, { PureComponent } from 'react';

class DemoComponent extends PureComponent {
  render() {
    console.log('Rendering DemoComponent');
    return <div>{this.props.user.name}</div>;
  }
}

export default DemoComponent;

• If this.props.user is an object and the reference to it changes, even if the content of user is the same, the component will re-render.
• However, if the object reference remains the same (even if some fields change), the component will not re-render.

Example with State:

Pure components can also manage their own state and will avoid re-renders if the state doesn’t change.

import React, { PureComponent } from 'react';

class Timer extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { time: 0 };
  }

  incrementTime = () => {
    this.setState((prevState) => ({ time: prevState.time + 1 }));
  };

  render() {
    console.log('Rendering Timer');
    return (
      <div>
        <p>Time: {this.state.time}</p>
        <button onClick={this.incrementTime}>Increment Time</button>
      </div>
    );
  }
}

export default Timer;

• If the state time changes, the component will re-render.
• If the state doesn’t change (e.g., no state change happens on the button click), React will skip the render.

PureComponent vs Regular Component:

• PureComponent: Implements a shallow comparison of props and state automatically. It will only re-render if there is a difference in props or state based on a shallow comparison.
• Component: By default, it re-renders whenever setState() is called, regardless of whether the state or props have actually changed. If you need to optimize performance, you have to manually implement shouldComponentUpdate() to achieve a similar behavior to PureComponent.

Performance Optimization with PureComponent:

When used correctly, PureComponent can significantly enhance performance in React applications, especially in components that receive the same props or state over multiple renders (e.g., presentational components).

However, if your props or state contain objects or arrays that are frequently recreated, the shallow comparison will not be effective (since the reference changes every time). In such cases, you may still experience unnecessary re-renders, and optimizations like React.memo for functional components or manually implementing shouldComponentUpdate() might be more appropriate.

React.memo for Functional Components:

In functional components, React.memo() provides a similar optimization as PureComponent by memoizing the rendered output.

import React, { memo } from 'react';

const Counter = ({ count }) => {
  console.log('Rendering Counter');
  return <div>Count: {count}</div>;
};

export default memo(Counter);

In this example:

• React.memo(Counter) prevents re-rendering of the Counter component unless count changes, just like PureComponent does for class components.

Conclusion:

Pure Components are a React optimization technique that can help prevent unnecessary re-renders by performing a shallow comparison of props and state. Using PureComponent (for class components) or React.memo() (for functional components) can improve the performance of your React application by reducing redundant renders. However, you should be mindful of how references to objects and arrays are handled to ensure that the performance benefits are fully realized.

Read More

If you can’t get enough from this article, Aihirely has plenty more related information, such as ReactJS interview questions, ReactJS interview experiences, and details about various ReactJS job positions. Click here to check it out.