Common React Interview Questions

React is one of the most popular JavaScript libraries for building user interfaces, and proficiency with it is highly valued by many companies. This tutorial will cover some common interview questions you might encounter during a React.js job interview. We'll provide detailed explanations, code examples, and best practices to help you prepare effectively.

1. What is React?

Answer: React is an open-source JavaScript library developed by Facebook for building user interfaces, particularly single-page applications where data changes over time. It allows developers to create large web applications that can update and render efficiently in response to data changes.

Best Practices:

• Use functional components with hooks for managing state.
• Leverage React's component-based architecture to build reusable UI components.
• Optimize performance using techniques like memoization and lazy loading.

2. What are the key features of React?

Answer: Key features of React include:

• Component-Based Architecture: React promotes building applications as a collection of independent, reusable components.
• Virtual DOM: React uses a virtual DOM to optimize rendering by comparing it with the real DOM and updating only what has changed.
• JSX: JSX allows you to write HTML-like syntax in JavaScript, making your code more readable and maintainable.
• One-Way Data Binding: React follows a unidirectional data flow, which makes state management easier to predict and debug.

Code Example:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Greeting;

3. Explain the difference between props and state in React.

Answer:

• Props (Properties): Props are read-only data passed to components from their parent component. They are used to pass data down the component tree.
• State: State is mutable data managed within a component. It holds information specific to that component and can be updated using useState.

Best Practices:

• Use props for passing data and state for managing internal component data.
• Avoid modifying props directly inside child components.

Code Example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

4. What is the lifecycle of a React component?

Answer: The lifecycle of a React component can be divided into three phases:

• Mounting: When an instance of a component is being created and inserted into the DOM.
• Updating: When a component is being re-rendered as a result of changes to either its props or state.
• Unmounting: When a component is being removed from the DOM.

Key Lifecycle Methods:

• componentDidMount(): Called after the component has been rendered for the first time.
• shouldComponentUpdate(nextProps, nextState): Determines if the component should re-render based on changes to props or state.
• componentDidUpdate(prevProps, prevState): Called immediately after updating occurs.
• componentWillUnmount(): Called right before a component is removed from the DOM.

Best Practices:

• Use lifecycle methods for side effects like data fetching and subscriptions.
• Avoid unnecessary re-renders by implementing shouldComponentUpdate.

5. What are Higher-Order Components (HOCs) in React?

Answer: A Higher-Order Component (HOC) is a function that takes a component and returns a new component with additional functionality. HOCs are used for code reuse and logic abstraction.

Best Practices:

• Use HOCs to share common functionality between components.
• Avoid overusing HOCs as they can lead to deeply nested components, making the code harder to understand.

Code Example:

import React from 'react';

function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log('Component rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

const MyComponent = (props) => <div>Hello, {props.name}</div>;

export default withLogger(MyComponent);

6. What is Context API in React?

Answer: The Context API provides a way to pass data through the component tree without having to pass props down manually at every level. It's useful for themes, user authentication, and other global data.

Best Practices:

• Use Context API sparingly as it can make your components less predictable.
• Prefer using Redux or Zustand for more complex state management needs.

Code Example:

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

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>
    Click me
  </button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

export default App;

7. What is the difference between controlled and uncontrolled components in React?

Answer:

• Controlled Components: Form elements whose values are controlled by React state. The input's value is set by a state variable, and changes to the input update the state.
• Uncontrolled Components: Form elements that maintain their own internal state. You can access their values using refs.

Best Practices:

• Use controlled components for better predictability and easier form validation.
• Use uncontrolled components when you need simple forms without complex state management.

Code Example:

import React, { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

  return (
    <form>
      <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
    </form>
  );
}

export default ControlledForm;

8. What is React Router?

Answer: React Router is a library for routing in React applications. It allows you to define routes and navigate between different views.

Best Practices:

• Use Switch or Routes from React Router v6 to handle route matching.
• Implement protected routes for authentication scenarios.

Code Example:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

9. What is Redux?

Answer: Redux is a predictable state container for JavaScript apps, often used with React. It helps manage global state in large applications.

Best Practices:

• Use Redux for managing complex state that needs to be shared across multiple components.
• Structure your reducers and actions clearly for maintainability.

Code Example:

// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });

// reducer.js
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

export default counterReducer;

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

10. What are some common performance optimization techniques in React?

Answer:

• Memoization: Use React.memo for functional components and PureComponent for class components to prevent unnecessary re-renders.
• Lazy Loading: Load components only when they are needed using React.lazy and Suspense.
• Code Splitting: Split your code into smaller bundles to improve load times.

Best Practices:

• Profile your application to identify bottlenecks before applying optimizations.
• Use Webpack or other tools for efficient code splitting.

Code Example:

import React, { lazy, Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Conclusion

Preparing for a React.js interview requires understanding the core concepts, best practices, and common patterns used in building React applications. By mastering these topics and practicing with real-world examples, you'll be well-equipped to tackle any interview question that comes your way.

Remember to stay updated with the latest developments in the React ecosystem by following official documentation, attending webinars, and participating in online communities. Good luck!