React.js frequently asked interview questions.

What is React.js?

React is a JavaScript library that makes building user interfaces easy. It was developed by Facebook.

Does React use HTML?

No, React don’t use HTML. However, it uses JSX, which is similar to HTML.

Give me two most significant drawbacks of React.

• Integrating React with the MVC framework like Rails requires complex configuration.
• React require the users to have knowledge about the integration of user interface into MVC framework.

State the difference between Real DOM and Virtual DOM.

Real DOM

• It is updated slowly.
• It allows a direct update from HTML. It wastes too much memory.

Virtual DOM

• It updates faster.
• It cannot be used to update HTML directly. Memory consumption is less.

What is Flux Concept In React?

Facebook widely uses flux architecture concept for developing client-side web applications. It is not a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow.

Define the term Redux in React Redux is a library used for front end development.

It is a state container for JavaScript applications which should be used for the applications state management. You can test and run an application developed with Redux in different environments.

What is the ‘Store’ feature in Redux?

Redux has a feature called ‘Store’ which allows you to save the application’s entire State at one place. Therefore all it’s component’s State are stored in the Store so that you will get regular updates directly from the Store. The single state tree helps you to keep track of changes over time and debug or inspect the application.

What is an action in Redux?

It is a function which returns an action object. The action-type and the action data are always stored in the action object. Actions can send data between the Store and the software application. All information retrieved by the Store is produced by the actions.

Name the important features of React.

Here, are important features of React.

• Allows you to use 3rd party libraries
• Time-Saving
• Faster Development
• Simplicity and Composable Fully supported by Facebook.
• Code Stability with One-directional data binding React Components

Explain the term stateless components

Stateless components are pure functions that render DOM-based solely on the properties provided to them.

Explain React Router

React Router is a routing library which allows you to add new screen flows to your application, and it also keeps URL in sync with what’s being shown on the page.

What is dispatcher?

A dispatcher is a central hub of app where you will receive actions and broadcast payload to registered callbacks.

What is meant by callback function? What is its purpose?

A callback function should be called when setState has finished, and the component is retendered. As the setState is asynchronous, which is why it takes in a second callback function.

Explain the term high order component

A higher-order component also shortly known as HOC is an advanced technique for reusing component logic. It is not a part of the React API, but they are a pattern which emerges from React’s compositional nature.

Explain the Presentational segment

A presentational part is a segment which allows you to renders HTML. The segment’s capacity is presentational in markup.

What are Props in react.js?

Props mean properties, it is a way of passing data between the components in react. We can say that props are just a communication channel between components. It is always moving from parent to child component.

Explain yield catchphrase in JavaScript

The yield catchphrase is utilized to delay and resume a generator work, which is known as yield catchphrase.

Name two types of React component

• Functional components (introduced in React 16.8)
• Class based components

Explain synthetic event in React js

Synthetic event is a kind of object which acts as a cross-browser wrapper around the browser’s native event. It also helps us to combine the behaviors of various browser into signal API.

What is React State?

It is an object which decides how a specific component renders and how it behaves. The state stores the information which can be changed over the lifetime of a React component.

How can you update state in react.js?

A state can be updated on the component directly or indirectly.

Explain the use of the arrow function in React

The arrow function helps you to predict the behavior of bugs when passed as a callback. Therefore, it prevents bug caused by this all together.

State the main difference between Pros and State

The main difference the two is that the State is mutable and Pros are immutable.

Explain pure components in React.js

Pure components are the fastest components which can replace any component with only a render(). It helps you to enhance the simplicity of the code and performance of the application.33) What are reacted portals? Portal allows you to render children into a DOM node. CreatePortalmethod is used for it.

Explain the use of ‘key’ in react list

Keys allow you to provide each list element with a stable id. The keys should always be unique.

What are children prop?

Children props are used to pass component to other components as properties.

Explain error boundaries?

Error boundaries help you to catch JavaScript error anywhere in the child components. They are most used to log the error and show a fallback UI.

What is the use of empty tags ?

Empty tags are used in React for declaring fragments.

Explain strict mode

Strict Mode allows you to run checks and warnings for react components. It runs only on development build. It helps you to highlight the issues without rendering any visible UI.

What are reacted portals?

Portal allows you to render children into a DOM node. CreatePortalmethod is used for it.

What is Context?

React context helps you to pass data using the tree of react components. It helps you to share data globally between various react components.

What is the use of Webpack?

Webpack in basically is a module builder. It is mainly runs during the development process.

What is Babel in React.js?

Babel, is a JavaScript compiler that converts latest JavaScript like ES6, ES7 into plain old ES5 JavaScript that most browsers understand.

Feel free to add your suggestions and questions in the comment box.