React JS Interview Questions and Answers

Q1. Features of React

Ans 

• Virtual DOM
• Javasript XML or JSX
• One-Way Data Binding
• Component Based Architecture
• Extensions

Q2. What do you mean by DOM?

Ans

Virtual DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or virtual, representation of a UI is kept in memory and synced with the real DOM by a library such as ReactDOM. This process is called reconciliation.

Q3. What is JSX?

Ans

JSX stands for JavaScript syntax extension. JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. It is a JavaScript extension that allows us to describe React’s object tree using a syntax that resembles that of an HTML template. 

Q4. What does Data binding? 

Ans

Data-binding is a technique that binds data sources from the provider and consumer together and synchronizes them.

One way Data Binding

n one-way binding, the data flow is one-directional i.e information flows in only one direction, and is when the information is displayed, but not updated.

Q5. What are the four built-in methods to put elements into the DOM, when mounting a component? (Order is important)

Ans

constructor() -> getDerivedStateFromProps() -> render() -> componentDidMount()

Mounting means putting elements into the DOM. React has four built-in methods that gets called, in this order, when mounting a component:
1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()
The render() method is required and will always be called, the others are optional and will be called if you define them.

Q6. What is output of the following code snippet?

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
 const number = 'Sample';
 return (
  <div>
   {number > 0 ? (
    <p>Number {number} is positive</p>
   ) : (
    <p>Number {number} is negative</p>
   )}
  </div>
 );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App name="David" />, rootElement);

Ans

Number Sample is negative

Explanation

React considers anything apart from number as non-number and so the answer is “Number Sample is negative”.
The keyword const is just to confuse the candidate, this is more to test his JSX knowledge.

Q7. Fill up the exact syntax to adhere to the React coding standards for a button click event:

<button onClick=_________>
 Click me!
</button>

Ans

We do not want to execute a function inside of the event handler.

Q8. Write a common structure of the payload for dispatching an event

Ans

(The actionType key is compulsory and it is used by the dispatcher to pass updates to the related store)
{
     actionType: "",
 data: {
  title: "Understanding Flux step by step",
  author: "Sharvin"
 }
}

Q9. Define Synthetic Events in React.

Ans

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

Q10. ReactJS was officially launched during May 2013, but when did Facebook sensed the early Prototype of React?

Ans

2011 – An early prototype of React Jordan Walke created FaxJS, the early prototype of React – shipped a search element on Facebook.

Q11. When to rightly use ReactJS?

Ans

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. This corresponds to the view in the MVC template.

Q12. What is the shortest way of writing a function to React?

Ans

An arrow function is a short way of writing a function to React.

Q13. Write Syntax to create a Function component?

Ans

function Greeting({ message }) {
     return <h1>{`Hello, ${message}`}</h1>
}

This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as the first parameter and return React elements.

Q14. Write Syntax to create a Class component?

Ans

class Greeting extends React.Component {
 render() {
  return <h1>{`Hello, ${this.props.message}`}</h1>
 }
}

Q15. Convert the following binding callbacks to Arrow functions?

handleClick = () => {
 console.log('this is:', this)
}
HTML:

<button onClick={this.handleClick}>
 {'Click me'}
</button>

Ans

handleClick() {
 console.log('Click happened');
}
render() {
 return <button onClick={() => this.handleClick()}>Click Me</button>;

}

Q16. Can we use React without JSX?

Ans

Yes, JSX is not mandatory for using React. Actually, it is convenient when you don’t want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling React.

Q17. Write a sample code to modularize code in React (JSX)?

Ans

//ChildComponent.jsx
export default class ChildComponent extends React.Component {
 render() {
  return(
  <div>
   <h1>This is a child component</h1>
  </div>
  );
 }
}

//ParentComponent.jsx
import ChildComponent from './childcomponent.js';
class ParentComponent extends React.Component {
 render() {
  return(
  <div>
   <App />
  </div>
  );
 }
}

Q18. Can we use for loop in React JSX?

Ans

You can simply use Array.prototype.map with ES6 arrow function syntax. But you can't iterate using for loop. This is because JSX tags -are trans piled into function calls, and you can't use statements inside expressions. This may change thanks to do expressions which are stage 1 proposal.

Q19. Write an example for Render props. (follow proper coding syntax)

Ans

Render Props is a simple technique for sharing code between components using a prop whose value is a function. The below component uses render prop which returns a React element.

<DataProvider render={data => (

 <h1>{`Hello ${data.target}`}</h1>

)}/>

Q20. How do we programmatically navigate using React Router v4?

Ans

There are three different ways to achieve programmatic routing/navigation within components.
- Using the withRouter() higher-order function:
The withRouter() higher-order function will inject the history object as a prop of the component. This object provides push() and replace() methods to avoid the usage of context.
- Using <Route> component and render props pattern:
The <Route> component passes the same props as withRouter(), so you will be able to access the history methods through the history prop.
- Using context:
This option is not recommended and treated as unstable API.

Q21. What is output of the following code snippet?

HTML:
<div id="root">
   <!-- This element's contents will be replaced with your component. -->
</div>
JS:
function Welcome(props) {
 return <h1>Hello, {props.name}</h1>;
}
function App() {
 return (
  <div>
   <Welcome name="Test1" />
   <Welcome name="Test2" />
   <Welcome name="Test3" />
  </div>
 );
}
function Welcome(props) {
 return <h1>Hello, {props.name} + {2%+2}</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Ans

Hello, Test1 + 0
Hello, Test2 + 0
Hello, Test3 + 0

Q22. What are functions that designated as _______ because they don't change their inputs, and consistently return the same outcome for similar data sources.

Ans

Pure functions (Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum function:
Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.)

Q23. What is output of the following code snippet?

import React from 'react';
import ReactDOM from 'react-dom/client';
function Role() {
 return <h2>I am a Manager! </h2>;
}
function Build() {
 return (
  <>
   <h1>Who works at 7th Floor?</h1>
   <Role />
  </>
 );
}

Ans

Who works at 7th Floor? (H1 tag)
I am a Manager!

Q24. What is the component lifecycle method of React 16.3+ equivalent to “componentWillMount” of Before React 16.3?

Ans

getDerivedStateFromProps

Q25. When “render()” method depends on some other data, you can tell React that the component needs re-rendering by calling _______ component method.

Ans

forceUpdate()