ReactJS Interview Questions

Q1. What is ReactJS?

ReactJS is a component-based javascript library, developed by Facebook in 2011, which is used for building an interactive and dynamic user interface for websites and mobile applications specifically for developing single page applications where data reflects in real time. Currently, it is one of the most popular front-end JavaScript library in the market. It deals with View in the MVC(Model - View - Controller).

 

In React everything is components the complete homepage is divided into small parts which merged together to complete the view. The main ReactJS Feature is the Virtual-DOM where only one-way data binding is present wherein AngularJS two way data binding was there any changes to the view are also reflected in the data and vice versa but in reactjs Instead of updating the DOM directly React makes two copies of a Virtual DOM, the original and an updated version that reflects changes displayed in from the view. The two copies that are stored are then compared and when any changes occur react update view directly that's why it preferred for the real-time application.




Q2. What are the features of ReactJS?

JSX

It is more or less like the combination of Javascript + XML. JSX makes writing React components, the building blocks of React UI, easier by making the syntax developers use for generating these strings of HTML almost identical to the HTML they will inject into the web page.JSX is one of best ReactJS features.

Performance

It uses one-way data binding with an application architecture called Flux controls.ReactJS helps us update the View for the user and, with Flux, can control the application workflow. Introducing virtual DOM adds advantages where it compares the new data with original DOM and automatically updates the view.

Component-Based

In React everything is component the web page divided into small components to create a view(or UIs). Every part of applications visuals would be wrapped inside a self-contained module known as a component. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.

Declarative:

It creates very interactive and dynamic user interface for websites and mobile applications. Create simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more readable and easier to debug.

Virtual DOM

In React, for every DOM object, there is a corresponding "virtual DOM object." A virtual DOM object is a representation of a DOM object, it creates a virtual copy of the original DOM. It's a one-way data binding hence manipulating the virtual DOM is quick rather than updating original DOM because nothing gets drawn onscreen.

Event handling

It creates its own event system which is fully compatible with W3C object model. All browser’native events are wrapped by instances of Synthetic Event. It provides a cross-browser interface to a native event. That means you do not need to worry about incompatible event names and fields. Besides, React event system is implemented through event delegation and also has a pool of event objects to reduce memory overhead.




Q3. What are the limitations of ReactJS?

  • It is a UI library only. As such when building something with React you will have to include other libraries to handle other parts of an application, such as application state.
  • When comparing it to a monolithic framework such as AngularJS, you will find that there is no predefined way to structure your app (such as services, controllers & views in Angular). This means that it is the responsibility of the developer to find his/her own ways to effectively manage several parts of the application without a predefined structure. This can lead to significant overhead and long development times when the devised structure is bad or ineffective.
  • To avoid these pitfalls, it is not enough to just learn React and start coding. If you want to avoid trouble in the long run you have to research popular & effective ways to structure your app from third parties, such as blogs or example apps from github. Those however are rarely detailed enough to represent a complex application and as such can’t give you a good guideline on what to do and not to do. You will have to make your own experiences here and learn from them.
  • All the stuff going on in the background. React is mainly written using JSX & ES6, transpiled using Babel and build & packaged using Webpack & npm. Those tools are requirements to be effective when using React, however their inner workings & processes are not easy to learn and require significant time to understand. On the other hand if you skip learning those things, your build might fail with error messages that have no meaning to you and you will be stuck with code that doesn’t work and you have no power to correct by yourself.
  • React is still very young. The ecosystem behind it (open-source libraries, components) is still small compared to older frameworks such as Angular. You will not always find what you are looking for in open-source contributions.
  • Touching on the last point, while React’s APIs are mostly stable, there are still some things that can change in future versions (such as the childContext API). There is no guarantee that the code you write today will work with future versions of React.
  • Last but not least, it features a radically different approach to UI design by introducing reusable components. The process of learing how to think in React can be difficult for you if you have extensive experience using other methods, such as MVC. You basically have to avoid falling back into old thought patterns because they most likely don’t work effectively with React.




Q4. What is JSX?

Consider this variable declaration:

 

const element =Hello, jsonworld!;

Above tag syntax is neither a string nor HTML.

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

JSX produces React “elements”.




Q5. Differentiate between Real DOM and Virtual DOM.

 

Real DOM

Virtual DOM

It updates slowly.

It updates faster.

Can directly update HTML.

Can’t directly update HTML.

Creates a new DOM if element updates.

Updates the JSX if element updates.

DOM manipulation is very expensive.

DOM manipulation is very easy.

Too much of memory wastage.

No memory wastage.

 




Q6. What are the different phases of React component’s lifecycle?

There are four different phases of React component’s lifecycle:

Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.

Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase.

mounting Phase: In this phase component is mounted

 

Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.




Q7. Explain the purpose of render() in React.

Each React component must have a render() compulsory. If more than one HTML elements needs to be rendered, then they must be grouped together inside one enclosing tag such as

, ,

 

etc. It returns to the single react element which is the presentation of native DOM Component. This function must be kept pure i.e., it must return the same result each time it is invoked.




Q8. What is a state in React and how is it used?

States are the heart of React components. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components. They are accessed via this.state().




Q9. How is React different from Angular?

 

TOPIC

REACT

ANGULAR

ARCHITECTURE

Only the View of MVC

Complete MVC

RENDERING

Server side rendering

Client side rendering

DOM

Uses virtual DOM

Uses real DOM

DATA BINDING

One-way data binding

Two-way data binding

DEBUGGING

Compile time debugging

Run time debugging

AUTHOR

Facebook

Google

 




Q10. What are props?

As Per React's Thinking in React documentation, props are best explained as "a way of passing data from parent to child." That's it. In essence, props are just a communication channel between components, always moving from top (parent) to bottom (child).




Q11. What is state?

State is another concept introduced by React and behaves a little bit differently from props. State is best described as how a component's data looks at a given point in time




Q12. Differentiate states and props.

Conditions

State

Props

1. Receive initial value from parent component

Yes

Yes

2. Parent component can change value

No

Yes

3. Set default values inside component

Yes

Yes

4. Changes inside component

Yes

No

5. Set initial value for child components

Yes

Yes

6. Changes inside child components

No

Yes




Q13. Differentiate between stateful and stateless components.

 

Stateful Component

Stateful Component

Stores info about component’s state change in memory

Stores info about component’s state change in memory

Have authority to change state

Do not have the authority to change state

Contains the knowledge of past, current and possible future changes in state

Contains no knowledge of past, current and possible future state changes

Stateless components notify them about the requirement of the state change, then they send down the props to them.

They receive the props from the Stateful components and treat them as callback functions.

 




Q14. What is an event in React?

In React, events are the triggered reactions to specific actions like mouse hover, mouse click, key press, etc. Handling these events are similar to handling events in DOM elements. But there are some syntactical differences like:

 

Events are named using camel case instead of just using the lowercase.

 

Events are passed as functions instead of strings.

 

The event argument contains a set of properties, which are specific to an event. Each event type contains its own properties and behavior which can be accessed via its event handler only.




Q15. What do you know about controlled and uncontrolled components?

 

Controlled Components

Uncontrolled Components

They do not maintain their own state

They maintain their own state

Data is controlled by the parent component

Data is controlled by the DOM

They take in the current values through

props and then notify the changes via callbacks.

Refs are used to get their current values

 




Q16. What are Higher Order Components(HOC)?

Higher Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wraps another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC are ‘pure’ components.




Q17. What are Pure Components?

Pure components are the simplest and fastest components which can be written. They can replace any component which only has a render(). These components enhance the simplicity of the code and performance of the application.

 

 




Q18. What is the significance of keys in React?

 

Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI. They help React to optimize the rendering by recycling all the existing elements in the DOM. These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them. This leads to increase in application’s performance.




Q19. What were the major problems with MVC framework?

Following are some of the major problems with MVC framework:

1. DOM manipulation was very expensive

2. Applications were slow and inefficient

3. There was huge memory wastage

4. Because of circular dependencies, complicated model was created around models and views




Q20. What is Redux?

Redux is one of the hottest libraries for front end development in today’s marketplace. It is a predictable state container for JavaScript applications and is used for the entire applications state management. Applications developed with Redux are easy to test and can run in different environments showing consistent behavior.




Q21. What do you understand by “Single source of truth”?

Redux uses ‘Store’ for storing the application’s entire state at one place. So all the component’s state are stored in the Store and they receive updates from the Store itself. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.




Q22. List down the components of Redux.

Redux is composed of the following components:

Action – It’s an object that describes what happened.

Reducer –  It is a place to determine how the state will change.

Store – State/ Object tree of the entire application is saved in the Store.

 

View – Simply displays the data provided by the Store.




Q23. Explain the role of Reducer.

Reducers are pure functions which specify how the application’s state changes in response to an ACTION. Reducers work by taking in the previous state and action, and then it returns a new state. It determines what sort of update needs to be done based on the type of the action, and then returns new values. It returns the previous state as it is, if no work needs to be done.




Q24. What is the significance of Store in Redux?

A store is a JavaScript object which can hold the application’s state and provide a few helper methods to access the state, dispatch actions and register listeners. The entire state/ object tree of an application is saved in a single store. As a result of this, Redux is very simple and predictable. We can pass middleware to the store to handle processing of data as well as to keep a log of various actions that change the state of stores. All the actions return a new state via reducers.




Q25. How is Redux different from Flux?

 

Flux

Redux

The Store contains state and change logic

Store and change logic are separate

There are multiple stores

There is only one store

All the stores are disconnected and flat

Single store with hierarchical reducers

Has singleton dispatcher

No concept of dispatcher

React components subscribe to the store

Container components utilize connect

State is mutable

State is immutable