Top 100+ React JS Interview Questions And Answers

In the world of front-end development, React JS is one of the most popular libraries for building user interfaces. Whether you’re a beginner or an experienced developer looking to switch gears, mastering ReactJS can open doors to exciting career opportunities.

To help you ace your ReactJS interviews, we’ve compiled the top 100+ questions and answers covering basic, advanced, coding, experienced, and hooks-related topics. Let’s delve into each category.

React JS Basic Interview Questions Answers for Freshers

Here are some basic React JS Interview Questions and Answers for freshers.

1. What is ReactJS?

ReactJS, often referred to as React, is an open-source JavaScript library used for building user interfaces or UI components. It was developed and maintained by Facebook.

React allows developers to create interactive and dynamic user interfaces efficiently. It is particularly popular for building single-page applications (SPAs) where the content is updated dynamically without requiring a full page reload.

2. What are the key features of React?

1. Component-Based Architecture: React follows a component-based architecture, where the user interface is broken down into reusable and modular components. Each component manages its own state and can be composed to build complex UIs.
2. Virtual DOM: React uses a virtual DOM (Document Object Model) to improve the performance of rendering updates. Instead of updating the entire DOM when a change occurs, React updates a virtual representation of the DOM and then efficiently determines the minimal number of actual DOM manipulations needed to reflect the change.
3. Declarative Syntax: React uses a declarative syntax, making it easier to understand and reason about the application’s behavior. Developers describe how the UI should look based on the application’s state, and React takes care of updating the DOM to match that state.
4. JSX (JavaScript XML): React uses JSX, a syntax extension that allows developers to write HTML-like code in JavaScript. JSX makes it more straightforward to describe the structure of UI components within the JavaScript code.
5. Unidirectional Data Flow: React follows a unidirectional data flow, where data flows in a single direction, from parent components to child components. This helps in maintaining a predictable state and simplifies the debugging process.

3. Why you should choose ReactJS?

• Reusability: Components can be reused across your application, reducing redundancy in your code.
• Community Support: React has a massive and active community, which means you’ll find plenty of resources, tutorials, and third-party libraries to enhance your development.
• Flexibility: Whether you’re building a single-page application or working on a more complex project, React adapts to your needs.

4. What is JSX?

JSX stands for JavaScript XML, but don’t let the acronym intimidate you. In simpler terms, JSX is a syntax extension for JavaScript, and it’s a game-changer when it comes to building user interfaces with React.

5. What are the components in ReactJS?

Components are the fundamental building blocks that make up a user interface. Each component is a self-contained, reusable piece of code responsible for a specific part of the UI. They encapsulate functionality, making it easier to manage and maintain your code.

Components can range from simple ones like buttons or input fields to more complex ones representing entire sections of a webpage. This modular approach not only enhances code organization but also promotes reusability, a key advantage in React development.

6. What is a state in React?

In React, the “state” is a crucial concept that represents the data a component maintains and manages. It’s essentially an object that holds information influencing the rendering and behavior of the component. Unlike props, which are passed from parent components, the state is managed within the component itself.

When the state of a component changes, React automatically re-renders the component, updating the UI to reflect the new state.

7. What are props in React?

“props” is short for properties and plays an important role in passing data from one component to another. Props are essentially parameters that a parent component passes down to its child components. These parameters can include various types of data, such as strings, numbers, functions, or even entire components.

8. What is the virtual DOM?

The Virtual DOM (Document Object Model) is a key concept in React that contributes to the library’s efficiency and performance. It is a lightweight, in-memory representation of the actual DOM elements in your web application. React uses this Virtual DOM to optimize the process of updating the UI.

When there’s a change in the state of a component, React doesn’t immediately update the real DOM. Instead, it first updates the Virtual DOM, which is a faster operation. React then compares the updated Virtual DOM with the previous state of the Virtual DOM, identifying the minimal number of changes needed to synchronize with the real DOM.

9. Differentiate between Real DOM and Virtual DOM?

The Real DOM (Document Object Model) and the Virtual DOM are both representations of the structure of a web page, but they differ in how they are handled and updated.

Update Efficiency:

• Real DOM: Full re-renders for any update, computationally expensive.
• Virtual DOM: Updates Virtual DOM first, compares changes, then updates Real DOM selectively, improving efficiency.

Rendering Approach:

• Real DOM: Direct connection to rendering engine, triggers reflows and repaints.
• Virtual DOM: Lightweight, in-memory copy not directly connected to the rendering engine, optimized updates.

Performance Impact:

• Real DOM: Slower due to direct manipulation and potential full re-renders.
• Virtual DOM: Optimized updates, and batching changes, leading to improved performance in React applications.

10. How do you create a React component?

Creating components in React JS is a fundamental aspect of building modular and reusable user interfaces. Here’s a brief overview of how you can create components in React:

Class Components:

• Define a new class that extends React.Component.
• Implement a render method within the class that returns the JSX representing the component’s UI.

import React, { Component } from 'react';

class MyComponent extends Component {
	constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
              	<h1>Hello, I am a React component!</h1>
            </div>
        );
    }
}

export default MyComponent;

Functional Components:

• Define a function that returns the JSX representing the component’s UI.

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h1>Hello, I am a functional React component!</h1>
    </div>
  );
}

export default MyComponent;

11. What is the difference between class components and functional components in React

The main difference between class and functional components is that class components use lifecycle methods and functional components use hooks. Class components use ES6 classes and have states, while functional components are stateless and use functions.

12. How do you handle events in React?

Events in React are handled using camelCase naming conventions, and event handlers are passed as props to components.

13. Explain the component lifecycle in React.

The component lifecycle comprises mounting, updating, and unmounting phases, each with specific methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

14. What is the purpose of refs in React?

Refs provide a way to access DOM nodes or React elements created in the render method.

15. How do you handle forms in React?

Form handling in React involves controlled components, where form data is controlled by the React component state.

16. What are controlled components in React?

Controlled components are React components where form data is controlled by React state, enabling synchronization between UI and state.

17. Explain the concept of higher-order components (HOC) in React.

Higher-order components are functions that take a component and return a new component with enhanced functionality.

18. How do you perform routing in React?

React Router is a popular library used for routing in React applications, enabling navigation between different components.

19. What are props drilling and how can it be avoided?

Props drilling refers to the process of passing props through multiple layers of components. It can be avoided by using context or state management libraries like Redux.

20. Explain the role of setState in React.

setState is a method used to update the state of a React component, triggering the re-rendering of the component.

21. What are the differences between state and props?

The state is internal to a component and can be changed, while props are passed from parent to child components and are immutable within the child.

22. How does React handle browser compatibility issues?

React itself doesn’t handle browser compatibility directly, but tools like Babel and Polyfills can be used to ensure compatibility.

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

Keys help React identify which items have changed, are added, or are removed, aiding in efficient rendering and updating of lists.

24. Explain the difference between class components and functional components.

Class components are ES6 classes that can hold state and have lifecycle methods, while functional components are pure JavaScript functions that receive props and return JSX.

25. What is the purpose of componentDidMount() lifecycle method in React?

componentDidMount() is called after the component has been rendered in the DOM, making it suitable for performing tasks like data fetching or integrating with other JavaScript frameworks.

26. How can you optimize React performance?

React performance can be optimized by implementing shouldComponentUpdate or using PureComponent to prevent unnecessary re-renders, employing code-splitting, and memoizing components using React.memo().

27. Explain the concept of controlled and uncontrolled components in React forms.

Controlled components are components whose form data is controlled by the React state, while uncontrolled components allow form data to be handled by the DOM.

28. What is React context and how is it used?

React context provides a way to pass data through the component tree without manually passing props down at every level.

29. How does React handle SEO?

React doesn’t inherently support SEO as server-side rendering is limited. However, solutions like Next.js enable server-side rendering for improved SEO.

30. How does React differ from Angular and Vue.js?

React is a library, while Angular and Vue.js are frameworks. React emphasizes simplicity and flexibility, allowing developers to make their own choices for routing, state management, etc.

React JS Advanced Interview Questions Answers

In this section, we will cover the advanced topics of React JS. Here are React JS advanced interview questions and answers.

31. What are hooks in React and how do they differ from class components?

React hooks are functions that enable using state and other React features in functional components. They offer a more concise and readable way to manage state compared to class components.

32. Explain the useState hook in React.

useState is a hook that allows functional components to manage state. It returns a stateful value and a function to update it.

33. What is the useEffect hook used for?

The useEffect hook is used for side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.

34. How does the useContext hook work in React?

useContext hook enables functional components to consume context created by the useContext API, simplifying the process of accessing context values.

35. What is the useReducer hook and when would you use it?

useReducer is a hook used for managing complex state logic in functional components, providing an alternative to useState when state transitions follow predictable patterns.

36. Explain the useRef hook in React.

useRef hook creates a mutable object whose current property is initialized with the passed argument, and its value persists across re-renders.

37. How does the useCallback hook optimize performance?

useCallback memoizes a callback function, preventing unnecessary re-renders in child components that rely on that function reference.

38. What is the useMemo hook used for?

useMemo memoizes the result of a function, preventing expensive calculations on every render and improving performance.

39. How do you share code between React components?

Code sharing between React components can be achieved through props, context, custom hooks, or by extracting shared logic into separate functions or modules.

40. What are custom hooks in React?

Custom hooks are JavaScript functions that utilize React hooks inside, enabling logic reuse between components.

41. Explain the concept of lazy loading in React.

Lazy loading is a technique used to defer loading parts of a React application until they are needed, improving initial load time and overall performance.

42. How do you handle authentication in a React application?

Authentication in React applications can be implemented using various methods like JWT tokens, session cookies, or OAuth, coupled with state management solutions like Redux or Context API.

43. What are portals in React?

Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component, enabling the rendering of modal dialogs, tooltips, etc., without affecting the parent’s styles.

44. How do you optimize performance in React applications?

Performance optimization in React involves techniques like code splitting, lazy loading, memoization, minimizing re-renders, and using production builds.

45. Explain the role of error boundaries in React.

Error boundaries are React components used to catch JavaScript errors in their child component tree, preventing the entire application from crashing and providing graceful error handling.

46. What are the differences between useMemo and useCallback?

useMemo memoizes the result of a function, while useCallback memoizes the function itself.

47. How does React.memo() optimize functional components?

React.memo() is a higher-order component used to memoize functional components, preventing unnecessary re-renders when the component’s props haven’t changed.

48. What is the purpose of the useContext hook?

useContext hook allows functional components to consume context created by the useContext API, simplifying the process of accessing context values.

49. Explain the concept of server-side rendering (SSR) in React.

Server-side rendering is a technique used to pre-render a React application on the server and send the fully rendered page to the client, improving performance and SEO.

50. What are the benefits of using TypeScript with React?

TypeScript enhances React development by providing static typing, which helps catch errors during development, improves code maintainability, and enhances developer productivity.

51. How do you handle routing in a React application?

Routing in React applications can be implemented using libraries like React Router, enabling navigation between different components based on the URL.

52. What are the advantages of using React hooks?

React hooks simplify state management and side effects in functional components, leading to cleaner and more concise code compared to class components.

53. How do you handle forms in React using hooks?

Forms in React can be handled using hooks like useState to manage form state and useEffect to handle form submission or validation logic.

54. Explain the concept of code splitting in React.

Code splitting is a technique used to split a React application into smaller chunks, enabling lazy loading of components or routes to improve initial load time and performance.

55. How does React context differ from prop drilling?

React context provides a way to pass data through the component tree without having to pass props down manually at every level, reducing prop drilling and improving code readability.

56. What is the significance of React fragments?

React fragments allow grouping multiple children without adding extra nodes to the DOM, aiding in cleaner component structure and improved performance.

57. How do you handle side effects in React functional components?

Side effects in React functional components can be handled using hooks like useEffect, which allows performing tasks like data fetching, subscriptions, or DOM manipulation.

58. What are the differences between controlled and uncontrolled components in React forms?

Controlled components have form data controlled by the React state, while uncontrolled components allow form data to be handled by the DOM.

59. Explain the concept of lazy loading and suspense in React.

Lazy loading defers loading parts of a React application until they are needed, while suspense is a feature that enables better handling of asynchronous operations like lazy loading, data fetching, etc.

React JS Coding Interview Questions

Here are some React JS coding interview questions and answers with code examples.

60. Write a React component to display “Hello, World!”.

import React from 'react';

function HelloWorld() {
  return <div>Hello, World!</div>;
}

export default HelloWorld;

61. Implement a counter component in React.

import React, { useState } from 'react';

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

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

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

export default Counter;

62. Create a component to display a list of items.

import React from 'react';

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

export default ItemList;

63. Write a function to fetch data from an API in a React component using useEffect.

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item, index) => (
            <li key={index}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default DataFetcher;

64. Implement a form component in React to handle user input.

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = event => {
    setInputValue(event.target.value);
  };

  const handleSubmit = event => {
    event.preventDefault();
    console.log('Form submitted with value:', inputValue);
    setInputValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="Enter something..."
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

65. Create a component to toggle visibility using state.

import React, { useState } from 'react';

function ToggleVisibility() {
  const [visible, setVisible] = useState(false);

  const toggleVisibility = () => {
    setVisible(!visible);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle Visibility</button>
      {visible && <p>Content to toggle</p>}
    </div>
  );
}

export default ToggleVisibility;

66. Write a higher-order component to log component render count.

import React, { useState } from 'react';

const withRenderCounter = WrappedComponent => {
  return function WithRenderCounter(props) {
    const [renderCount, setRenderCount] = useState(0);

    setRenderCount(prevCount => prevCount + 1);

    return (
      <div>
        <p>Render Count: {renderCount}</p>
        <WrappedComponent {...props} />
      </div>
    );
  };
};

export default withRenderCounter;

67. Implement a simple accordion component in React.

import React, { useState } from 'react';

function Accordion({ title, content }) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <button onClick={toggleAccordion}>{title}</button>
      {isOpen && <div>{content}</div>}
    </div>
  );
}

export default Accordion;

68. Write a component to display a loading spinner while data is being fetched.

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

function DataFetcher() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {data.map((item, index) => (
            <li key={index}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default DataFetcher;

69. Create a component to display a modal dialog in React.

import React, { useState } from 'react';

function Modal() {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <span className="close" onClick={closeModal}>
              &times;
            </span>
            <p>Modal Content Goes Here</p>
          </div>
        </div>
      )}
    </div>
  );
}

export default Modal;

70. Write a higher-order component to fetch data and pass it as props to a component.

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

const withDataFetching = (url) => (WrappedComponent) => {
  return function WithDataFetching(props) {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
      fetch(url)
        .then(response => response.json())
        .then(data => {
          setData(data);
          setLoading(false);
        })
        .catch(error => console.error('Error fetching data:', error));
    }, []);

    return (
      <WrappedComponent {...props} data={data} loading={loading} />
    );
  };
};

export default withDataFetching;

71. Implement a search component in React.

import React, { useState } from 'react';

function Search({ onSearch }) {
  const [query, setQuery] = useState('');

  const handleChange = event => {
    setQuery(event.target.value);
  };

  const handleSubmit = event => {
    event.preventDefault();
    onSearch(query);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="Search..."
      />
      <button type="submit">Search</button>
    </form>
  );
}

export default Search;

72. Create a component to display a toast notification in React.

import React, { useState } from 'react';

function Toast({ message }) {
  const [show, setShow] = useState(true);

  const closeToast = () => {
    setShow(false);
  };

  return (
    <div>
      {show && (
        <div className="toast">
          <button className="close-btn" onClick={closeToast}>
            &times;
          </button>
          <p>{message}</p>
        </div>
      )}
    </div>
  );
}

export default Toast;

73. Write a higher-order component to provide authentication status to wrapped components.

import React, { useState } from 'react';

const withAuthentication = (WrappedComponent) => {
  return function WithAuthentication(props) {
    const [authenticated, setAuthenticated] = useState(false);

    const login = () => {
      setAuthenticated(true);
    };

    const logout = () => {
      setAuthenticated(false);
    };

    return (
      <WrappedComponent
        {...props}
        authenticated={authenticated}
        login={login}
        logout={logout}
      />
    );
  };
};

export default withAuthentication;

74. Implement a carousel component in React.

import React, { useState } from 'react';

function Carousel({ images }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  const nextSlide = () => {
    setCurrentIndex(currentIndex === images.length - 1 ? 0 : currentIndex + 1);
  };

  const prevSlide = () => {
    setCurrentIndex(currentIndex === 0 ? images.length - 1 : currentIndex - 1);
  };

  return (
    <div>
      <button onClick={prevSlide}>Previous</button>
      <img src={images[currentIndex]} alt="carousel" />
      <button onClick={nextSlide}>Next</button>
    </div>
  );
}

export default Carousel;

75. Write a higher-order component to log component props.

import React from 'react';

const withPropsLogger = (WrappedComponent) => {
  return function WithPropsLogger(props) {
    console.log('Component props:', props);
    return <WrappedComponent {...props} />;
  };
};

export default withPropsLogger;

76. Implement a pagination component in React.

import React, { useState } from 'react';

function Pagination({ totalItems, itemsPerPage, onPageChange }) {
  const [currentPage, setCurrentPage] = useState(1);

  const totalPages = Math.ceil(totalItems / itemsPerPage);

  const handlePageChange = page => {
    setCurrentPage(page);
    onPageChange(page);
  };

  const renderPageNumbers = () => {
    const pageNumbers = [];

    for (let i = 1; i <= totalPages; i++) {
      pageNumbers.push(
        <button key={i} onClick={() => handlePageChange(i)}>
          {i}
        </button>
      );
    }

    return pageNumbers;
  };

  return (
    <div>
      <button
        disabled={currentPage === 1}
        onClick={() => handlePageChange(currentPage - 1)}
      >
        Previous
	  </button>
	  {renderPageNumbers()}
      <button
    	disabled={currentPage === totalPages}
    	onClick={() => handlePageChange(currentPage + 1)}
      >
    	Next
      </button>
    </div>
  );
}

export default Pagination;

77. Implement a dropdown component in React.

import React, { useState } from 'react';

function Dropdown({ options, onSelect }) {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleSelect = (option) => {
    setSelectedOption(option);
    onSelect(option);
  };

  return (
    <div className="dropdown">
      <button className="dropdown-btn">{selectedOption || 'Select'}</button>
      <ul className="dropdown-list">
        {options.map((option, index) => (
          <li key={index} onClick={() => handleSelect(option)}>
            {option}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Dropdown;

78. Write a higher-order component to handle loading states in React components.

import React, { useState } from 'react';

const withLoadingState = (WrappedComponent) => {
  return function WithLoadingState(props) {
    const [loading, setLoading] = useState(false);

    const setLoadingState = (isLoading) => {
      setLoading(isLoading);
    };

    return (
      <WrappedComponent
        {...props}
        loading={loading}
        setLoadingState={setLoadingState}
      />
    );
  };
};

export default withLoadingState;

79. Create a component to display a tooltip in React.

import React, { useState } from 'react';

function Tooltip({ text, children }) {
  const [showTooltip, setShowTooltip] = useState(false);

  const toggleTooltip = () => {
    setShowTooltip(!showTooltip);
  };

  return (
    <div className="tooltip-container">
      <span className="tooltip-icon" onMouseEnter={toggleTooltip} onMouseLeave={toggleTooltip}>
        ?
      </span>
      {showTooltip && <div className="tooltip">{text}</div>}
      {children}
    </div>
  );
}

export default Tooltip;

80. Implement a component to display a progress bar in React.

import React from 'react';

function ProgressBar({ percent }) {
  const style = {
    width: `${percent}%`,
    backgroundColor: 'green',
    height: '20px',
  };

  return <div className="progress-bar" style={style}></div>;
}

export default ProgressBar;

81. Create a component to display a range slider in React.

import React, { useState } from 'react';

function RangeSlider({ min, max, onChange }) {
  const [value, setValue] = useState(min);

  const handleChange = (event) => {
    const newValue = event.target.value;
    setValue(newValue);
    onChange(newValue);
  };

  return (
    <input
      type="range"
      min={min}
      max={max}
      value={value}
      onChange={handleChange}
    />
  );
}

export default RangeSlider;

82. Write a higher-order component to handle dark / light theme switching in React components.

import React, { useState } from 'react';

const withThemeSwitching = (WrappedComponent) => {
  return function WithThemeSwitching(props) {
    const [theme, setTheme] = useState('light');

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

    return (
      <div className={`theme-${theme}`}>
        <WrappedComponent {...props} toggleTheme={toggleTheme} />
      </div>
    );
  };
};

export default withThemeSwitching;

These examples cover various aspects of ReactJS, including basic concepts, advanced topics, and coding exercises. By familiarizing yourself with these questions and answers, you’ll be better prepared to tackle React JS interviews with confidence. Remember to practice coding and explore additional resources to deepen your understanding of ReactJS.

FAQs