ReactJs Interview Questions


1) What is virtual DOM? What is virtual DOM?
The virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

2) What are the differences between a class component and functional component?
Class components allows you to use additional features such as local state and lifecycle hooks. Also, to enable your component to have direct access to your store and thus holds state.

When your component just receives props and renders them to the page, this is a stateless component, for which a pure function can be used. These are also called dumb components or presentational components.

3) Give one basic difference between pros and state?
Pros are immutable while the state is mutable. Both of them can update themselves easily.

4) How do you tell React to build in Production mode and what will that do?
Ordinarily, you’d utilize Webpack’s DefinePlugin strategy to set NODE_ENV to production. This will strip out things like prototype approval and additional notices. Over that, it’s likewise a smart thought to minify your code in light of the fact that React utilizes Uglify’s dead-code end to strip out advancement just code and remarks, which will radically diminish the measure of your package.

5) What do you understand with the term polling?
The server needs to be monitored to for updates with respect to time. The primary aim in most of the cases is to check whether novel comments are there or not. This process is basically considered as pooling. It checks for updates approximately every 5 seconds. It is possible to change this time period easily. Pooling help keeping an eye on the users and always make sure that no negative information is present on the servers. Actually, it can create issues related to several things and thus pooling is considered.

6) When would you use a Class Component over a Functional Component?
If your component has state or a lifecycle method(s), use a Class component. or else, use a Functional component.

7) What do you mean by virtual DOM?
For all the available DOM objects in ReactJS, there is a parallel virtual DOM object. It is nothing but can be considered as the lighter version of the true copy and is powerful in eliminating the complex code. It is also used as a Blue Print for performing several basic experiments. Many developers also use it while practicing this technology.

8) Compare MVC with Flux?
MVC approaches are presently considered as outdated. Although they are capable to handle data concerns, controllers as well as UI, many developers found that it doesn’t properly work when applications size increases. However, they are capable to handle some of the key issues such as eliminating the lack of data integrity as well as managing the data flow which is not properly defined. On the other side, Flux works perfectly with all the sizes irrespective of their size.

9) What’s the difference between an Element and a Component in React?
Basically, a React component describes what you need to see on the screen. Not all that basically, a React element is a protest portrayal of some UI.

A React component is a function or a class which alternatively acknowledges input and returns a React component (ordinarily by means of JSX which gets transpiled to a createElement invocation).

10) Tell us three reasons behind the success of ReactJS?
ReactJS is a technology that can be trusted for complex tasks. While performing any task through it, developers need not worry about the bugs. It always ensures error-free outcomes and the best part is it offers scalable apps. It is a very fast technology and can simply be trusted for quality outcomes.

11) In which lifecycle event do you make AJAX requests and why?
AJAX solicitations ought to go in the componentDidMount lifecycle event.
There are a couple of reasons behind this,

Fiber, the following usage of React’s reconciliation algorithm, will be able to begin and quit rendering as required for execution benefits. One of the exchange offs of this is componentWillMount, the other lifecycle event where it may bode well to influence an AJAX to ask for, will be “non-deterministic”. This means React may begin calling componentWillMount at different circumstances at whenever point it senses that it needs to. This would clearly be a bad formula for AJAX requests.

You can’t ensure the AJAX request won’t resolve before the component mounts. In the event that it did, that would imply that you’d be attempting to setState on an unmounted component, which won’t work, as well as React will holler at you for. Doing AJAX in componentDidMount will ensure that there’s a component to update.

12) What is the difference between createElement and cloneElement?
createElement is the thing that JSX gets transpiled to and is the thing that React uses to make React Elements (protest representations of some UI). cloneElement is utilized as a part of request to clone a component and pass it new props. They nailed the naming on these two.

13) What is meant by event handling?
To capture the user’s information and other similar data, the event handling system is considered. It is generally done through DOM elements which are present in the code. This task is simple to accomplish. Two-way communication is considered in this approach.

14) How many outermost elements can be there in a JSX expression?
It must have one JSX element present so that the task can be accomplished easily. Having more than one expression is not an issue but probably it will slow down the process. There are also chances of confusion with more than one expression if you are new to this technology.

15) What are controlled and uncontrolled components?
There are components in the ReactJS that maintain their own internal state. They are basically considered as uncontrolled components. On the other side, the components which don’t maintain any internal state are considered as controlled components in ReactJS. Controlled components can easily be controlled by several methods. Most of the React components are controlled components.

16) Mention the key benefits of Flux?
Applications that are built on Flux have components that can simply be tested. By simply updating the store, developers are able to manage and test any react component. It cut down the overall risk of data affection. All the applications are highly scalable and suffer no compatibility issues.

17) What’s wrong with the following code?

this.setState{(prevState, props)=>
return {
streak: prevState.streak+props.count

Nothing isn’t right with it. It’s once in a while utilized and not outstanding, but rather you can likewise pass a function to setState that gets the past state and props and returns another state, similarly as we’re doing above. Furthermore, is nothing amiss with it, as well as effectively recommended in case you’re setting state in light of the previous state.

18) Why browsers cannot read JSX?
Actually, JSX is not considered as a proper JavaScript. Browsers cannot read them simply. There is always a need to compile the files that contain JavaScript Code. This is usually done with the help of JSX compiler which performs its task prior to file entering the browser. Also, compiling is not possible in every case. It depends on a lot of factors such as the source or nature of file or data.

19) What are pure functional Components?
Traditional React Components as we have seen so far are making a class with class Example extends React.Component or React.createClass(). These make stateful components on the off chance that we at any point set the state (i.e. this.setState(), getInitialState(), or this.state = {} inside a constructor()).

In the event that we have no expectation for a Component to require state, or to require lifecycle methods, we can really compose Components with a pure function, consequently the expression “pure function Component”:

function Date(props)
let {msg=”The date is:”} = props
let now = new Date()
return <div>
<span> {msg}</span>
<time> {now.toLocaleDateString()}</time>
This function that returns a React Element can be used wherever we see fit:

DOM.render(<div> <Date msg=”Today is”/></div>)
You might notice that also takes a prop – we can still pass information into the Component.

20) What happens during the lifecycle of a React component?
A standout amongst the most valuable parts of React is its segment lifecycle — so seeing precisely how segments components after some time is instrumental in building a viable application.

21) What exactly you can do if the expression contains more than one line?
In such a situation, enclosing the multi-line JSX expression is an option. If you are a first time user, it may seem awkward but later you can understand everything very easily. Many times it becomes necessary to avoid multi-lines to perform the task reliably and for getting the results as expected.

22) Compare Flux vs MVC
Conventional MVC designs have functioned admirably to separate the worries of data (Model), UI (View) and logic (Controller) — however many web engineers have found impediments with that approach as applications develop in measure. In particular, MVC architectures as often as possible experience 2 primary issues:

Ineffectively defined data flow: The cascading updates which happen crosswise over perspectives frequently prompt a tangled web of events which is hard to debug.

Lack of data integrity: Model data can be changed from anyplace, yielding erratic results over the UI.

With the Flux pattern complex, UIs never again experience the ill effects of cascading updates; any given React component will have the capacity to recreate its state in light of the information given by the store. The flux pattern likewise upholds data integrity by limiting direct access to the shared data.

While a technical interview, it is awesome to talk about the contrasts between the Flux and MVC configuration designs inside the setting of a particular illustration:

For instance, imagine we have a “master/detail” UI in which the client can choose a record from a rundown (master view) and alter it utilizing an auto-populated form (detail view).

With a MVC architecture, the data contained inside the Model is shared between both the master and detail views. Each of these perspectives may have its own particular Controller assigning updates between the Model and the View. Anytime the information contained inside the Model may be updated — and it’s hard to know where precisely that change happened. Did it occur in one of the Views sharing that Model, or in one of the Controllers? Since the Model’s information can be transformed by any performing artist in the application, the danger of information contamination in complex UIs is more prominent than we’d like.

With a Flux architecture, the Store data is correspondingly shared between different Views. However this data can’t be straightforwardly changed — the greater part of the solicitations to update the data must go through the Action > Dispatcher chain first, eliminating the risk of arbitrary data pollution. At the point when refreshes are made to the data, it’s presently significantly less demanding to find the code requesting for those progressions.

23) What are the stateless components?
On the off chance that React components are basically state machines that produce UI markup, at that point what are stateless segments?

Stateless components (a kind of “reusable” components) are simply pure functions that render DOM construct exclusively with respect to the properties gave to them.

As you can see, this component has no requirement for any internal state — not to mention a constructor or lifecycle handlers. The yield of the component is absolutely a function of the properties gave to it.

24) What is one of the core types in React?

25) What is redux?
A method os handling the state (or data) of an application.

26) Is it possible to display props on a parent component?
Yes, it is possible. The best way to perform this task is by using the spread operator. It can also be done with listing the properties but this is a complex process.

27) In ReactJS, why there is a need to capitalize on the components?
It is necessary because components are not the DOM element but they are constructors. If they are not capitalized, they can cause various issues and can confuse developers with several elements. At the same time, the problem of integration of some elements and commands can be there.

28) What are Synthetic events in React?
Ans. React implements Synthetic events to improve the consistency and performance of applications and interfaces. The synthetic event is a cross-browser wrapper around the browser’s native event. It combines the behaviour of multiple browsers into a single API to make sure events have the same properties across different browsers and platforms.

29) Explain DOM diffing?
When the components are rendered twice, Virtual Dom begins checking the modifications elements have got. They represent the changed element on the page simply. There are several other elements that don’t go through changes. To cut down the changes to the DOM as an outcome of user activities, DOM doffing is considered. It is generally done to boost the performance of the browser. This is the reason for its ability to perform all the tasks quickly.

30) Is it possible to nest JSX elements into other JSX elements?
It is possible. The process is quite similar to that of nesting the HTML elements. However, there are certain things that are different in this. You must be familiar with the source and destination elements to perform this task simply.

31) How will you distinguish Redux from Flux?

Components – React components subscribe to the store in flux whereas in redux, container components utilize connect
Dispatcher – There is no dispatcher in redux. On the other hand, flux has a singleton dispatcher
Number of Stores – While flux has several stores, there is only a single store for redux
State – It is mutable for flux but immutable for redux
Store – Influx, the store contains state as well as change logic. Contrary to this, the store in redux is separate from the change logic
Store Type – All stores in flux are disconnected and flat. This is not the case with redux, where there is a single store with hierarchical reducers


Leave A Reply