React Basic Interview Questions

In this article, we will cover the most commonly asked basic React interview questions along with their answers. These questions will help us understand the fundamental concepts of React and will help to test our basic knowledge of React.

Remember, these looks pretty basics but sometimes even experienced developers may not be able to answer them correctly.

Also one question may lead to another question. So make sure to read the complete article to get the full understanding of the concepts.

So lets get started with the first question which is “What is React?”

What is React?

React is:

• A JavaScript library for building UI (user interfaces) applications.
• Component based UI library which helps in composing complex UIs into small and reusable components.
• It works on concept of Virtual DOM and JSX (JavaScript XML).

then next question comes up like what is JSX or what is Virtual DOM.

What is JSX?

JSX stands for JavaScript XML.

• It is extension to JavaScript and used in React to describe what the UI should look like.
• It allows us to write HTML in Javascript like syntax which makes it easier to create UI components. For Example: if we want to create a simple heading element in React using JSX, we can write:

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

As we can see above code looks like HTML but it is actually JavaScript code.

• Then React will convert this JSX into React.createElement() calls which returns plain JavaScript objects called React elements. Like the above JSX code will be converted to:

const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!",
);

• And those React elements are then displayed to the DOM and displayed on the screen. Like above code will render an h1 tag with text “Hello, world!” on the Browser screen.

What is React Element?

• A React element is a plain JavaScript object that represents a DOM node or a component instance.
• React elements are created using React.createElement() method or JSX syntax.
• React elements are immutable, meaning once they are created, they cannot be changed. If we want to update the UI for an element, we need to create a new React element.
• React element is maintained and updated by React library to efficiently update the DOM when the state of the application changes.
• so we do not need to worry too much about how to update the DOM manually.
• Example with JSX:

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

• Equivalent using React.createElement():

const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!",
);

Can we directly use React.createElement() method to create elements instead of using JSX?

• Yes, we can directly use React.createElement() method to create elements instead of using JSX.
• But then we will need to handle state changes and UI updates manually which can be complex and error-prone.
• Instead React library recommends using JSX syntax as it is more concise and easier to understand.

What is React Component?

• A React component is a class or function that returns a React element to be displayed to the Browser screen.
• Components accepts inputs called “props” from the parent component and also can have their own internal state to manage data and method to handle events specific to that component.
• Components helps us divide the complete UI into small, reusable pieces which makes it easier to manage and maintain the code.
• For example:

function Welcome(props) {
  return <h1>Hello World!</h1>;
}

What is the difference between React Element and React Component?

• A React element is a plain JavaScript object that represents a DOM node or a component instance, while a React component is a class or function that returns a React element or a group of React elements to be displayed.
• React elements are immutable and cannot be changed once created, while React components can have their own internal state and methods to handle events so their output can change based on the state and props.
• React elements are created using React.createElement() method or JSX syntax, while React components are defined using class or function syntax of JavaScript.

How Does React Work?

• React creates a copy of the actual DOM called Virtual DOM.
• When the state of a component changes, React updates the Virtual DOM first instead of directly updating the real DOM.
• Then React compares the new Virtual DOM with the previous version and calculates the most efficient way to update the real DOM.
• This process is called reconciliation and it helps in improving the performance of the application by minimizing direct manipulation of the real DOM.

What is DOM?

DOM stands for Document Object Model.

• Every HTML document is represented as a tree structure in the browser called DOM.
• It is an interface that allows programming languages like JavaScript to manipulate the structure, style, and content of web documents.
• Each element in the HTML document is represented as a node in the DOM tree, and JavaScript can be used to access and modify these nodes to dynamically change the content and appearance of a web page.

What is Virtual DOM?

• Virtual DOM is a lightweight copy of the actual DOM (Document Object Model).
• It is a React concept where a virtual representation of the actual DOM is kept in browser memory and synced with the real DOM by a library called ReactDOM.
• When the state of a component changes, React updates the Virtual DOM first instead of directly updating the real DOM.
• Then React compares the new Virtual DOM with the previous version and calculates the most efficient way to update the real DOM.
• This process is called reconciliation and it helps in improving the performance of the application by direct manipulation of the real DOM.

How Virtual DOM works in React?

The working of Virtual DOM in React can be explained in the following steps:

1. Initial Render: When a React application is loaded for the first time, React creates a Virtual DOM representation of the actual DOM and renders it to the browser screen.
2. State or Prop Change: When the state or props of a component change, React creates a new Virtual DOM representation of the updated component.
3. Diffing Algorithm: React then compares the new Virtual DOM with the previous version using a diffing algorithm to identify the changes that need to be made to the real DOM.
4. Reconciliation: Based on the differences identified in the previous step, React calculates the most efficient way to update the real DOM and applies those changes.
5. Update Real DOM: Finally, React updates the real DOM with the calculated changes, resulting in a smooth and efficient user interface update.

What is one way data binding in React?

• One way data binding means that the data flows in a single direction, from parent component to child component.
• In React, the parent component passes data to the child component through a special property called “props”.
• The child component can then use this data to render its UI, but it cannot modify the data directly.
• This helps in maintaining a clear separation of concerns and makes it easier to manage the state of the application.
• If the child component needs to update the data, it can do so by calling a function which is passed to it as a prop from the parent component.