TOP 20 REACT.Js QUESTIONS FOR ACING INTERVIEW

React is a JavaScript framework library that allows developers to create simple, fast, and scalable web applications. It is efficient, flexible, and open-source. React was developed by Jordan Walke, a Facebook software engineer. It was first used on Facebook’s news feed in 2011 and then on Instagram in 2012. React allows developers with a Javascript background to easily create web applications.

 

React Hooks allow you to use the state and other features of React without having to write your own class. React Hooks, in simple terms, are functions that connect React state with the lifecycle features of function components.

1. What distinguishes React from other frameworks?


JSX
A JavaScript syntax extension is JSX. It’s a term used in React to describe the appearance of the user interface. JSX allows us to write HTML structures in the same file as JavaScript code.

 

Components

Components: Components are the basic building blocks of any React application, and most apps are made up of a large number of them. It separates the user interface into reusable, self-contained sections that can be processed separately.

 

Object Model for Virtual Documents (DOM)
The virtual DOM is a lightweight replica of the real DOM that React keeps in memory. When the state of an object changes, virtual DOM only updates that object in the real DOM, not all of them.

 

Data binding in one direction
The one-way data binding in React keeps things simple and fast. When working on a React project, it’s common to nest child components within parent components due to the unidirectional data flow.


High-performance

React updates only the components that have changed, rather than all of them at once. As a result, online apps load much more quickly.

 

 

 

2. In React, what exactly is useState()?


useState() is a built-in React Hook that enables the use of state variables in functional components. It should be used whenever the DOM contains something that can be dynamically manipulated or controlled.

 

In the example code below, the useState(0) function returns a tuple with the count as the first parameter, which represents the counter’s current state, and the setCounter method as the second parameter, which allows us to change the counter’s state.

				
					...
const [count, setCounter] = useState(0);
const [otherStuffs, setOtherStuffs] = useState(...);
...
const setCount = () => {
   setCounter(count + 1);
   setOtherStuffs(...);
   ...
};

				
			

The setCounter() method can be used anywhere to update the state of a count. We’re using setCounter() inside the setCount method in this example, where we can do a variety of things. Hooks are useful because they allow us to keep our code more functional by avoiding the use of class-based components when they aren’t required.

 

 

 


3.  What are the React components?


Components are the basic building blocks of every React application, and most apps have a lot of them. A user interface element is referred to as a component. It separates the user interface into reusable, self-contained sections that can be processed separately.

 

Functional Components

Since they have no state of their own and only include render methods, these components are also known as stateless components. They can get data from other components such as props (properties).

				
					function Greeting(props) {
  return <h1>Welcome to {props.name}</h1>;
}

				
			

 

 

Class Components

These components can have their own state and render method for displaying JSX on the screen. They’re also known as Stateful components because they can have a state.

 

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

				
			

 

 

 

4. What is JSX?

 

JavaScript XML is abbreviated as JSX. It enables us to build HTML in JavaScript and insert it into the DOM without the need for operations like appendChild() or createElement() ( ).

 

JSX provides syntactic sugar for React, according to the official React documentation.

 

createElement() is a function that creates a new element.

 

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);

				
			

As one can see in the code above, we are directly using HTML inside JavaScript.

 

 

5. What is Virtual DOM? How does react use the virtual DOM to render the UI?

Virtual DOM, as defined by the react team, is a notion in which a virtual representation of the real DOM is retained in memory and is synchronised with the real DOM using a library like ReactDOM.

 Why was virtual DOM introduced in the first place?

Although DOM manipulation is an important aspect of every web application, it is quite sluggish when compared to other JavaScript activities. When several DOM operations are performed, the application’s efficiency suffers. Even if only a small portion of the DOM changes, most JavaScript frameworks update the entire DOM.

 

Consider the case of a list that is rendered within the DOM. If one of the items in the list changes, the full list is produced anew, rather than just the changed/updated item. This is referred to as “inefficient updating.”

 

The react team proposed the concept of virtual DOM to address the issue of inefficient updating.

What is the mechanism at work here?

Every DOM object has a copy (virtual DOM object) with the same properties as the original. The main difference between a real DOM object and a virtual DOM object is that the virtual DOM object does not affect the screen directly. A virtual DOM object is similar to a blueprint for a real DOM object. Every virtual DOM object is updated whenever a JSX element is rendered.

{It may appear that updating every virtual DOM object is inefficient, but this is not the case. Updating the virtual DOM is much faster than updating the real DOM because we are only changing the blueprint of the real DOM.}

Two virtual DOMs are used to render the user interface using React. In one, the items’ current state is saved, while in the other, the objects’ previous state is saved. When the virtual DOM is updated, React compares the two virtual DOMs to see which virtual DOM objects have changed. React renders only those objects within the real DOM instead of the entire real DOM after determining which items have been modified. Due to the use of virtual DOM, React is able to solve the problem of inefficient updating.

 

 

 

6. What are props in React?

Props are what a React component’s inputs are called. They can be single-valued or multi-valued objects that are passed to React components during the creation process using a naming pattern similar to HTML-tag attributes. Data transferred from a parent component to a child component is referred to as props.

 

Props’ primary function is to provide various component functionalities, such as:

  • assing custom data to the React component.

  • Using through this.props.reactProp inside render() method of the component.

  • Triggering state changes.

For example, consider we are creating an element with reactProp property as given below:

This reactProp name will be considered as a property attached to the native props object of React which already exists on each component created with the help of React library: props.reactProp;

 

 

 

7. In React, what is a higher-order component?

A higher-order component is a container for other components. This keeps the components simple and allows for reuse. When multiple components must share the same logic, they’re commonly used.

 

 

 

8.  Describe component lifecycle methods.

getInitialState(): This is called before the component is created.

When the component is rendered and placed on the DOM, componentDidMount() is called.

ComponentUpdate() is called when a component detects DOM changes and returns a “true” or “false” value depending on the circumstances.

componentDidUpdate() is called right after the rendering is finished.

componentWillUnmount() is called just before a component is permanently destroyed and unmounted.

 

 

 

9. What are React Hooks?

React Hooks are built-in functions that allow developers to use the state and lifecycle methods of React components. These are some of the new features in React 16.8. The lifecycle of a component is divided into three stages: mount, unmount, and update. Attributes and states are also available to components. Developers will be able to use hooks to improve code reuse while browsing the component tree with more freedom.

Hook allows you to take advantage of all of React’s features without writing any class components. Handling the state of a component, for example, required a class component prior to React version 16.8. Using the useState hook, we can now keep the state in a functional component.

 

 

 

10. Custom Hooks: What Are They?

A Custom Hook is a Javascript function that begins with the word “use” and calls other hooks. It’s part of the React v16.8 hook update, and it lets you reuse stateful behaviour without reorganising your component hierarchy.

In almost all cases, custom hooks are considered sufficient for replacing render props and HoCs (Higher-Order components) and reducing the amount of nesting required. Render Props and HoCs can lead to various layers of abstraction or wrapper madness, which Custom Hooks can help you avoid.

Custom Hooks have the disadvantage of not being used within classes.

 

 

 

11. What exactly is Redux?

Redux is a JavaScript library for managing an application’s state. Redux is used to create the user interface in React. It’s a state container for JavaScript applications that keeps track of the program’s progress.

 

 

12. What exactly is Flux?

Facebook’s application architecture for creating online applications is called Flux. It is a way of handling complex data inside a client-side application and governs how data flows in a React application.

There is only one data source (the store), and the only way to update it is to perform specific actions.

The activities trigger the dispatcher, which causes the store to be triggered and updated with its own data.

 

 

 

13. Is it possible to use AJAX with React?

Yes, you can use any AJAX library with React, including Axios and jQuery AJAX. Maintaining the states of the components is critical, and props are passed from the parents to the child components as well.

When dynamic data is considered, child components can still send props back to parents, which greatly improves rendering efficiency.

As a result, the store is triggered and updated with its own data.

 

 

14. In React, how are events created?

React makes it simple to create events, as shown here:

				
					class Display extends React.Component({
show(evt) {
// Code inside
},
render() {
// Render the div with an onClick prop (value is a function)
return (
<div onClick={this.show}>Click Here</div>
);
}
});

				
			

 

 

15. . In React, what is the purpose of an arrow function?

In React, an expression is written using an arrow function. It makes it simple for users to manually bind components. When working with higher-order functions, the functionality of arrow functions can be extremely useful.

 

Consider the following illustration:

 

The traditional method

				
					render() {
return(
<MyInput onChange={this.handleChange.bind(this) } />
);
}
//Making use of the arrow function
render() {
return(
<MyInput onChange={ (e) => this.handleOnChange(e) } />
);
}

				
			

 

 

16. In React, how does rendering work?

Rendering is a crucial part of React because each component must be rendered. The render() function is used to accomplish this. The function returns an element that represents a DOM component once it is called.

By enclosing the HTML tags and passing them through the render function, you can render multiple HTML elements at once.

 

17. Can JSX files be read by browsers?

Browsers are unable to read JSX files directly. It can only read the objects that JavaScript provides. To get a browser to read a JSX file, it must first be converted to a JavaScript object using JSX transformers, and then it can be fed into the browser for use in the pipeline.

 

 

 

18. What are the predefined prop types present in React?


There are five main predefined prop types in React. They are as follows:
PropTypes.bool
PropTypes.func
PropTypes.node
PropTypes.number
PropTypes.string
The propTypes can be defined for the user component as shown below:

				
					import PropTypes from 'prop-types';
class User extends React.Component {
render() {
return (
<h1>Welcome, {this.props.name}</h1>
<h2>Age, {this.props.age}
);
}
}
User.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired
};

				
			

19. What is React Fiber, exactly?

React Fiber is a new React engine. In React 16, it’s the reimplementation core algorithm.
React Fiber’s primary goal is to provide incremental rendering capabilities for the virtual DOM. This improves overall efficiency by increasing efficiency when rendering animations, gestures, and other updates, as well as assigning priority to updates based on the requirement.

 

 

 

20. What are the various styles for a React component?


A React component can be styled in many different ways. Some examples include:


Inline Styling: We can use inline style attributes to style an element directly. Ascertain that the style value is a JavaScript object:

				
					class RandomComponent extends React.Component {
 render() {
   return (
     <div>
       <h3 style={{ color: "Yellow" }}>This is a heading</h3>
       <p style={{ fontSize: "32px" }}>This is a paragraph</p>
     </div>
   );
 }
}

				
			

 

Using a JavaScript object: To set the desired style properties, we can create a separate JavaScript object. This object can be used as the inline style attribute’s value.

				
					class RandomComponent extends React.Component {
 paragraphStyles = {
   color: "Red",
   fontSize: "32px"
 };

 headingStyles = {
   color: "blue",
   fontSize: "48px"
 };

 render() {
   return (
     <div>
       <h3 style={this.headingStyles}>This is a heading</h3>
       <p style={this.paragraphStyles}>This is a paragraph</p>
     </div>
   );
 }
}

				
			

 

CSS Stylesheet: We can create a separate CSS file and write all the styles for the component inside that file. This file needs to be imported inside the component file.

				
					import './RandomComponent.css';
class RandomComponent extends React.Component {
 render() {
   return (
     <div>
       <h3 className="heading">This is a heading</h3>
       <p className="paragraph">This is a paragraph</p>
     </div>
   );
 }
}

				
			

 

CSS Modules: A separate CSS module can be created and imported into our component. Create a file with the extension “.module.css,” styles.module.css:

				
					.paragraph{
 color:"red";
 border:1px solid black;
}

				
			

We can use this file by importing it into the component:

				
					import styles from  './styles.module.css';

class RandomComponent extends React.Component {
 render() {
   return (
     <div>
       <h3 className="heading">This is a heading</h3>
       <p className={styles.paragraph} >This is a paragraph</p>
     </div>
   );
 }
}

				
			

This is the end of our topic. We hope we helped you in some way. The topics covered in this Core React.Js  Interview Questions blog are among the most sought-after skillsets for a React.Js professional, according to recruiters. These React.Js  Interview Questions will undoubtedly assist you in acing your job interview.


Best wishes for your interview!


If you still have any queries, please let us know in the comment section.