Top 25 Interview questions of ReactJs

Top 25 Interview questions of ReactJs

1.What Is Reactjs?

React is an open source JavaScript front end UI library developed by Facebook  for creating interactive, stateful & reusable UI components for web and mobile app. It is used by Facebook, Instagram and many more web apps.

ReactJS is used for handling view layer for web and mobile applications. One of React’s unique major points is that  it perform not only on the client side, but also can be rendered on server side, and they can work together inter-operably.

2.What is JSX?

JSX is a syntax extension of JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.

3.What are the features of React? 

Major features of React are listed below:

It uses the virtual DOM instead of the real DOM.

It uses server-side rendering.

It follows uni-directional data flow or data binding.

3.How is Stateless component different from a Stateful component? 

The stateless component calculates the internal state of the component but does not have the authority to change state. There is no knowledge about the past, current, or future but receives props from the Stateful component, which are treated as a callback function.

5.What is propsin React?

Props are inputs to a React component. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes. i.e, They are data passed down from a parent component to a child component. The primary purpose of props in React is to provide following component functionality:

• Pass custom data to your React component.
• Trigger state changes.
• Use via this.props.reactProp inside component's render() method.

6.What Are The Life Cycle Of Reactjs?

• Initialization
• State/Property Updates
• Destruction

7.What is the virtual DOM?

DOM stands for Document Object Model. The DOM represents an HTML document with a logical tree structure. Each branch of the tree ends in a node, and each node contains objects.

React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.

8.What are the limitations of React?

• Limitations of React are listed below:
• React is just a library, not a full-blown framework
• Its library is very large and takes time to understand
• It can be little difficult for the novice programmers to understand
• Coding gets complex as it uses inline templating and JSX

9.Explain DOM Diffing in React. 

The process of checking the difference between the new VDOM tree and the old VDOM tree is called "diffing". Diffing is accomplished by a heuristic O(n) algorithm. During this process, React will deduce the minimum number of steps needed to update the real DOM, eliminating unnecessary costly changes. This process is also referred to as reconciliation.

10.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 as “pure’ components” because they can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components.

• HOC can be used for many use cases as below,
• Code reuse, logic and bootstrap abstraction
• Render High jacking
• State abstraction and manipulation
• Props manipulation

11.What are the differences between a class componentand functional component?

Class Components

• Class-based Components uses ES6 class syntax. It can make use of the lifecycle methods.
• Class components extend from React.Component.
• In here you have to use this keyword to access the props and functions that you declare inside the class components.

Functional Components

• Functional Components are simpler comparing to class-based functions.
• Functional Components mainly focuses on the UI of the application, not on the behavior.
• To be more precise these are basically render function in the class component.
• Functional Components can have state and mimic lifecycle events using Reach Hooks

12.Why should we not call setState in componentWillUnmount? 

You should not call setState() in componentWillUnmount() because the component will never be re-rendered.

13.“In React, everything is a component.” Explain.

Components are the building blocks of a React application’s UI. These components split up the entire UI into small independent and reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI.

14.What are synthetic events in React?

Synthetic events combine the response of different browser's native events into one API, ensuring that the events are consistent across different browsers.

The application is consistent regardless of the browser it is running in. Here, preventDefault is a synthetic event.

15.How To Use Forms In Reactjs?

In React’s virtual DOM, HTML Input element presents an interesting problem. With the others DOM environment, we can  render the input or textarea and thus allows the browser maintain its   state that is (its value). we can then get and set the value implicitly with the DOM API.

In HTML, form elements such as <input>, <textarea>, and <select> itself  maintain their own state and update its state  based on the input provided by user .In React, components’ mutable state is handled by the state property  and is only updated by setState().

HTML <input> and <textarea> components use the value attribute.

HTML <input> checkbox and radio components, checked attribute is used.

<option> (within <select>) components, selected attribute is used for select box.

16.What's the difference between a Controlledcomponent and an Uncontrolledone in React?

This relates to stateful DOM components (form elements) and the React docs explain the difference:

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component".

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

17.What are React Hooks? 

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

18.What is arrow function in React?

Arrow functions are more of brief syntax for writing the function expression. They are also called ‘fat arrow‘ (=>) the functions. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default. Arrow functions are mostly useful while working with the higher order functions.

19.Why is there a need for using keys in Lists?

Keys are very important in lists for the following reasons:

• A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists
• It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as only the updated components are re-rendered

20.Explain Various Flux Elements Including Action, Dispatcher, Store And View?

Flux can be better explained by defining its individual components:

• Actions – They are helper methods that facilitate passing data to the Dispatcher.
• Dispatcher – It is Central hub of app, it receives actions and broadcasts payloads to registered callbacks.
• Stores – It is said to be Containers for application state & logic that have callbacks registered to the dispatcher. Every store maintains particular state and it will update  when it is needed. It wakes up on a relevant dispatch to retrieve the requested data. It is accomplished by registering with the dispatcher  when constructed. They are  similar to  model in a traditional MVC (Model View Controller), but they manage the state of many objects —  it does not represent a single record of data like ORM models do.
• Controller Views – React Components  grabs the state from Stores and pass it down through props to child components to view to render application.

21.What are the lifecycle methods of ReactJS?

• componentWillMount: Executed before rendering and is used for App level configuration in your root component.
• componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up eventListeners should occur.
• componentWillReceiveProps: Executed when particular prop updates to trigger state transitions.
• shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn't need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a rerender if component receives new prop.
• componentWillUpdate: Executed before re-rendering the component when there are pros & state changes confirmed by shouldComponentUpdate which returns true.
• componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes.
• componentWillUnmount: It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.

22.What is Relay? 

Relay is a JavaScript framework for providing a data layer and client-server communication to web applications using the React view layer.

23.What are synthetic events in React?

Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.

24.What is Redux?

Redux is an open-source, JavaScript library used to manage the application state. React uses Redux to build the user interface. It is a predictable state container for JavaScript applications and is used for the entire application’s state management.

25.Why do we need to React Router?

• It maintains consistent structure and behavior and is used to develop single-page web applications. 
• Enables multiple views in a single application by defining multiple routes in the React application.

Resources:

Top 25 interview questions of JavaScript