Top Most 100 Commonly Asked Questions in React JS for Interview

5/5 - (1 vote)

Table of Contents

Introduction

React JS is a popular JavaScript library used for building user interfaces. Its flexibility, performance, and community support have made it a sought-after skill for developers. If you’re preparing for a React JS interview, you’ve come to the right place. This article compiles the top 100 commonly asked questions in React JS interviews to help you gain confidence and excel in your interview.

Top Most 100 Commonly Asked Questions in React JS

What is React JS?

React JS, often referred to as React or React.js, is an open-source JavaScript library for building user interfaces or UI components.

LSI Keywords: React, open-source, JavaScript library, user interfaces, UI components.

React JS has gained immense popularity due to its component-based architecture and virtual DOM rendering, which enables efficient and faster UI updates.

What are the major features of react?

React, a popular JavaScript library for building user interfaces comes with several major features that make it powerful and widely adopted in web development. Here are some of the key features of React:

Component-Based Architecture: React follows a component-based architecture, allowing developers to build user interfaces by breaking them into reusable and self-contained components. These components can be composed together to form complex UIs, making the code more maintainable and modular.
Virtual DOM: One of React’s core features is the Virtual DOM. It is a lightweight copy of the actual DOM that React uses for reconciliation. When the state of a component changes, React creates a new Virtual DOM representation, compares it with the previous one, and calculates the minimum number of changes needed to update the actual DOM efficiently. This approach significantly improves performance and reduces unnecessary DOM manipulations.
JSX (JavaScript XML): React uses JSX, which is an XML-like syntax extension for JavaScript. It allows developers to write UI components using a familiar HTML-like syntax combined with JavaScript logic. JSX makes it easier to reason about the structure of UI components and facilitates the rendering of components with data.
React Hooks: As mentioned earlier, React introduced hooks to enable the use of state and other React features in functional components. With hooks, developers can manage state, perform side-effects, and use context and other features without writing class components. This simplifies code and encourages functional programming practices.
One-Way Data Binding: React enforces a one-way data flow, meaning data flows from parent components to child components. This ensures predictable and maintainable data flow, as changes in parent components won’t directly affect child components, avoiding unwanted side effects.
Unidirectional Data Flow (Flux): While React itself doesn’t enforce a specific data management pattern, it works seamlessly with unidirectional data flow patterns like Flux and Redux. These patterns provide a clear data flow structure, making it easier to manage state in large applications.
React Router: React Router is a popular library for implementing client-side routing in React applications. It allows developers to create single-page applications with multiple views and handles URL navigation without requiring a page reload.
Performance Optimization: React is designed with performance in mind. Its Virtual DOM and efficient reconciliation algorithm help minimize DOM updates, leading to faster rendering and improved user experience.
Community and Ecosystem: React has a vast and active community of developers, which has led to a rich ecosystem of third-party libraries, tools, and extensions. This makes it easier for developers to find solutions to common problems and accelerates development.

These major features have contributed to the success and widespread adoption of React, making it a go-to choice for building modern, interactive, and efficient user interfaces on the web.

How does React JS differ from other JavaScript frameworks?

React JS differs from traditional JavaScript frameworks in the following ways:

Component Reusability: React focuses on building reusable UI components, making it easier to manage complex UI structures.Virtual DOM: React’s virtual DOM efficiently updates only the necessary changes, leading to better performance.Learning Curve: React’s straightforward syntax and modular approach reduce the learning curve for developers.

LSI Keywords: Component Reusability, Virtual DOM, Learning Curve.

What is JSX, and why is it used in React JS?

JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within their JavaScript files. It simplifies the creation of React elements and enables developers to define components using familiar HTML-like tags.

LSI Keywords: JSX, syntax extension, React elements, components.

JSX is transpiled to JavaScript code by tools like Babel, making it compatible with all major browsers and ensuring optimal performance.

What is the difference between element and component?

In the context of React, “element” and “component” are two fundamental concepts that play different roles in building user interfaces. Let’s explore the difference between them:

Element: An element in React represents a plain JavaScript object that describes what you want to see on the screen. It is a lightweight and immutable description of a component’s structure and attributes. Elements are typically created using JSX (JavaScript XML) syntax, which is a mixture of JavaScript and HTML-like syntax. Here’s an example of a React element:

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

The above code creates an element representing an <h1> heading with the text “Hello, world!”. However, the element itself is not yet a fully functional component. It’s merely a description of what you want to render on the screen.

Component: A component, on the other hand, is a reusable and self-contained building block of a React application. It encapsulates both the logic and the rendering of a part of the user interface. Components can be written as functions or classes. Components are like JavaScript functions that accept inputs (called “props”) and return React elements representing the UI. Here’s an example of a functional component:

import React from 'react';

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

In this example, Greeting is a functional component that takes a name prop as input and returns a React element with a personalized greeting.

To summarize:

An element is a plain JavaScript object that represents the description of what you want to render.
A component is a function or class that takes inputs (props) and returns elements, making it a reusable building block of a React application.

In practice, you create components to encapsulate your UI logic and rendering, and you use elements to represent the actual instances of those components in your application’s user interface.

how to create components in react?

To create a component in React, you have two main options:

functional components and class components.

Functional components are simpler and more commonly used in modern React development. Class components are an older approach, but they are still valid and may be required for some specific use cases or in legacy codebases.

When to use a class component over a functional component in react?

the decision to use a class component or a functional component in React depends on your specific use case and the requirements of your project. However, it’s important to note that functional components, using React hooks, have become the preferred and more modern way to build components in React. Nevertheless, there are still some scenarios where using a class component might be necessary or beneficial:

Legacy Code: If you are working on a legacy codebase or an older React project, you may encounter class components. In such cases, you might need to continue using class components for consistency and maintainability.
Lifecycle Methods: Class components allow you to use React’s lifecycle methods, such as componentDidMount, componentDidUpdate, and componentWillUnmount. If your component relies heavily on these lifecycle methods, and the functionality is difficult to achieve with React hooks, you may consider using a class component.
Local State with setState: Class components use the setState method to manage local state. If you need to manage complex state updates with setState, a class component might be more appropriate, although with React hooks and the useState hook, most state management scenarios can be effectively handled in functional components as well.
Refs: If you need to interact directly with the DOM or manage focus and text selection, class components offer more flexibility with the use of refs. However, be cautious with using refs as they can lead to more imperative and less declarative code.
Performance Optimization: In some edge cases, using class components might provide slight performance benefits in certain scenarios due to differences in internal React optimizations. However, the difference in performance is usually negligible and may not be a significant factor for most applications.
Inheritance: Class components support inheritance, which can be beneficial in certain situations, especially when working with third-party libraries that extend from React.Component.

For new projects and in most cases, it is recommended to use functional components with React hooks. Functional components are generally easier to read, write, and maintain. They encourage a more functional programming style, have better performance in certain scenarios, and are actively being improved and optimized by the React team.

If you encounter situations where you need to use a class component, consider if there is a valid reason for not using functional components with hooks. As React evolves, the need for class components is expected to decrease further, and the majority of React codebases will eventually transition to functional components.

Explain the concept of Virtual DOM in React JS.

Virtual DOM is a lightweight in-memory representation of the actual DOM. When a component’s state changes, React creates a new virtual DOM and compares it with the previous one.

LSI Keywords: Virtual DOM, lightweight, in-memory representation.

React identifies the difference between the two virtual DOMs (known as diffing) and calculates the most efficient way to update the actual DOM, minimizing unnecessary reflows and repaints.

How does React handle data flow within components?

React follows a unidirectional data flow, also known as one-way data binding. Data flows from parent components to child components via props.

LSI Keywords: Unidirectional data flow, one-way data binding, parent components, child components, props.

When a parent component’s state changes, it passes the updated data to its child components through props, triggering re-rendering of the affected components.

What are React hooks, and how do they work?

React hooks are a powerful feature introduced in React version 16.8 to allow functional components in React to use state and other React features without writing a class. They provide a more straightforward and concise way to manage state and side-effects in functional components, making the code cleaner and easier to maintain.

There are several built-in hooks in React, such as useState, useEffect, useContext, and more.

What is a pure component?

In React, “Pure Components” are a specific type of component that provide performance optimizations by automatically handling the shouldComponentUpdate method. The shouldComponentUpdate method is used to determine whether a component should re-render or not, based on changes in its props or state.

A regular component in React, also known as a “stateful component” or a “class component,” will re-render whenever its props or state change, regardless of whether the actual values have changed. This can lead to unnecessary re-renders and reduced performance, especially in large and complex applications.

However, a Pure Component implements a shallow comparison of its current props and state with the next props and state to determine if a re-render is necessary. If there are no changes in the shallow comparison, the component will not re-render. This optimization is particularly useful when dealing with components that have expensive rendering operations, helping to avoid unnecessary rendering and improving performance.

To create a Pure Component in React, you can either extend the React.PureComponent class or use the React.memo Higher-Order Component (HOC) with a functional component.

Using React.PureComponent (Class Component):

import React from 'react';

class MyPureComponent extends React.PureComponent {
  render() {
    // Your component rendering logic goes here
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        {/* Other JSX elements */}
      </div>
    );
  }
}

Using React.memo (Functional Component):

import React from 'react';

const MyPureComponent = React.memo((props) => {
  // Your component rendering logic goes here
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      {/* Other JSX elements */}
    </div>
  );
});

Both approaches achieve the same result: preventing unnecessary re-renders by performing shallow comparisons on the component’s props and state. It’s essential to use Pure Components judiciously, especially when dealing with components that receive frequently changing data or have expensive rendering operations. Keep in mind that using Pure Components does not replace the need for proper data management and efficient rendering strategies in your React application.

What is a state in React?

“state” is a fundamental concept that represents the mutable data within a component. It is an internal data store that keeps track of the component’s current state and allows the component to re-render when the state changes.

The state is used to manage data that can change over time and affect the rendering of the component. When the state of a component is updated, React will automatically re-render the component to reflect the changes in the user interface.

To use state in a React component, you typically initialize it in the constructor or use the useState hook in functional components.

What is a prop in react?

In React, “props” (short for properties) are a mechanism for passing data from a parent component to a child component. They allow components to communicate and share information with each other in a unidirectional manner.

When you create a component in React, you can define custom attributes (props) for that component, similar to HTML attributes. These props can be accessed and used within the component. Props are immutable, meaning they cannot be changed within the component that receives them.

To pass props to a component, you specify them as attributes when you use the component in the JSX code.

What is the difference between prop and state in react?

Props are used to pass data from a parent component to a child component, while the state is used to manage data within a component. Props are immutable and cannot be changed within a component, while the state is mutable and can be updated using the setState function.

What is Virtual DOM?

The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

How Virtual DOM works?

The Virtual DOM works in three simple steps.

Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
Then the difference between the previous DOM representation and the new one is calculated.
Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

Why should we not be able to change state directly in react?

The state of a component is managed internally by React. Updating the state of a component directly can have unintended consequences that can be difficult to debug. If the state is updated directly as in the example above, the component will not rerender since the state is compared shallowly.

What is the purpose of callback function as an argument of `setState()`?

The callback function is invoked when setState finished and the component gets rendered. Since setState() is asynchronous the callback function is used for any post action.Note: It is recommended to use lifecycle method rather than this callback function.setState({ name: “John” }, () => console.log(“The name has updated and component re-rendered”) );

What are the different phases of component lifecycle?

The component lifecycle has three distinct lifecycle phases:

Mounting: The component is ready to mount in the browser DOM. This phase covers initialization from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods.
Updating: In this phase, the component gets updated in two ways, sending the new props and updating the state either from setState() or forceUpdate(). This phase covers getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate() lifecycle methods.
Unmounting: In this last phase, the component is not needed and gets unmounted from the browser DOM. This phase includes componentWillUnmount() lifecycle method.

It’s worth mentioning that React internally has a concept of phases when applying changes to the DOM. They are separated as follows

Render The component will render without any side effects. This applies to Pure components and in this phase, React can pause, abort, or restart the render.
Pre-commit Before the component actually applies the changes to the DOM, there is a moment that allows React to read from the DOM through the getSnapshotBeforeUpdate().
Commit React works with the DOM and executes the final lifecycles respectively componentDidMount() for mounting, componentDidUpdate() for updating, and componentWillUnmount() for unmounting.

What are Higher-Order Components?

A higher-order component (HOC) is a function that takes a component and returns a new component. Basically, it’s a pattern that is derived from React’s compositional nature.

We call them pure components because they can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components.const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC can be used for many use cases:

Code reuse, logic and bootstrap abstraction.
Render hijacking.
State abstraction and manipulation.
Props manipulation.

How to write comments in React?

The comments in React/JSX are similar to JavaScript Multiline comments but are wrapped in curly braces.

Single-line comments:
<div>
 {/* Single-line comments(In vanilla JavaScript, the single-line comments are represented by double slash(//)) */} 
{`Welcome ${user}, let's play React`} 
</div>

Multi-line comments:<div> 
{/* Multi-line comments for more than one line */} 
{`Welcome ${user}, let's play React`} 
</div>

What is reconciliation?

Reconciliation is the process through which React updates the Browser DOM and makes React work faster. React use a diffing algorithm so that component updates are predictable and faster. React would first calculate the difference between the real DOM and the copy of DOM (Virtual DOM) when there’s an update of components. React stores a copy of Browser DOM which is called Virtual DOM. When we make changes or add data, React creates a new Virtual DOM and compares it with the previous one. This comparison is done by Diffing Algorithm. Now React compares the Virtual DOM with Real DOM. It finds out the changed nodes and updates only the changed nodes in Real DOM leaving the rest nodes as it is. This process is called Reconciliation.

Is lazy function supports named exports?

No, currently React.lazy function supports default exports only. If you would like to import modules which are named exports, you can create an intermediate module that reexports it as the default. It also ensures that tree shaking keeps working and don’t pull unused components. Let’s take a component file which exports multiple named components,

// MoreComponents.js
export const SomeComponent = /* … /; export const UnusedComponent = / … */;
and reexport MoreComponents.js components in an intermediate file IntermediateComponent.js

// IntermediateComponent.js
export { SomeComponent as default } from "./MoreComponents.js";
Now you can import the module using lazy function as below,

import React, { lazy } from "react";
const SomeComponent = lazy(() => import("./IntermediateComponent.js"));

What is the difference between HTML and React event handling?

Below are some of the main differences between HTML and React event handling,

In HTML, the event name usually represents in lowercase as a convention:<button onclick=”activateLasers()”></button>Whereas in React it follows camelCase convention:<button onClick={activateLasers}>In HTML, you can return false to prevent default behavior:<a href=”#” onclick=’console.log(“The link was clicked.”); return false;’ />Whereas in React you must call preventDefault() explicitly:function handleClick(event) { event.preventDefault(); console.log(“The link was clicked.”); }In HTML, you need to invoke the function by appending () Whereas in react you should not append () with the function name. (refer “activateLasers” function in the first point for example)

How to bind methods or event handlers in JSX callbacks?

There are 3 possible ways to achieve this in class components:

Binding in Constructor: In JavaScript classes, the methods are not bound by default. The same rule applies for React event handlers defined as class methods. Normally we bind them in constructor.class User extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log(“SingOut triggered”); } render() { return <button onClick={this.handleClick}>SingOut</button>; } }Public class fields syntax: If you don’t like to use bind approach then public class fields syntax can be used to correctly bind callbacks. The Create React App eanables this syntax by default.handleClick = () => { console.log(“SingOut triggered”, this); };<button onClick={this.handleClick}>SingOut</button>Arrow functions in callbacks: It is possible to use arrow functions directly in the callbacks.handleClick() { console.log(‘SingOut triggered’); } render() { return <button onClick={() => this.handleClick()}>SignOut</button>; }

Note: If the callback is passed as prop to child components, those components might do an extra re-rendering. In those cases, it is preferred to go with .bind() or public class fields syntax approach considering performance.

What is “key” prop and what is the benefit of using it in arrays of elements?

A key is a special attribute you should include when mapping over arrays to render data. Key prop helps React identify which items have changed, are added, or are removed.

Keys should be unique among its siblings. Most often we use ID from our data as key:const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:const todoItems = todos.map((todo, index) => ( <li key={index}>{todo.text}</li> ));

Note:

Using indexes for keys is not recommended if the order of items may change. This can negatively impact performance and may cause issues with component state.
If you extract list item as separate component then apply keys on list component instead of li tag.
There will be a warning message in the console if the key prop is not present on list items.
The key attribute accepts either string or number and internally convert it as string type.

What is the use of refs?

The ref is used to return a reference to the element. They should be avoided in most cases, however, they can be useful when you need a direct access to the DOM element or an instance of a component.

Tough question asked in React Interview

I grabbed a few questions from different sources that have been floating in recent react interviews.

1. How can we fetch API data without using useEffect hook?
2. What are the security measures which should be considered during development?
3. Can we return setData inside a component?
4. Multiple useEffects in a same component?
5. Higher order components or custom hooks? Which approach will you follow.
6. Why do we need currying in JS? Explain with example.
7. Explain Array prototyping, generators.
8. Explain Middlewares in React which you have used?
9. Function closures and bind method difference.
10. Explain service and web workers.
11. Write a program to fetch real time data for a cricket/football match.
12. Statess components?
13. How do you fetch multiple APIs in a single time.
14. Interceptors in axios library?
15. React suspense?
16. How will you select between SSR and CSR for you application? What parameters will you consider.
17. What is A11y issues? How do you handle it?
18. Box model, CSS animation, SASS variables and mixins in CSS.
19. How authentication works with JWT?
20. What is selective hydration?
21. Crawlers, indexing a page and what are the ways?
22. Explain redux architecture.
23. How will you set redirects using axios library.
24. Different types of object creation.
25. Explain hoisting, TDZ.
26. Explain IIFE with example.
27. What is obj literal and JSON obj.
28. First class functions.
29. Error pages creation
30. Scopes in JS
31. Event Loop – Task/MicroTask Queues.
32. Second Largest numb from array without using Math, sort functions.
33. Synthetic events
34. Cookies, localStorage and sessionStorage
35. How Babel works?
36. Explain webpack, parcel and some of its features.
37. Challenges with react js
38. Memoization techniques, pure functions and pure components.
39. HTTP methods…explain
40. Call, apply and bind
41. Arrow functions, anonymous functions,this keyword
42. ES6 features.
43. Create a traingle using CSS
44. Explain rate limiting and write a small code to demonstrate.
45. ESLint and security plugins used in your proj?
46. CORS, CSP and XSS explain
47. Tree shaking, debouncing and throttling
48. Write a pgrm for form validation without using any library
49. Array operations
50. Nested array operations, flattening of an array likewise
51. Performance optimization techniques explain
52. Shallow and deep copy..explain how will you create it
53. Various hooks syntax useParam, useReducer, useQuery, useContext and many more.

Frequently Asked Questions (FAQs)

Q: Can I use React JS for server-side rendering?

A: Yes, React JS supports server-side rendering, enabling improved initial load times and search engine optimization (SEO) benefits.

Q: Is it necessary to use JSX in React applications?

A: While JSX is not mandatory, it significantly simplifies component creation and is widely used in React applications.

Q: How can I handle forms in React?

A: React provides controlled components to handle forms and manage form data through component state.

Q: What are React hooks, and how do they work?

A: React hooks are functions introduced in React 16.8 to allow functional components to use state and other React features.

Q: Can I use React to build mobile applications?

A: Yes, you can use React Native, a framework based on React, to build native mobile applications for Android and iOS.

Q: How can I optimize React app performance?

A: Optimizing React app performance involves techniques like code splitting, lazy loading, and using production builds.

Conclusion

In conclusion, this article has covered the top 100 commonly asked questions in React JS interviews, providing you with valuable insights into the world of React development. By mastering these concepts, you’ll be better prepared to showcase your expertise in React JS and stand out during your next interview. Remember to practice coding, explore real-world projects, and stay updated with the latest React trends to excel in your React JS journey.