New 100 React Interview Questions

Introduction

Are you preparing for a React interview and looking for a user-friendly introduction to common interview questions? Look no further! React is a popular JavaScript library used for building user interfaces. During interviews, you might encounter questions about React components, state management, lifecycle methods, and more. These questions aim to assess your understanding of React concepts and your ability to solve real-world problems. In this guide, we’ll provide concise and easy-to-understand explanations of commonly asked React interview questions, helping you prepare effectively and confidently for your upcoming interview. Let’s dive in and enhance your React knowledge!

Basic Questions

1. What is React?

React is a popular JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently manage the state of the application. Here’s a simple example of a React component:

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Welcome;

2. What are the main features of React?

The main features of React include:

• Components and reusability
• Virtual DOM for efficient rendering
• JSX syntax for declarative UI
• One-way data binding with props
• State management
• Lifecycle methods for control over component behavior
• React Native for mobile app development

3. What is JSX?

JSX (JavaScript XML) is a syntax extension for React that allows you to write HTML-like code within JavaScript. It helps in creating React elements more intuitively. Here’s an example:

import React from 'react';

const element = <h1>Hello, JSX!</h1>;

export default element;

4. What is the difference between a Class component and a Functional component?

Class components are created using ES6 classes and have more features like state and lifecycle methods. Functional components, on the other hand, are simpler and mainly used for rendering UI based on props. Here’s a comparison:

Class Component example:

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

Functional Component example:

import React from 'react';

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

export default Greeting;

5. What is the virtual DOM?

The virtual DOM is a lightweight copy of the actual DOM maintained by React. It helps improve rendering performance by minimizing direct manipulation of the real DOM. Here’s an example of how it works:

import React from 'react';
import ReactDOM from 'react-dom';

// Instead of directly rendering to the real DOM, React renders to the virtual DOM first
const virtualElement = <h1>Hello, Virtual DOM!</h1>;

// Then, React compares the virtual DOM with the actual DOM and performs only necessary updates
ReactDOM.render(virtualElement, document.getElementById('root'));

6. What is the role of ReactDOM.render() in React?

ReactDOM.render() is used to render React elements to the real DOM. It takes a React element and attaches it to a specific HTML element in the document. Here’s an example:

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, ReactDOM!</h1>;

ReactDOM.render(element, document.getElementById('root'));

7. What is a React component?

A React component is a reusable piece of UI that can have its own state and properties (props). It can be a class component or a functional component. Here’s an example:

import React from 'react';

class Button extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}

export default Button;

8. How do you create a component in React?

In React, you can create a component by defining a class or a function. Here’s an example of both class and functional components:

Class Component example:

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

Functional Component example:

import React from 'react';

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

export default Greeting;

9. What is state in React?

State is a mechanism to store and manage data within a React component. It allows components to change and re-render based on changes to the data. Here’s an example of using state in a class component:

import React from 'react';

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

10. What are props in React?

Props (short for properties) are used to pass data from a parent component to a child component. They are immutable and help to make components more dynamic and reusable. Here’s an example:

import React from 'react';

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

export default Greeting;

Usage of the component:

import React from 'react';
import Greeting from './Greeting';

const App = () => {
  return <Greeting name="John" />;
};

export default App;

11. What is the difference between state and props?

12. What are the React lifecycle methods?

React lifecycle methods allow you to hook into specific moments during the lifecycle of a component. Here are some of the commonly used lifecycle methods:

import React from 'react';

class LifecycleDemo extends React.Component {
  constructor() {
    super();
    console.log('Constructor called.');
  }

  componentDidMount() {
    console.log('Component did mount.');
  }

  componentDidUpdate() {
    console.log('Component did update.');
  }

  componentWillUnmount() {
    console.log('Component will unmount.');
  }

  render() {
    console.log('Render called.');
    return <h1>Hello, Lifecycle!</h1>;
  }
}

export default LifecycleDemo;

13. What is the purpose of super() in React?

In React class components, super() is used to call the constructor of the parent class (i.e., React.Component). It is necessary to call super() if you define a constructor in a subclass to properly initialize the component.

import React from 'react';

class ChildComponent extends React.Component {
  constructor() {
    super(); // Call to the parent class constructor
    // Other component-specific initialization here
  }

  render() {
    return <h1>Hello, I'm the child component!</h1>;
  }
}

export default ChildComponent;

14. What is the purpose of render() in React?

The render() method is a required lifecycle method in a React class component. It returns the JSX or React elements that make up the UI of the component.

import React from 'react';

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

15. What is a Steady Component? Give a relevant code example.

I’m not aware of the term “Steady Component” in the context of React. It might be an obsolete term or a term used in a specific context not covered in my training data.

16. What is an Uncontrolled Component?

An Uncontrolled Component is a form element (like input, textarea, etc.) that manages its own state internally rather than being controlled by React’s state. It typically uses a ref to access its current value.

import React from 'react';

class UncontrolledForm extends React.Component {
  inputRef = React.createRef();

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', this.inputRef.current.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default UncontrolledForm;

17. What is the use of keys in React?

Keys in React are used to help identify individual elements in a list. They aid React in efficiently updating and reordering elements without re-rendering all of them. Keys should be unique within the list.

import React from 'react';

const TodoList = () => {
  const todos = [
    { id: 1, text: 'Buy groceries' },
    { id: 2, text: 'Walk the dog' },
    { id: 3, text: 'Clean the house' },
  ];

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

export default TodoList;

18. What is a higher order component?

A Higher Order Component (HOC) is a pattern in React where a function takes a component and returns a new component with additional props or behavior.

import React from 'react';

const withTitle = (WrappedComponent, title) => {
  return (props) => (
    <>
      <h1>{title}</h1>
      <WrappedComponent {...props} />
    </>
  );
};

const Greeting = (props) => {
  return <p>Hello, {props.name}!</p>;
};

const GreetingWithTitle = withTitle(Greeting, 'Welcome');

export default GreetingWithTitle;

19. What is a fragment in React?

A Fragment is a built-in component in React that allows you to group multiple elements without adding an additional DOM element to the output.

import React from 'react';

const MyFragment = () => {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </>
  );
};

export default MyFragment;

20. What is Context API in React?

The Context API in React allows you to pass data down the component tree without explicitly passing it through props at every level. It is useful when data needs to be accessed by many components at different nesting levels.

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

// Create a context
const MyContext = createContext();

// Provide data using the context provider
const App = () => {
  return (
    <MyContext.Provider value="Hello from Context">
      <ChildComponent />
    </MyContext.Provider>
  );
};

// Consume data from the context
const ChildComponent = () => {
  const dataFromContext = useContext(MyContext);
  return <p>{dataFromContext}</p>;
};

export default App;

21. What are hooks in React?

Hooks are functions that allow you to use React features like state and lifecycle methods in functional components. Some commonly used hooks include useState, useEffect, useContext, etc.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

22. What is the use of useEffect in React?

The useEffect hook in React is used to perform side effects in functional components, such as data fetching, subscriptions, or manual DOM manipulation. It runs after every render of the component.

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

const DataFetching = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Simulating data fetching with setTimeout
    const fetchData = () => {
      setTimeout(() => {
        setData(['Item 1', 'Item 2', 'Item 3']);
      }, 1000);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default DataFetching;

23. How to apply validation on props in React?

You can use the prop-types library to apply validation on props in React. It helps to define the expected type and presence of props.

import React from 'react';
import PropTypes from 'prop-types';

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

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

export default Greeting;

24. What is the use of React Router?

React Router is a library that allows you to handle routing and navigation in a React application. It helps in creating Single Page Applications (SPAs)

by rendering different components based on the URL.

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

const Home = () => <h1>Welcome to the Home page!</h1>;
const About = () => <h1>About Us</h1>;
const Contact = () => <h1>Contact Us</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

export default App;

25. What are synthetic events in React?

Synthetic events in React are synthetic wrappers around the native browser events. They provide cross-browser compatibility and automatic event pooling.

import React from 'react';

const Button = () => {
  const handleClick = (event) => {
    console.log('Button clicked!', event.target.value);
  };

  return <button onClick={handleClick}>Click Me</button>;
};

export default Button;

26. How to conditionally render components in React?

You can use conditional statements like if-else or ternary operators to conditionally render components in React.

Using if-else:

import React from 'react';

const ConditionalComponent = ({ showComponent }) => {
  if (showComponent) {
    return <h1>Show this component!</h1>;
  } else {
    return <h1>Don't show this component!</h1>;
  }
};

export default ConditionalComponent;

Using ternary operator:

import React from 'react';

const ConditionalComponent = ({ showComponent }) => {
  return showComponent ? <h1>Show this component!</h1> : <h1>Don't show this component!</h1>;
};

export default ConditionalComponent;

27. What is ‘Lifting State Up’ in React?

‘Lifting State Up’ is the process of moving the state from a child component to its parent component when multiple child components need to share the same state.

import React, { useState } from 'react';

const ChildComponent = ({ count, increment }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return <ChildComponent count={count} increment={increment} />;
};

export default ParentComponent;

28. How can you handle events in React?

In React, you can handle events by passing event handlers as props to the components.

import React from 'react';

const Button = ({ onClick }) => {
  return <button onClick={onClick}>Click Me</button>;
};

const App = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return <Button onClick={handleClick} />;
};

export default App;

29. What is the use of refs in React?

Refs in React are used to get direct access to a DOM element or a component instance. They should be used sparingly, as they bypass React’s usual data flow.

import React, { useRef } from 'react';

const InputComponent = () => {
  const inputRef = useRef();

  const handleButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
};

export default InputComponent;

30. What are the limitations of React?

Some of the limitations of React include:

• Steeper learning curve for beginners due to the concepts of components and state management.
• React focuses on the view layer of the application, and developers may need to use additional libraries for complex state management and routing.
• Large React applications can face performance issues, and optimization might be needed.
• Using React for SEO can be challenging due to server-side rendering requirements.
• React Native, while great for cross-platform mobile apps, may have limitations in accessing certain native device functionalities compared to native development.

Intermediate Questions

1. What is the React Context API and how is it used?

The React Context API is used to manage global state in React applications without having to pass props through all levels of the component tree. It allows data to be shared and accessed by any component within a specific context.

Example:

// Create a context
const MyContext = React.createContext();

// Create a provider component to wrap around components that need access to the context data
function MyProvider({ children }) {
  const sharedData = "This is the shared data.";

  return (
    <MyContext.Provider value={sharedData}>
      {children}
    </MyContext.Provider>
  );
}

// A component that consumes data from the context
function MyComponent() {
  const data = useContext(MyContext);

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

// Wrap the components that need access to the context data with the provider
function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

2. What are Pure Components in React?

Pure Components are a type of React component that automatically implements a shallow comparison of their props and state to determine if a re-render is necessary. They can help improve performance by avoiding unnecessary re-renders.

Example:

// Regular Component
class RegularComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

// Pure Component
class PureComponentExample extends React.PureComponent {
  render() {
    return <div>{this.props.name}</div>;
  }
}

3. What is a higher-order component (HOC)? Can you provide an example?

A Higher-Order Component (HOC) is a function that takes a component and returns a new component with extended functionality. HOCs are used for code reuse, logic sharing, and adding additional props to components.

Example:

// Higher-Order Component
function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Component was mounted.");
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// Component to be wrapped with the HOC
class MyComponent extends React.Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

// Wrap the component with the HOC
const MyComponentWithLogger = withLogger(MyComponent);

// Render the wrapped component
function App() {
  return <MyComponentWithLogger name="John" />;
}

4. Explain the concept of “Lifting State Up” in React.

“Lifting State Up” is a pattern in React where state is moved from a child component to its parent component, so multiple child components can share and modify the same state.

Example:

// Child component
function TemperatureInput(props) {
  return (
    <input
      type="number"
      value={props.temperature}
      onChange={(e) => props.onTemperatureChange(e.target.value)}
    />
  );
}

// Parent component
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.state = { temperature: 0 };
  }

  handleTemperatureChange = (temperature) => {
    this.setState({ temperature });
  };

  render() {
    const { temperature } = this.state;
    return (
      <div>
        <TemperatureInput
          temperature={temperature}
          onTemperatureChange={this.handleTemperatureChange}
        />
        <TemperatureInput
          temperature={temperature}
          onTemperatureChange={this.handleTemperatureChange}
        />
      </div>
    );
  }
}

In this example, the Calculator component lifts the temperature state up from the TemperatureInput components, allowing both inputs to share and update the same state.

5. How do you handle forms in React?

In React, you can handle forms using controlled components. Controlled components tie the form elements to the component state, allowing React to control the form’s values.

Example:

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    };
  }

  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    // Perform form submission logic here
    console.log("Submitted data:", this.state);
  };

  render() {
    const { username, password } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="username"
          value={username}
          onChange={this.handleInputChange}
        />
        <input
          type="password"
          name="password"
          value={password}
          onChange={this.handleInputChange}
        />
        <button type="submit">Login</button>
      </form>
    );
  }
}

6. How do you implement Error Boundaries in React for error handling?

Error Boundaries in React are components that catch JavaScript errors during rendering, in lifecycle methods, and during the constructor execution of the whole tree below them. They help prevent the entire application from crashing due to a single component error.

Example:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log the error or send it to an error reporting service
    console.error("Error caught by ErrorBoundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong!</div>;
    }

    return this.props.children;
  }
}

// Usage of ErrorBoundary
function App() {
  return (
    <ErrorBoundary>
      <ComponentThatMightThrowAnError />
    </ErrorBoundary>
  );
}

7. Explain the use of arrow functions in React.

Arrow functions in React are used for defining concise and inline function expressions. They automatically bind the value of this based on the surrounding context and help avoid common pitfalls with this keyword scoping.

Example:

// Regular function component
function MyComponent() {
  return (
    <button onClick={function() { console.log("Clicked!"); }}>
      Click Me
    </button>
  );
}

// Using arrow function
function MyComponent() {
  return (
    <button onClick={() => { console.log("Clicked!"); }}>
      Click Me
    </button>
  );
}

In the above example, the arrow function does not need to explicitly bind this because it automatically inherits the surrounding context, whereas the regular function would require explicit binding or it would not work as expected.

8. What is Redux and how is it related to React?

Redux is a predictable state container for JavaScript applications. It is often used with React to manage the state of an application and provide a centralized store that holds the application state.

Example:

// Redux store setup
import { createStore } from 'redux';

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

// Create the Redux store
const store = createStore(counterReducer);

// React component using Redux
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <span>Count: {count}</span>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

In the above example, the Redux store is set up with a reducer function that handles state changes based on dispatched actions. The Counter component uses Redux hooks (useSelector and useDispatch) to access the state from the store and dispatch actions to update the state.

9. What is the significance of Store in Redux?

The Store in Redux is a single source of truth that holds the state of the entire application. It plays a crucial role in managing the application state and ensuring that the state is updated in a predictable manner. The store helps to:

• Hold the application state in one place, making it easy to access and manage the state from any component.
• Provide a mechanism to subscribe to state changes, enabling components to react to changes in the state.
• Dispatch actions to modify the state in a controlled and predictable way through reducers.

10. What is a reducer in Redux?

In Redux, a reducer is a pure function that takes the current state and an action as arguments and returns a new state based on that action. It specifies how the state should change in response to the action dispatched to the Redux store.

Example:

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

In this example, counterReducer takes the state and an action as arguments and returns a new state based on the action type. When the action type is 'INCREMENT', the count is increased by 1, and when the action type is 'DECREMENT', the count is decreased by 1.

11. Explain how Redux Thunk works.

Redux Thunk is a middleware that allows asynchronous actions to be dispatched in Redux. It extends the capabilities of Redux to handle asynchronous operations such as making API calls before dispatching an action.

Example:

// Redux Thunk action creator
function fetchData() {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_START' });

    // Simulate an API call
    setTimeout(() => {
      const data = [1, 2, 3, 4];
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    }, 1000);
  };
}

// Usage of the thunk action creator
import { useDispatch, useSelector } from 'react-redux';

function MyComponent() {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.data);

  const handleFetchData = () => {
    dispatch(fetchData());
  };

  return (
    <div>
      <button onClick={handleFetchData}>Fetch Data</button>
      <ul>
        {data.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

In this example, the fetchData action creator returns a function instead of a plain object. Redux Thunk intercepts this function and provides the dispatch method as an argument. This allows the function to perform asynchronous operations and dispatch multiple actions at different times.

12. How would you handle asynchronous actions in Redux?

Asynchronous actions in Redux can be handled using Redux Thunk or other middleware libraries like Redux Saga or Redux Observable. Here’s an example using Redux Thunk:

// Redux Thunk action creator
function fetchData() {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_DATA_START' });

    try {
      // Simulate an API call
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();

      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_ERROR', payload: error.message });
    }
  };
}

// Usage of the thunk action creator
import { useDispatch, useSelector } from 'react-redux';

function MyComponent() {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.data);
  const error = useSelector((state) => state.error);

  const handleFetchData = () => {
    dispatch(fetchData());
  };

  return (
    <div>
      <button onClick={handleFetchData}>Fetch Data</button>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      ) : (
        <p>{error || 'No data available.'}</p>
      )}
    </div>
  );
}

In this example, the fetchData action creator uses async/await to handle the asynchronous API call. It dispatches different actions based on the success or failure of the API call.

13. What are the middleware functions in Redux?

Middleware functions in Redux provide a way to extend the behavior of dispatch and allow additional processing to be done before an action reaches the reducer. Middleware sits between the action being dispatched and reaching the reducer.

Example using custom middleware:

// Custom middleware
const loggerMiddleware = (store) => (next) => (action) => {
  console.log('Dispatching action:', action);
  const result = next(action);
  console.log('Updated state:', store.getState());
  return result;
};

// Applying the middleware to the Redux store
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

const store =

 createStore(rootReducer, applyMiddleware(loggerMiddleware));

In this example, the loggerMiddleware logs the dispatched action and the updated state after every action. The applyMiddleware function is used to include this middleware when creating the Redux store.

14. How do you make use of the ‘connect’ function in Redux?

The connect function from react-redux library is used to connect a React component to the Redux store. It allows the component to access the state and dispatch actions as props.

Example:

import { connect } from 'react-redux';

// Component
function MyComponent(props) {
  return <div>Count: {props.count}</div>;
}

// mapStateToProps function
const mapStateToProps = (state) => {
  return {
    count: state.count
  };
};

// Connect the component to the Redux store
const ConnectedComponent = connect(mapStateToProps)(MyComponent);

// Usage of the connected component
function App() {
  return <ConnectedComponent />;
}

In this example, the mapStateToProps function specifies which parts of the state should be mapped to the component’s props. The connect function connects the component to the Redux store and makes the count state available as a prop in the MyComponent.

15. What is the purpose of ‘mapStateToProps’ and ‘mapDispatchToProps’ in Redux?

• mapStateToProps: It is a function used in connect to specify which parts of the Redux state should be mapped to the component’s props. It is used to extract data from the Redux store’s state and pass it as props to the component.

Example:

const mapStateToProps = (state) => {
  return {
    count: state.count
  };
};

• mapDispatchToProps: It is a function used in connect to specify which action creators from Redux should be mapped to the component’s props. It is used to pass action creators as props to the component, making it easy to dispatch actions from the component.

Example:

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
};

In the above example, the increment and decrement action creators are mapped to the component’s props using mapDispatchToProps, allowing the component to dispatch these actions.

16. How do you implement routing in React?

Routing in React can be implemented using libraries like React Router. React Router provides components that help you define different routes in your application and navigate between them.

Example using React Router:

// Installation: npm install react-router-dom

// App.js
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function Home() {
  return <div>Welcome to the Home page!</div>;
}

function About() {
  return <div>This is the About page.</div>;
}

function Contact() {
  return <div>Contact us at example@example.com</div>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

In this example, we use BrowserRouter as the router implementation and set up different routes using Route components. The Switch component ensures that only the first matched route is rendered, preventing multiple components from being shown simultaneously.

17. What is the difference between ‘react-router’ and ‘react-router-dom’?

Both packages work together, but react-router-dom is the more commonly used package for web applications.

18. What is a render prop?

A render prop is a pattern in React where a component receives a function as a prop, and that function is responsible for rendering content. It allows the parent component to share its internal state or logic with the child component.

Example:

// Parent component with a render prop
class MouseTracker extends React.Component {
  render() {
    return (
      <div onMouseMove={(e) => this.props.render(e)}>
        {/* Some other content */}
      </div>
    );
  }
}

// Usage of the MouseTracker component with a render prop
function App() {
  return (
    <MouseTracker
      render={(e) => <div>Mouse position: {e.clientX}, {e.clientY}</div>}
    />
  );
}

In this example, the MouseTracker component takes a render prop, which is a function that receives the mouse event and returns JSX to be rendered. The App component uses the MouseTracker and defines how the mouse position is displayed.

19. What is a controlled component in React?

A controlled component in React is a component where the form data and its behavior are controlled by React. The component receives its current value and onChange event handler through props and notifies the parent component about any changes.

Example:

class InputForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
  }

  handleInputChange = (e) => {
    this.setState({ inputValue: e.target.value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    // Submit the form data
    console.log("Submitted value:", this.state.inputValue);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleInputChange}
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

In this example, the InputForm component is a controlled component because the value of the input field is controlled by the component’s state and changes to the input value are handled through the handleInputChange method.

20. What are hooks in React?

Hooks are functions in React that allow you to use state and other React features in functional components. They were introduced in React 16.8 to provide a simpler and more concise way to work with stateful logic in functional components.

Example:

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

In this example, the useState hook allows us to add state to a functional component. The count and setCount variables are used to store and update the state, and the component’s UI reflects the current state.

21. Explain the use of the useEffect hook in React.

The useEffect hook in React is used to perform side effects in functional components. It is similar to lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

Example:

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

function ExampleComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error('Error fetching data:', error));
  }, []); // Empty dependency array means the effect runs only once (on mount)

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

In this example, the useEffect hook is used to fetch data from an API when the component mounts. The effect is set to run only once, as the dependency array is empty ([]). If you provide a non-empty dependency array, the effect will run whenever the dependencies change.

22. What is the useState hook in React?

The useState hook is used to add state to functional components in React. It returns a pair of values: the current state and a function to update that state.

Example:

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

In this example, the useState hook is used to create a count state variable with an initial value of 0. The setCount function is used to update the value of count when the buttons are clicked.

23. What are React PropTypes and how do you use them?

React PropTypes are used for type checking the props passed to a component. They help to ensure that the correct data types are being passed to components, which can prevent potential bugs and improve code maintainability.

Example:

import PropTypes from 'prop-types';

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

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

In this example, the propTypes property is used to define the expected types and constraints for the name prop of the Greeting component. In this case, name should be a string and is required (marked with isRequired). If the prop is missing or of the wrong type, a warning will be shown in the console during development.

24. What are Synthetic Events in React?

Synthetic Events in React are a cross-browser wrapper around the browser’s native events. They are similar to native events but provide consistent behavior across different browsers.

Example:

function Button() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('Button clicked!');
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

In this example, the onClick event is a synthetic event provided by React. The handleClick function is called when the button is clicked, and e.preventDefault() prevents the default behavior of the event (e.g., form submission or link navigation).

25. Explain the lifecycle methods in React Components.

React class components have several lifecycle methods that allow you to hook into the different phases of a component’s life. These methods can be used for performing actions at specific points in the component’s lifecycle.

Here are the main lifecycle methods:

1. componentDidMount: This method is called after the component has been rendered to the screen. It is commonly used for making AJAX requests or setting up subscriptions.
2. componentDidUpdate: This method is called whenever the component is updated or re-rendered. It can be used for performing actions after an update, such as updating the DOM based on new data.
3. componentWillUnmount: This method is called just before the component is removed from the DOM. It can be used for cleanup, such as removing event listeners or canceling subscriptions.
4. shouldComponentUpdate: This method allows you to control whether the component should re-render or not. By default, the component re-renders whenever its state or props change, but you can implement this method to optimize performance by preventing unnecessary re-renders.
5. getDerivedStateFromProps: This static method is called before rendering and is used to update the state based on changes in props. It is rarely used, as you should prefer using controlled components.

26. How do you implement server-side rendering or isomorphic rendering in React?

Server-side rendering (SSR) or isomorphic rendering in React means rendering the initial page content on the server before sending it to the client. It can improve the initial load time and SEO of the application.

Example using Node.js and Express:

// server.js
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

import express from 'express';
const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <html>
      <head>
        <title>My React App</title>
      </head>
      <body>
        <div id="root">${html}</div>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

In this example, we use ReactDOMServer.renderToString to render the ReactApp component to a string on the server. The server responds with the generated HTML containing the initial content of the React app.

27. What is the significance of keys in React lists?

Keys are a special attribute used in React when rendering lists of elements. They help React identify which items have changed, been added, or been removed from the list. When a list is re-rendered, React uses keys to efficiently update the DOM, minimizing unnecessary DOM manipulations and improving performance.

Example:

function ListComponent() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

In this example, each list item is given a unique key based on its index. If the order of the list changes, or an item is added or removed, React can identify which elements need to be updated, moved, or inserted based on their keys.

28. Explain how to do code-splitting in React.

Code-splitting is a technique in React that allows you to split your bundled JavaScript code into smaller chunks, which can be loaded on-demand. This can help reduce the initial loading time of the application.

Example using dynamic import (available in modern environments with native dynamic import support or using a tool like Webpack):

import React, { useState } from 'react';

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

function App() {
  const [showLazyComponent, setShowLazyComponent] = useState(false);

  const handleClick = () => {
    setShowLazyComponent(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Load Lazy Component</button>
      {showLazyComponent && (
        <React.Suspense fallback={<div>Loading...</div>}>
          <LazyComponent />
        </React.Suspense>
      )}
    </div>
  );
}

In this example, we use React.lazy to dynamically import the LazyComponent when the button is clicked. The React.Suspense component is used to show a fallback while the component is being loaded.

29. What are the benefits of using React.memo()?

React.memo() is a higher-order component provided by React to optimize functional components by preventing unnecessary re-renders. When you wrap a component with React.memo(), it will only re-render when its props change.

Benefits of using React.memo():

1. Performance improvement: It reduces re-renders for components that receive the same props, improving the application’s performance.
2. Reduction in unnecessary calculations: Components wrapped in React.memo() avoid unnecessary calculations in the render function when their props haven’t changed.
3. Easy to use: It is easy to implement; you just wrap your functional component with React.memo().

Example:

import React from 'react';

const MemoizedComponent = React.memo(MyComponent);

In this example, MyComponent will be memoized, and it will only re-render when its props change.

30. How can you optimize a React application’s performance?

To optimize a React application’s performance, you can follow these practices:

1. Use functional components and hooks: Functional components have better performance than class components. Hooks, like useState, useEffect, and useMemo, allow you to optimize the component’s behavior and reduce unnecessary re-renders.
2. Use React.memo(): As mentioned earlier, React.memo() helps prevent unnecessary re-renders for functional components by caching the result of the component’s rendering.
3. Code-splitting: Use code-splitting techniques to load only the required parts of the application when needed. This can reduce the initial loading time of the application.
4. Use shouldComponentUpdate or React.memo() with custom comparison functions: In class components, you can use shouldComponentUpdate to prevent unnecessary renders. With functional components, you can use React.memo() and provide a custom comparison function to control when the component should re-render.
5. Optimize list rendering: When rendering lists, use unique keys for each item to optimize updates. Avoid using the index as the key if the list items can be reordered.
6. Use production build: Make sure to use the production build of React for your production environment. It includes performance optimizations and removes development-only features.
7. Profiling: Use React’s built-in profiler or third-party tools to identify performance bottlenecks in your application and optimize them.
8. Optimize images and assets: Compress images and other assets to reduce their size and improve the application’s loading time.
9. Use memoization and caching: Use memoization techniques, like useMemo or memoization libraries, to cache the results of expensive computations and avoid redundant calculations.
10. Avoid unnecessary state updates: Make sure to update the state only when necessary, and use functional updates when modifying the state based on its previous value.

Advanced Questions

1. What is reconciliation in React?

Reconciliation is the process in React where the virtual DOM is compared to the actual DOM and any differences are updated efficiently to minimize unnecessary DOM manipulations. This process helps improve performance by reducing the number of updates needed to keep the UI in sync.

Example:

// Initial state
const data = ['Item 1', 'Item 2', 'Item 3'];

// Initial rendering
const element = (
  <ul>
    {data.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

ReactDOM.render(element, document.getElementById('root'));

// Updated state
const updatedData = ['Item 1', 'Item 3', 'Item 4'];

// Updated rendering
const updatedElement = (
  <ul>
    {updatedData.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

// React performs reconciliation and efficiently updates only the necessary changes in the actual DOM
ReactDOM.render(updatedElement, document.getElementById('root'));

2. What is the Flux architecture? How is it different from Redux?

Flux is a design pattern for managing application state in a predictable way. It has four major components: Actions, Dispatcher, Stores, and Views (React components). Flux emphasizes unidirectional data flow, where data changes flow in a single direction from Actions through the Dispatcher to the Stores, and then to the Views.

Redux is a state management library inspired by Flux but simplifies the architecture by having a single store instead of multiple stores. Redux also emphasizes immutability and a pure reducer function to update state.

Example of Flux (simplified version):

// Action
const ActionTypes = {
  UPDATE_DATA: 'UPDATE_DATA',
};

const updateDataAction = (data) => ({
  type: ActionTypes.UPDATE_DATA,
  payload: data,
});

// Dispatcher
class Dispatcher {
  constructor() {
    this.callbacks = [];
  }

  register(callback) {
    this.callbacks.push(callback);
  }

  dispatch(action) {
    this.callbacks.forEach((callback) => callback(action));
  }
}

const dispatcher = new Dispatcher();

// Store
let data = [];

const dataStore = (state = data, action) => {
  switch (action.type) {
    case ActionTypes.UPDATE_DATA:
      return action.payload;
    default:
      return state;
  }
};

// View
const renderView = (data) => {
  // Render the view using the updated data
};

// Subscribe to store changes
dispatcher.register((action) => {
  data = dataStore(data, action);
  renderView(data);
});

// Initial dispatch to update data
dispatcher.dispatch(updateDataAction(['Item 1', 'Item 2']));

Example of Redux (simplified version):

import { createStore } from 'redux';

// Action
const ActionTypes = {
  UPDATE_DATA: 'UPDATE_DATA',
};

const updateDataAction = (data) => ({
  type: ActionTypes.UPDATE_DATA,
  payload: data,
});

// Reducer
const dataReducer = (state = [], action) => {
  switch (action.type) {
    case ActionTypes.UPDATE_DATA:
      return action.payload;
    default:
      return state;
  }
};

// Store
const store = createStore(dataReducer);

// View
const renderView = () => {
  const data = store.getState();
  // Render the view using the updated data
};

// Subscribe to store changes
const unsubscribe = store.subscribe(renderView);

// Initial dispatch to update data
store.dispatch(updateDataAction(['Item 1', 'Item 2']));

3. Can you explain the concept of “Immutable State”?

Immutable state means that the state object cannot be modified directly after it’s created. Instead of mutating the state, you create a new state object with the required changes. This concept is important because it helps avoid unwanted side effects and makes it easier to track changes in the application.

Example:

import { useState } from 'react';

// Incorrect mutable state update
const mutableStateExample = () => {
  const [data, setData] = useState(['Item 1', 'Item 2']);

  const addItem = (item) => {
    data.push(item); // Mutating the state directly (wrong)
    setData(data); // Will not trigger re-render because the reference is the same
  };

  addItem('Item 3'); // This will not update the UI as expected
};

To achieve immutable state, you should create a new state object:

import { useState } from 'react';

// Correct immutable state update
const immutableStateExample = () => {
  const [data, setData] = useState(['Item 1', 'Item 2']);

  const addItem = (item) => {
    setData((prevData) => [...prevData, item]); // Creating a new array with the updated data
  };

  addItem('Item 3'); // This will update the UI correctly
};

4. What is the significance of the shouldComponentUpdate lifecycle method in React?

The shouldComponentUpdate method is a lifecycle hook in React that allows you to control whether a component should re-render or not. By default, React will re-render a component whenever its state or props change. However, in some cases, re-rendering may not be necessary, and that’s where shouldComponentUpdate becomes significant.

Example:

class MyComponent extends React.Component {
  state = {
    count: 0,
  };

  shouldComponentUpdate(nextProps, nextState) {
    // Check if the count has changed
    if (this.state.count !== nextState.count) {
      return true; // Allow re-rendering
    }

    return false; // Prevent re-rendering
  }

  incrementCount = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}