Loading…

React js interview questions

By Umesh Singh
Last update: 30 Apr 2020, 53 Questions
Introduction to React js
React js interview questions

ReactJS is a JavaScript library for building reusable User interface components. It is a template-based language combined with different functions that support the HTML. Our recently updated React Interview Questions can help you crack your next interview. This means the result of any React's operation is an HTML code. You can use ReactJS to build all kinds of single-page applications.

Short Questions About React
What is React js? React is a JavaScript library created by way of Facebook. React is a User Interface library.
What is the latest version of React? 16.13, released on 19th March 2020.
When was React first released? 29th May 2013
React JS is Created By Jordan Walke
License of ReactJS MIT License

Note: This is a collection of the most frequently asked questions. To read this offline, download the react js interview questions for experienced and freshers pdf here.

Most Frequently Asked React js interview questions And Answers

1. How to create a component in react js?

There are 3 ways to create a component in React:

  • Using a depreciated variable function
  • Using a Class
  • Using a Stateless Functional Component
1. Using a depreciated variable function

In this, you need to declare a variable in your Javascript file/tag and use the React.createClass() function to create a component using this code.

var MyComponent = React.createClass({
   render() {
      return <div>
      <h1>Hello World!</h1>
      <p>This is my first React Component.</p>
      </div>
   }
})

Now, use the div element to create a unique ID for the specific page and then link the above script onto the HTML page.

<div id=”react-component”></div>

Use ReactDOM.render() function to take 2 arguments, the react component variable and the targeted HTML page.

ReactDOM.render(<MyComponent />, document.getElementById('react-component'))

Finally, save the HTML page to display the result like this one below:

2. Using a Class

Javascript has lately started supporting classes. Any React developer can easily create a class using the class extends (Inherits). Following is the code

3. Using a Stateless Functional Component

It might sound a bit complex, but this basically means that a normal function will be used in place of a variable to return a react component.

Create a const called MyComp and set it as equal to a () function. Use the arrow function, => to declare the logic of the function as follows:

const MyComponent = () => {
   return <div>
   <h1>Hello!</h1>
   <p>This is my first React Component.</p>
   </div>
}

2. What is Props?

Props stand for Properties in React. They are read-only components that must be kept pure. These components are passed down from the parent to the child component throughout the app. A child component cannot send the prop back to the parent component. This can help in maintaining the unidirectional data flow and is used to render the dynamically generated data.

3. What is the difference between Stateless and Stateful Component?

In Stateless component we didn’t define state.State allows your component to change dynamically to the user input. In stateful component we define state for the component.This state is passing as props to other component.

Example

                                                    

Stateless Component:

Import React from ‘react’;

 const ABC =() => {

   <div>

 <h1>Hello World</h1>

</div>

 

Stateful Component :

Import React,{Component} from ‘react’;

class ABC extends Component {

state={

    value: ‘’

}

handleChange(event) {

this.setState({

value: event.target.value

});

}

render(){

return(

 <input type=”text” value={this.state.value} onChange={this.handleChange} />

)

}}

4. What is JSX?

JSX stands for JavaScript XML. It is a file type used by React that utilizes the expressiveness of JavaScript along with HTML. This makes the HTML file easy to understand. This file makes applications robust and boosts their performance.

Hete is is an example of JSX:

render(){

      return(

          <div>  <h1> Welcome To Tekslate!!</h1> </div>

     );

 }

5. What are controlled and uncontrolled components?

Uncontrolled components maintain their internal state, whereas controlled components do not maintain any internal state. Controlled components can be managed by several methods.

NOTE: This information is likely to be asked in React interview questions

6. What is the difference between createElement and cloneElement?

JSX gets transpired to createElement and React uses it to make React Elements. cloneElement is used as a part of a request to clone a component and pass new props.

7. What is Function Based Component?

Basically Function Based Component are the component which are made by JavaScript Functions.It takes props as argument and return JSX.

Example

                                                    

Import React from ‘react’;

const ABC = (props ) => {

           <div>

               <h1>Hello World</h1>

          </div>  

}

export default ABC;

8. What is the difference between Element and Component?

A component describes what you need to see on the screen. An element is a protest representation of user interfaces. A component is a function that acknowledges input and returns a React component.

9. What is import in React?

import is used for calling library from its location to your component and uses that library functions in your component.

10. How to get value from state in react?

In React, State is an object. Its value can be accessed through this:

this.state[key]

Here, the key is the set of values stored in an array changing dynamically.

11. What is the difference between Function Based Component and Class Based Component?

The Main Difference is of Syntax. The function-Based component used props as an argument and is also called stateless component and In class-based component, we extend all the property of predefined function and used according to our need.

Class Based Component use state and the state is used as props in child component.In Class Based component we can use different lifecycle method of component.

12. What is the difference between ReactJs and AngularJS?
  • ReactJS depends less on the code whereas AngularJS needs a lot of coding.
  • React packaging is strong as compared to AngularJS.
  • React is equipped with Virtual Dom while Angular has a Regular DOM.
  • ReactJS is all about the components but AngularJS focus on the Models, View and Controllers.
  • AngularJS was developed by Google while ReactJS was developed by Facebook.
13. What are arrow functions? How are they used?

Arrow functions, also called ‘fat arrow‘ (=>), are brief syntax for writing the expression. These functions bind the context of the components because auto binding is not available by default in ES6. Arrow functions are useful if you are working with the higher order functions.

Example

                                                    

//General way

render() {

return(

<MyInput onChange={this.handleChange.bind(this) } />

);

}

//With Arrow Function

render() {

return(

<MyInput onChange={ (e) => this.handleOnChange(e) } />

);

}

14. What is the purpose of render() in React?

It is compulsory for each React component to have a render(). If more than one element needs to be rendered, they must be grouped inside one tag such as <form>, <group>,<div>. This function goes back to the single react element which is the presentation of native DOM Component. This function must return the same result every time it is invoked.

15. What is the differnece between Real DOM and Virtual DOM?

Real DOM updates slowly, and is able to directly update the HTML. Whereas, Virtual DOM updates faster but is unable to directly update the HTML.

Real DOM can create a new DOM if element updates, but Virtual DOM only updates the JSX if element updates.

In Real DOM, DOM manipulation is expensive. In Virtual DOM, DOM manipulation is easy.

Too much memory wastage in Real DOM, but there is hardly any memory wastage in Virtual DOM.

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

States are at the heart of components. They are the source of data and must be kept simple. States determine components’ rendering and behavior. They are mutable and create dynamic and interactive components, and can be accessed via this.state().

17. What is the component lifecycle in ReactJS?

Component lifecycle is an important part of ReactJS. Component lifecycle falls into three categories - property updates, Initialization and Destruction. Lifecycle is a method of managing the state and properties of the components.

18. What is an event?

Events are the triggered reactions to actions like mouse hover, click, key press, etc.

19. What is Redux?

Redux is used to handle data in a reliable manner. It performs task accurately and ensures that the data has been controlled. You can also apply filters if only a specific part of data is required.

20. What is Flux?

Flux is an illustration that helps to maintain a unidirectional data stream. It also controls construed data unique fragments and makes them interface without creating issues. The configuration of Flux is insipid and is not specific to applications.

This interview questions on react js are always a level up and thus a little tough to crack.

21. How can we build React in Production mode?

We can utilize Webpack's DefinePlugin strategy to set NODE_ENV to production. This will remove things like propType approval and other notices. It is a good idea to reduce your code because React utilizes Uglify's dead-code end to remove advancement just code and remarks.

22. What is meant by pooling?

The server needs to be regularly monitored for updates. The aim is to check for the presence of new comments. This process is considered as pooling. It checks for the updates almost every 5 seconds. Pooling helps keep an eye on the users and ensure there is no negative information on servers.

23. In what cases would you use a Class Component over a Functional Component?

If your component has a state or lifecycle method, use Class component. Else, a Functional component.

24. What can you do if the expression contains more than one line?

Enclosing the multi-line JSX expression is the best option. Sometimes it becomes necessary to avoid multi-lines in order to perform the task reliably and for getting the expected results.

25. Is it possible to use the word Class in JSX?

No. This is because the word Class is an occupied word in the JavaScript. If you use the word Class JSX will get translated to JavaScript.

26. Is it possible to display props on a parent component?

Yes. This is a complex process, and the best way to do it is by using a spread operator.

27. What is React?

React is a JavaScript Library which is used to show content to user and handle user interaction.

28. How it is different from other front end language?

In React we divide the front end content into different components so that we can reuse the component when we need them at other place.

29. What is Component?

Component is a building block of any React app which is made by either JavaScript Function of Class. Ex. Header Component, Footer Component etc.

There are two types of Components.
  • Function Based Component
  • Class Based Component
30. What are Class Based Component?

Class Based Component is the JavaScript Class. In these Components we extends the JavaScript predefined class into our component.

Example

                                                    

Import React,{Component} from ‘react’;

class ABC extends Component {

 render(){

   return(

    <div>

       <h1>Hello World</h1>

</div>

);

}}

export default ABC;

31. How to install react js on your local machine?

1. You have to install node first on your local machine.

2. Open command line and write "npm install -g create-react-app".

3. Then write "create-react-app my-app".

33. How to reload the current page in react js?

Reloading/Refreshing a page using Javascript:
Use Vanilla JS to call the reload method for the specific page using the following code:

window.location.reload(false);

34. How to redirect to another page in react js?

The best way to redirect a page in React.js depends on what is your use case. Let us get a bit in detail:

If you want to protect your route from unauthorized access, use the <Redirect /> component and try this :

import React from 'react'

import { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {

   if (authFails)

   return <Redirect to='/login' />

}

return <div> My Protected Component </div>

}

51. What are the key benefits of ReactJS development?
Key Benefits of ReactJS Development
  • Allows Developers to Reuse the Components
  • It is Much Easier to Learn
  • The Benefit of Having JavaScript Library
  • SEO Friendly
  • It ensures faster rendering
  • The Increase in Community Base
  • The Support of Handy Tools
  • Scope for Testing the Codes etc
52. What are synthetic events?

It is a cross-browser wrapper that is around the native event of the same browser. This is the most important question in react interview questions.

53. What is “forward refs”?

It is a technique that implies an exchange of ref through the components and enables descendants to receive ref and pass it.

Latest Version: React 16.3.0 was released in March 2018

If you are looking for a job as a ReactJs developer, we have a vast collection of React Interview Questions and Answers.

Development History:

Jordan Walke, a Facebook engineer, developed the React framework in 2011. After using it on Facebook’s news feed, it was implemented on the Instagram network. React became open source in 2013.

Key points about React:
  • Initially developed by Facebook engineers.
  • Implements one-way data flow. Flux keeps data unidirectional.
  • Licensed under Facebook Inc, and documentation is licensed under CC BY 4.0.
Advantages of React
  • Uses virtual DOM that improves apps performance.
  • Can be used on the client side, server side, and with other frameworks.
  • Component and data patterns improve readability that helps in maintaining larger apps.
Disadvantages of React
  • Support for other technologies required for the development.
  • Inline templating and JSX might seem weird to some developers.
Add Review