React Interview Questions

React is a JavaScript library for building UI components using a component-based architecture. It uses the Virtual DOM to optimize updates, making applications faster.

JSX stands for JavaScript XML. It allows us to write HTML inside JavaScript and place them in the DOM without using functions like appendChild( ) or createElement( ).

As stated in the official docs of React, JSX provides syntactic sugar for React.createElement( ) function.

Note:- We can create react applications without using JSX as well.

Let’s understand how JSX works:

Without using JSX, we would have to create an element by the following process:

const text = React.createElement('p', {}, 'This is a text');
const container = React.createElement('div','{}',text );
ReactDOM.render(container,rootElement);

Using JSX, the above code can be simplified:

const container = (
  <div>
    <p>This is a text</p>
  </div>
);
ReactDOM.render(container, rootElement);

React Hooks are functions that let you use state and lifecycle methods in functional components without writing a class.

The most common hooks are:

1. useState: For managing state

2. useEffect: For handling side effects (like fetching data)

3. useContext: For using React Context API

The major features of React are:

1. Uses JSX syntax, a syntax extension of JS that allows developers to write HTML in their JS code.

2. It uses Virtual DOM instead of Real DOM considering that Real DOM manipulations are expensive.

3. Supports server-side rendering which is useful for Search Engine Optimizations(SEO).

4. Follows Unidirectional or one-way data flow or data binding.

5. Uses reusable/composable UI components to develop the view.

Props are used to pass data from one component to another. The state is local data storage that is local to the component only and cannot be passed to other components.

Here is the difference table of props and state In react:

The Virtual DOM in React is an in-memory representation of the actual DOM. It helps React efficiently update and render the user interface by comparing the current and previous virtual DOM states using a process called diffing.

How Virtual DOM Works:

1. Efficient Rendering: The Virtual DOM is an in-memory representation of the actual DOM that React uses to optimize the process of updating and rendering UI changes.

2. Diffing Algorithm: React compares the current and previous versions of the Virtual DOM using a diffing algorithm, identifying the minimal set of changes required to update the real DOM.

3. useContext: For using React Context API

4. Batch Updates: Instead of updating the real DOM immediately, React batches multiple changes to reduce unnecessary re-renders, improving performance.

5. Faster Updates: Since updating the real DOM is slow, React minimizes direct DOM manipulations by only making updates where necessary after comparing the Virtual DOM.

6. Declarative UI: With the Virtual DOM, React allows developers to write code in a declarative style, letting React handle when and how to efficiently update the UI.

A React Component can go through four stages of its life as follows.

1. Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.

2. Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.

3. Updating: Updating is the stage when the state of a component is updated and the application is repainted.

4. Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

The Model-View-Controller (MVC) framework is an architectural/design pattern that separates an application into three main logical components Model, View, and Controller. Each architectural component is built to handle specific development aspects of an application. It isolates the business, logic, and presentation layer from each other

There are two ways to write comments in React.

1. Multi-line comment: We can write multi-line comments in React using the asterisk format /* */.

2. Single line comment: We can write single comments in React using the double forward slash //.

React Router is a standard library for creating dynamic routes and navigation in React JS Applications. It allows you to manage navigation in your app by defining routes that connect the URL paths to specific components.

With React Router, you can implement different views for different parts of your application without the need for a full-page refresh. This is a key feature of single-page applications (SPAs), where only the necessary content is updated as the user navigates.

The current latest verstion is React router dom v6.

Redux is a state management library that helps manage global state in React apps. It follows aunidirectional data flow.

1. Store - Holds the application state

2. Actions - Describe events happening in the app

3. Reducers - Update the state based on actions

React.memo() is a higher-order component (HOC) that prevents unnecessary re-renders by memorizing the previous props.

const MemoComponent = React.memo(({ name }) => {
console.log("Rendered");
return <h1>Hello, {name}</h1>;
});

There are four fundamental concepts of redux in react which decide how the data will flow through components

1. Redux Store: It is an object that holds the application state

2. Action Creators: These are functions that return actions (objects).

3. Actions: Actions are simple objects which conventionally have two properties- type and payload

4. Reducers: Reducers are pure functions that update the state of the application in response to actions

It is advised to use a callback-based approach to update the state using setState because it solves lots of bugs upfront that may occur in the future.We can use the following syntax to update state using callback

this.setState(st => {
  return(
      st.stateName1 = state1UpdatedValue,
      st.stateName2 = state2UpdatedValue
    )
})

The Context API is a way to pass data through the component tree without having to pass props down manually at every level. It is used when some data has to be accessed by many components at different nesting levels.

React Material UI is an open-source React component library, offering prebuilt components for creating React applications. Developed by Google in 2014, it’s compatible with JavaScript frameworks like Angular.js and Vue.js. Renowned for its quality designs and easy customization, it’s favored by developers for rapid development.

Flux architecture in Redux is a design pattern used for managing application state in a unidirectional data flow. In this architecture, actions are dispatched to modify the store, which holds the entire application state. The store sends the updated state to the view (UI), and the cycle repeats when new actions are triggered. Redux follows this structure to ensure a predictable and maintainable state management system for large applications.