React Interview Questions

ReactJS is a powerful JavaScript library developed by Facebook for building user interfaces, specifically the view layer in the Model-View-Controller (MVC) architecture. It is widely used to build fast and interactive single-page applications (SPAs) using a component-based approach and the concept of a Virtual DOM.

React applications are primarily written in JSX (JavaScript XML), which allows developers to write HTML-like syntax directly within JavaScript code, making UI construction more intuitive and expressive.

Important Features of ReactJS:

• Virtual DOM: React uses a virtual representation of the actual DOM. When changes occur, React updates the virtual DOM first and then applies the minimal required updates to the real DOM, ensuring optimal rendering performance.
• Component-Based Architecture: React enables the development of user interfaces using small, reusable, and isolated pieces of code called components. This enhances modularity and reusability of code across the application.
• Hooks: React Hooks allow functional components to manage state and side effects, enabling developers to write cleaner and more functional code without using class components.
• Server-Side Rendering (SSR): React supports SSR, which allows rendering of HTML content on the server before sending it to the client. This improves performance and boosts SEO rankings for web applications.
• React Router: A standard library for routing in React applications. It allows developers to handle navigation between different views in a single-page application seamlessly, without reloading the entire page.

The Model-View-Controller (MVC) architecture is a software design pattern that separates an application into three interconnected components: Model, View, and Controller. This separation helps organize code more efficiently, promotes scalability, and makes maintenance easier.

1. Model:
The Model represents the application's data, logic, and business rules. It is responsible for managing the data of the application and communicating with the database or other data sources. It does not directly interact with the user interface.

2. View:
The View is responsible for displaying the data provided by the Model in a specific format. It represents the UI (User Interface) of the application and gets updated whenever the Model data changes. It does not contain business logic.

3. Controller:
The Controller acts as an intermediary between the Model and the View. It receives user input from the View, processes it (possibly updating the Model), and determines which View to display next. It handles user interaction logic.

Benefits of MVC:

• Promotes separation of concerns between data, UI, and logic.
• Makes the application more maintainable and scalable.
• Improves code organization and reusability.
• Supports parallel development of components.

In React, props and state are two key concepts used to manage and render data in components. Although they appear similar in some ways, they have distinct purposes and usage patterns.

Props:
Props are read-only data passed from a parent component to a child component. They are used to configure or customize child components. A component cannot change its own props.

State:
State is data that is managed within a component. It can be updated over time, usually in response to user actions or events, and controls how the component behaves or displays content.

Key Differences Between Props and State:

The Virtual DOM in React is an in-memory representation of the actual Document Object Model (DOM). It allows React to optimize and manage updates to the user interface efficiently, reducing the performance cost associated with frequent direct DOM manipulations.

Instead of modifying the real DOM directly when a change occurs, React first updates the Virtual DOM. It then compares the current Virtual DOM with the previous one using a process called diffing to identify the smallest number of changes needed. Only those minimal changes are then applied to the actual DOM.

How Virtual DOM Works:

• Efficient Rendering: React maintains a Virtual DOM in memory to efficiently track changes in the UI before updating the real DOM.
• Diffing Algorithm: React compares the new Virtual DOM with the previous one to detect changes using a fast diffing algorithm.
• Batch Updates: React groups multiple changes together and applies them in batches to reduce unnecessary re-renders.
• Faster Updates: By minimizing direct manipulation of the real DOM, React ensures that updates are faster and more efficient.
• Declarative UI: Developers describe the UI state, and React takes care of updating the DOM using the Virtual DOM mechanism behind the scenes.

The Real DOM and the Virtual DOM represent different approaches to updating and rendering the user interface in web applications. React uses the Virtual DOM to enhance performance by reducing costly direct DOM manipulations. Below is a detailed comparison between the two:

JSX (JavaScript XML) is a syntax extension to JavaScript used in React for describing what the UI should look like. It allows developers to write HTML-like code within JavaScript, which is then transformed into standard JavaScript objects using tools like Babel.

JSX makes it easier to write and visualize the component structure, especially when working with complex UIs. It is not necessary to use JSX in React, but it is highly recommended because of its readability and cleaner syntax.

Key Features of JSX:

• Allows embedding HTML directly in JavaScript code.
• Improves readability and maintainability of component code.
• JavaScript expressions can be embedded using curly braces {}.
• JSX elements must have only one parent element.
• JSX is transpiled to React.createElement() calls.

Example of JSX:

const name = "Learner";
const element = (
    <h1>
        Hello, {name}. Welcome to GeeksforGeeks.
    </h1>
);

In the example above, {name} is a JavaScript expression embedded inside JSX. During rendering, React evaluates this expression and inserts its value into the output.

Browsers cannot directly understand or execute JSX because JSX is not a valid JavaScript syntax. JSX is a syntax extension used in React to describe how the user interface should look. It closely resembles HTML but is embedded within JavaScript code.

To make JSX browser-compatible, it must first be transpiled into regular JavaScript. This process is handled by tools like Babel, which converts JSX into standard JavaScript calls, usually React.createElement(). These JavaScript calls return plain JavaScript objects called React elements, which React then uses to update the real DOM efficiently.

Workflow:

• You write JSX in your React components.
• Babel transpiles the JSX into JavaScript (React.createElement calls).
• The browser executes the transpiled JavaScript code.
• React uses the resulting objects to create and manage DOM elements.

Conclusion: JSX is not understood by browsers natively. It needs to be compiled using a transpiler like Babel into standard JavaScript, which the browser can then interpret and execute. This compilation step is typically handled behind the scenes in modern React development environments such as Create React App.

A Component is one of the fundamental building blocks of a React application. Components allow developers to split the UI into independent, reusable pieces that can be managed separately. Each component can maintain its own logic and structure, and when combined, they form the complete user interface of the application.

React encourages building UIs using components because they promote reusability, better organization, and cleaner code architecture.

Types of Components in React:

1. Functional Components

Functional components are simple JavaScript functions that return JSX. They are easy to write and understand. Initially, functional components were stateless and could not use lifecycle methods, but with the introduction of Hooks, they can now handle state, side effects, and other advanced features.

Features of Functional Components:

• Stateless or stateful with the use of hooks like useState and useEffect.
• Simpler syntax and cleaner code structure.
• Preferred in modern React development due to better performance and readability.

2. Class Components

Class components are ES6 classes that extend React.Component. They have access to additional features such as local state and lifecycle methods (e.g., componentDidMount, shouldComponentUpdate). They are more verbose than functional components but were widely used before Hooks were introduced.

Features of Class Components:

• Have their own local state and lifecycle methods.
• Can pass data via props and access context just like functional components.
• More boilerplate compared to functional components.

Conclusion: Both functional and class components can be used to build React applications, but functional components with Hooks are now the standard approach in modern React development due to their simplicity, power, and better performance.

To install React and display a basic 'Hello World' message, the first step is to ensure that Node.js and npm are installed on the system. With the latest recommendations, the preferred method to create a new React application is by using the Vite build tool, which offers faster performance and a modern setup.

To create a new project using Vite, open the terminal and run the following command:

npm create vite@latest

After executing the command, the CLI will prompt to enter the project name and select the framework. Choose React and the preferred variant (JavaScript or TypeScript).

Once the setup is complete, navigate to the project directory:

cd <Application_Name>

Install the dependencies using:

npm install

Then start the development server with:

npm run dev

To display 'Hello World', open the App.jsx or App.js file and replace the component code with the following:

import React from "react";
import "./App.css";

function App() {
    return <div className="App">Hello World!</div>;
}

export default App;

Upon saving the file, the browser will reload automatically and display the message 'Hello World!' confirming that the React setup is working correctly.

In React, creating an event involves attaching an event handler to a JSX element using props such as onClick, onChange, onSubmit, etc. React’s event handling system is similar to the DOM but follows the camelCase naming convention and works with synthetic events, which are cross-browser wrappers around the native event.

To implement an event, define a function that specifies the logic to be executed when the event is triggered. This function can handle actions like updating the state, preventing default behavior, or executing any other custom logic.

For example, to create a simple click event:

function Component() {
  const handleClick = (e) => {
    e.preventDefault();
    // Custom logic here
    console.log("Button clicked!");
  };

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

Here, handleClick is invoked when the button is clicked. The e.preventDefault() prevents the default browser behavior, which is useful in form submissions or link clicks. React ensures efficient event handling by managing event delegation under the hood.

The render() method in React is used in class-based components to define the UI that should be displayed on the screen. It returns a React element, typically written in JSX, which represents the component’s visual structure. The method reads the component’s current props and state to dynamically render content, and every time there is a change in state or props, the render() method is called again to update the UI accordingly. This ensures that the DOM reflects the most recent data and provides a seamless user experience.

In React, state refers to an object that stores dynamic data specific to a component and determines its behavior and rendering. It is mutable, meaning it can change over time, usually in response to user actions or events, and when the state changes, React automatically re-renders the component to reflect those changes in the UI. State is typically managed internally within the component and is essential for building interactive and data-driven interfaces, allowing components to update and maintain their own data without relying solely on props.

In React, props (short for properties) are used to pass data from one component to another, most commonly from a parent component to its child. They allow components to be dynamic and configurable without modifying the internal logic of the component itself. Props are passed as attributes in JSX and received as parameters in functional components or accessed via this.props in class components. They are immutable, meaning a child component cannot change the props it receives, maintaining the unidirectional data flow in React.

Example using Functional Component:

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

function App() {
  return <Welcome name="John" />;
}

In the example above, the name prop is passed from App to Welcome, and the child component displays the value using {props.name}.

Example using Class Component:

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

class App extends React.Component {
  render() {
    return <Welcome name="Jane" />;
  }
}

Props help create flexible, reusable components by allowing them to receive values dynamically and render content accordingly.

In React, a Higher-Order Component (HOC) is a design pattern used to reuse component logic. It is a function that takes a component as an argument and returns a new component with enhanced capabilities. HOCs do not modify the original component but wrap it within another component, allowing shared behavior like logging, access control, or data fetching to be abstracted out and reused across multiple components. This approach promotes code reuse, separation of concerns, and simplifies the logic within components by moving common functionality to the HOC.

Syntax Example:

function withLogger(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Props:', props);
    return <WrappedComponent {...props} />;
  };
}

Here, withLogger is a higher-order component that logs props and returns the original component with its props. This allows developers to inject additional logic without modifying the base component.

In React, one-way data binding refers to the unidirectional flow of data, where data moves from parent components to child components through props. This design means that child components cannot directly modify the data they receive from their parent. Instead, any changes required in the data must be handled at the parent level and passed down again via updated props. This controlled data flow ensures that the application's state is predictable, easier to debug, and less prone to errors. One-way data binding helps maintain consistency in large-scale applications by clearly defining how data should be passed and updated across components.

React Router is a standard library used for routing in React applications. It enables navigation between different components, allows dynamic URL changes, and ensures that the UI stays in sync with the browser’s address bar. React Router helps manage multiple views or pages in single-page applications (SPA) without reloading the entire page.

It provides several components like <BrowserRouter>, <Routes>, <Route>, <Link>, and others that simplify the creation of client-side routing functionality. With React Router, developers can define specific paths and associate them with the corresponding components, enabling users to navigate seamlessly throughout the app.

Installation Command:
npm i react-router-dom

React Router consists of several key components that help implement routing in a React application. These components work together to manage navigation, render specific components based on the URL, and create navigable links within the app.

1. Router (usually BrowserRouter): This is the top-level component that wraps the entire routing logic of your application. It listens to URL changes and provides the routing context to its children. Typically, BrowserRouter is used for web applications that use the HTML5 history API.

2. Switch: The Switch component ensures that only the first matching Route is rendered. It prevents multiple components from rendering when more than one path could match the URL. Note: In React Router v6, Switch has been replaced by Routes.

3. Route: The Route component is responsible for rendering a specific component when the path in the URL matches the route's path. It checks the current browser location and renders the appropriate UI.

4. Link: The Link component is used to create navigation links within the application. Unlike traditional anchor tags, Link prevents page reloads and uses the history stack to navigate between views, offering a smooth single-page application experience.

In React, every class component goes through a series of phases known as the component lifecycle. These stages define how a component is created, updated, and destroyed within an application.

1. Initialization: This is the initial phase where the component is being constructed. It involves setting up initial state and binding event handlers, typically done inside the constructor method. Props are also received during this stage.

2. Mounting: In this phase, the component is inserted into the DOM. React calls lifecycle methods like componentDidMount() after the component has been rendered. It is typically used for making API calls, setting up subscriptions, or interacting with the DOM.

3. Updating: Whenever the component's state or props change, it re-renders. Lifecycle methods such as shouldComponentUpdate(), componentDidUpdate(), and getDerivedStateFromProps() can be used to control or react to the update process.

4. Unmounting: This is the final phase where the component is removed from the DOM. The componentWillUnmount() method is called, which is typically used to clean up resources like timers, event listeners, or network requests.

React’s lifecycle methods allow developers to manage how and when components appear, update, and disappear within an application, offering precise control over behavior and performance.

The mounting phase in React refers to the stage where a component is created and inserted into the DOM for the first time. During this phase, specific lifecycle methods are invoked to allow developers to perform operations before and after the component appears on the screen.

componentWillMount(): This method is called just before the component is mounted to the DOM. It was used to perform preparations before the initial render, such as setting initial state or making synchronous operations. However, this method is now considered unsafe and deprecated in modern versions of React.

componentDidMount(): This method is called immediately after the component is mounted to the DOM. It is commonly used for operations like fetching data from an API, initializing libraries, setting timers, or adding event listeners. It ensures that the component is fully loaded and accessible in the DOM before any additional actions are performed.

These lifecycle methods help control behavior during the initial render and ensure that side effects are handled in a predictable and controlled manner.

Hooks are functions introduced in React 16.8 that allow developers to use state and other React features in functional components without the need for class-based components. They offer a cleaner and more concise way to handle logic such as state management, side effects, context access, and more. Hooks align with existing React concepts and provide direct access to features like props, state, refs, and lifecycle methods within functional components.

useState Hook: The useState() hook is used to declare and manage state variables inside functional components. It returns an array containing the current state and a function to update it. When the state is updated using the provided setter function, React re-renders the component to reflect the updated state.

Syntax:

const [state, setState] = useState(initialState);

• state: The current value of the state variable.
• setState: A function used to update the state.
• initialState: The default value assigned to the state variable.

useEffect Hook: The useEffect() hook is used to perform side effects in functional components, such as data fetching, event listeners, or manually modifying the DOM. It serves as a replacement for lifecycle methods like componentDidMount(), componentDidUpdate(), and componentWillUnmount() in class components.

Syntax:

useEffect(() => {
    // code to run on component mount or update
}, [dependency]);

• The function runs after the component renders.
• The optional dependency array determines when the effect should re-run. If it’s empty, the effect runs only once on mount.

Using useState and useEffect together allows developers to effectively manage state and side effects in modern React functional components.

Prop drilling in React refers to the process of passing data from a parent component down through multiple levels of nested child components, even if intermediate components do not need to use that data. It typically occurs when a deeply nested component needs data from a high-level ancestor, and that data has to be passed through all components in between.

Disadvantages of Prop Drilling:

• Redundant Code: Intermediate components have to declare props they do not use, which leads to cluttered and less maintainable code.
• Tight Coupling: Components become tightly coupled, reducing modularity and reusability because their functionality becomes dependent on props passed from ancestors.
• Scalability Issues: As the application grows, managing and tracing prop flow becomes difficult, especially in large component trees.
• Increased Complexity: Debugging and refactoring become more complex due to the dependency on many levels of props.

To solve this, React provides alternatives such as Context API or state management libraries like Redux, which allow components to access shared data directly without passing it through every level in the tree.

Conditional rendering in React is a technique used to display different UI elements or components based on specific conditions. This allows developers to dynamically control what is displayed on the screen depending on factors such as user authentication, permissions, data availability, or application state.

React uses JavaScript's conditional statements and expressions (like if, ternary operators, and &&) within JSX to achieve this. This makes the UI more dynamic and responsive to user interactions and application logic.

Example:

const isLoggedIn = true;
return (
  <div>
    {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
  </div>
);

In this example, the component conditionally renders either a Logout or Login button based on the isLoggedIn state. This is an efficient way to manage dynamic content in a React application.

Custom Hooks in React are JavaScript functions that allow you to extract and reuse stateful logic between multiple components. They enable better code reuse, cleaner components, and separation of concerns by moving logic into isolated, testable functions.

Custom Hooks are built using the built-in React hooks like useState, useEffect, useRef, etc., and follow the naming convention of starting with the word use. This ensures React understands the function is a hook and applies its rules accordingly.

For example, if you have multiple components fetching data from an API, instead of duplicating the same logic in every component, you can create a custom hook like useFetch and use it wherever needed.

Benefits of Custom Hooks:

• Promotes code reuse and consistency across components
• Keeps components clean and focused on UI logic
• Makes complex logic easier to test in isolation

Custom Hooks do not add any new functionality to React, but they help in organizing and managing logic in a modular way, improving maintainability and scalability of applications.

Optimizing React code is essential to enhance performance, improve load times, and provide a smoother user experience. There are several best practices that developers can follow to ensure their React applications run efficiently and are maintainable at scale.

Key optimization techniques include:

• Binding Functions in Constructors: For class-based components, binding event handlers in the constructor instead of during render prevents the creation of new function instances on every re-render.
• Avoiding Inline Functions and Attributes: Inline functions and JSX attributes can lead to unnecessary re-renders. It's better to define these functions outside the render method or use memoization techniques.
• Using React Fragments: Instead of adding extra <div> elements, use <React.Fragment> (or shorthand <></>) to group multiple elements without adding extra nodes to the DOM, which keeps the DOM structure clean and efficient.
• Lazy Loading: React supports lazy loading of components using React.lazy() and Suspense, which delays loading components until they are needed, improving the initial load time of the application.
• Using React.memo and useCallback: For functional components, React.memo helps prevent re-rendering when props haven't changed, and useCallback memoizes callback functions to avoid unnecessary re-creations.
• Implementing Code Splitting: Splitting code using dynamic import() statements ensures that large bundles are broken into smaller chunks that load on demand.

Following these practices leads to cleaner, faster, and more scalable React applications.

React-Redux is an official React binding library for Redux, a state management tool. It allows React components to read data from a centralized store and dispatch actions to update that store. React-Redux helps manage the global state of a React application efficiently, especially when multiple components need to access and modify shared data.

As applications grow and become more complex, passing state manually through props becomes cumbersome and error-prone. React-Redux solves this problem by providing a structured and scalable way to manage and share state across components, regardless of their position in the component tree.

Benefits of using React-Redux:

• Centralized State Management: It maintains a single source of truth by storing the application state in one global store, making it easier to manage and maintain.
• Improved Performance: React-Redux uses shallow comparisons and subscription mechanisms to minimize unnecessary re-renders, improving overall performance.
• Easier Debugging: Since the state and changes are centralized and predictable, tools like Redux DevTools make it easier to track and debug application state.
• Persistent State: React-Redux can be integrated with middleware to persist state across sessions, enabling better user experiences and offline support.

Overall, React-Redux simplifies state management, enhances maintainability, and improves the scalability of React applications.

React-Redux integrates Redux, a predictable state container, with React. It allows components to access and manipulate a global state using a unidirectional data flow. There are four core components that define how data is managed and propagated in a React-Redux application:

• Redux Store: The store is a central object that holds the entire application state. It is created using the createStore() function and allows components to access the current state or subscribe to updates. The store serves as the single source of truth for the application's state.
• Actions: Actions are plain JavaScript objects that describe what happened in the application. They must have a type property that describes the action being performed. Optionally, they may contain a payload that provides additional information about the action.
• Action Creators: Action creators are functions that return action objects. They encapsulate the logic for creating actions and help keep the code more modular and reusable. For example: const addUser = (user) => ({ type: 'ADD_USER', payload: user });
• Reducers: Reducers are pure functions that determine how the application's state should change in response to actions. They take the current state and an action as arguments, and return a new state. Reducers should be side-effect-free and predictable.

Together, these components create a structured and efficient way to manage state in large-scale React applications by ensuring clear data flow and consistent state updates.

Cross-Origin Resource Sharing (CORS) in React refers to a security feature implemented by web browsers that restricts web pages from making requests to a domain different from the one that served the web page. This is a common scenario in React applications where the frontend and backend are hosted on different domains or ports during development.

When a React app tries to fetch data from an external API or backend server located on another origin (domain, protocol, or port), the browser enforces the Same-Origin Policy, which blocks the request unless the server explicitly allows it via CORS headers.

To resolve CORS issues in React, developers typically configure the server to include appropriate CORS headers such as Access-Control-Allow-Origin. On the frontend, requests can be made using tools like Axios or the native Fetch API.

For example, using Axios:

axios.get('http://api.example.com/data')
  .then(response => console.log(response))
  .catch(error => console.error(error));

It’s important to note that CORS is enforced by the browser and must be handled by the backend server through proper configuration. React itself does not control or disable CORS.

Axios is a popular JavaScript library used to make HTTP requests from the browser or Node.js. In React applications, Axios is commonly used to perform asynchronous operations such as fetching, posting, updating, or deleting data from external APIs or backend services. It simplifies the process of handling HTTP requests and responses, and supports Promises, which makes it ideal for modern asynchronous JavaScript workflows.

Axios is widely used because of its simple syntax, support for interceptors, automatic transformation of JSON data, and ability to handle request and response objects in a cleaner way compared to the native fetch() method.

To install Axios in a React project, use the following command:

npm i axios

Once installed, Axios can be used as follows:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

In summary, Axios makes it easier to communicate with APIs in a React app and is especially helpful when working with complex APIs and requiring additional configuration like headers or authentication tokens.

In React, updating the state using a callback function is recommended when the new state depends on the previous state. This is because setState() is asynchronous, and multiple state updates may be batched together for performance improvements. Using a callback ensures that the state is always updated based on the latest state value, avoiding potential bugs that occur when relying on outdated state snapshots.

The callback-based syntax for setState() provides a reliable way to access the previous state and compute the new one. This approach is particularly useful in situations involving counters, toggles, or any logic that modifies state conditionally based on its current value.

Example syntax:

this.setState(prevState => ({
    count: prevState.count + 1,
    isActive: !prevState.isActive
}));

Using this method improves code reliability and predictability, especially in scenarios where multiple state updates happen in quick succession or are triggered within asynchronous operations.

Memoization in React is a performance optimization technique that helps prevent unnecessary re-renders of components or re-computations of values by caching the results of previous function calls. If the inputs to a function or component remain unchanged, memoization allows React to return the cached result instead of recalculating or re-rendering, thereby improving the efficiency of the application.

This technique is particularly valuable when dealing with expensive operations or components that rely on complex calculations or rendering logic. By avoiding redundant work, memoization helps reduce rendering time and boosts the overall performance of the app.

? How Memoization Works in React:

• React.memo(): A higher-order component (HOC) that memoizes a functional component, preventing re-renders if the props haven't changed.
• useMemo(): A React hook that memoizes the return value of a computation, recomputing the result only when its dependencies change.

Example using useMemo():

const expensiveValue = useMemo(() => {
    return computeHeavyTask(input);
}, [input]);

Memoization is a powerful tool to optimize React performance, but it should be used judiciously. Overusing it or applying it to trivial operations can increase memory usage and code complexity without much benefit.