Top 10 React Interview Questions with Answers

1.What is React Js ?

• React Js is an open — source javascript library used for building interactive user interfaces and web applications quickly.
• It allows developers to build reusable UI components.
• It has a huge, open source community support.

2. What is Virtual DOM and how do they work ?

• Since React is a component based library, if the state or props of any of the components changes, by default it re-renders the entire DOM.
• To avoid repainting the entire DOM nodes for a minimal change, React has come with a strategy called virtual DOM.
• This Virtual DOM is a virtual representation of an UI and syncs it with the real DOM by a library such as ReactDOM. Virtual DOM figures out what exactly has changed from the actual / real DOM and then allows browsers to repaint only the necessary data.

3. What is the main difference between props and state ?

The props and state are interrelated. For any React component to store component’s data in the controller-view, we use state. These state values can be passed down to its child component through props.

Here, parentName is a value stored in parent Component’s state, and this value is being passed to child component as props, name

Props are immutable, whereas state is mutable. So, if the value of props is to be updated, child components uses events and parent callbacks.

In above snippet, parent callback handleClick calls the handleNameChange function in parent component, which updates the state value.

And the handleNameChange function in parent component updates the state value with the new value using setState().

4. What is JSX ?

JSX, which stands for Javascript XML, allows developers to write HTML in React.

It adds HTML elements into DOM without using createElement() and appendChild() methods.

The same can be achieved with JSX without createElement() like below,

5. What are React components ? Why are components so important to React ?

React components are independent and reusable pieces of code, which returns a HTML. React components are of two types,

The biggest advantage of React is that it allows developers to build UI with reusable components, which can be used to create user interfaces for websites and applications alike. Also, these React components help in creating a virtual DOM, which helps to avoid multiple re-rendering.

6. When would you use a class component over a functional component ?

In class components, whenever there is a change in the component’s state, the render method will be called, whereas in functional components, the render method will be called when the props changes.

Class components will be preferred when there is a requirement to maintain data at the state of the component.

From React > 16.8, React provides Hooks to mutate state values without using Class components.

7. Choose a component lifecycle method that you have used on a project ? How did you use it ?

React has 4 active lifecycle methods, and a few more legacy lifecycle methods. Any React developer would definitely have come across all these lifecycle methods several times. List down any one or two with relevant project experience.

Let me take, componentWillUnmount() This method will be called at once the component is unmounted from the DOM. Some of the critical use-cases for this method would be,

Removing any storage used which is no longer used when the components are not used.

Removing event listeners added for the component.

8. What are React events ?

• React events are actions that are being triggered as a result of any user action or by a system generated event.
• React Js has its own event handling system known as synthetic events, which is very similar to DOM elements event handling.
• It is a cross-browser wrapper of browser’s native events.

9. What are the limitations of React ?

• Lack of Proper Documentation — React keeps updating itself regularly and has many tools and libraries like Redux, Reflux to boost the performance. But the documentation is not covering the proper details of the new additions.
• The library of react is too large and it’s constantly evolving and expanding.
• React is a javascript library to build the UI / view of the applications, so we might need other technologies to build a complete to and fro architecture.

10. Can web browsers read JSX directly ?

• JSX is not a valid Javascript, they are embedded in HTML elements. It is a combination of HTML and Javascript, which is not supported by browsers.
• Hence web browsers can’t read JSX directly.
• Browser requires some transpiler, like Babel, which can convert the JSX into Javascript objects, that the browser can understand.

Do follow my profile for more interesting and informative blogs!