51 Most Important ReactJS Interview Questions and Answers

To conclude our 6 Articles Series on ReactJS, here we are providing 51 Most Important and Frequently Asked ReactJSInterview Questions. These questions will be very useful for you to crack an interview and help you to make career in ReactJS.

ReactJS Tutorial Index

1. ReactJS Tutorial# 1 – An Introduction
2. ReactJS Tutorial# 2 – Components and Props
3. ReactJS Tutorial# 3 – Component State and Lifecycle
4. ReactJS Tutorial# 4 – Forms, Events, and Keys
5. ReactJS Tutorial# 5 – React Flux and Redux
6. ReactJS Tutorial# 6 – ReactJS Best Practices

1. What is Reactjs :

ReactJS is a frontend Open source Javascript library initially developed by Facebook. React was used on facebook.com in 2011 and one year later it was used on instagram.com. In 2015, Facebook has announced react-native, another library that uses the same architecture to create native Android and iOS applications.

2. Mention five benefits of ReactJS :

Easy learning curve :

React is easy to learn. Anyone with a good understanding of HTML, CSS and Javascript can learn to react easily.

Readability :

React uses JSX that improves the readability of the code.

Performance :

React uses virtual DOM to update the UI that doesn’t require to update the whole webpage for every single change. That makes the application faster.

Reusable components :

We can use one component in many places without rewriting the code.

SSR :

React supports server-side rendering that improves the page load time.

3. What is Server side rendering? Does react support it?

React supports server-side rendering. Server-side rendering is the process of rendering a web page on the server side than in the browser. It makes the page load time faster. SSR improves the performance, SEO and user experience.

4. What is JSX?

JSX or JavaScript XML is used in React to include XML/HTML code in JavaScript code. Later, transpilers like babel can transform these code into proper javaScript code. We can use React without JSX but JSX makes it more elegant.

5. What is virtual DOM in React?

Manipulating the real DOM makes one web application slow. React creates one virtual DOM for each real DOM object. The virtual DOM has the same properties as the real DOM and we can manipulate it faster than a real DOM. In react, all operations are performed on the virtual DOM object.

6. Can browser read JSX files?

The browser can’t read JSX code. JSX is not the actual JavaScript. Browsers are designed to read only JavaScript. So, a transformer like babel is used to convert JSX code to JavaScript objects.

7. What is a React component?

React components are the basic building block of a react application. These are like functions that take inputs and returns one react element based on the inputs. Using the components, we can split an application into reusable, independent pieces.

8. What are the types of React component?

React components can be categorized into two types :

• Function component
• Class component

9. Explain the function and class components.

Function component :

Function components are actually JavaScript functions. These functions return a react element based on input properties. For example :

Class components :

Class components are JavaScript ES6 class that extends ‘React.Component’.  For example :

10. When to use a class component in React?

A class component is used if we have to deal with state or lifecycle methods. Function components are preferred otherwise.

11. What is React State?

React ‘state’ is an object that determines how a component renders and how it behaves. The state holds information that may change over the lifetime of a react component. The state is a private property of a component. Based on the value of a state, the react component updates its UI.

12. What are React props?

props are used to pass data to a component. They can hold single or multiple sets of values to pass to a component. They are mainly used to pass data to a component and to trigger any state changes.

13. Is there any difference between React state and props?

props and state both are used to hold data or information about a react component. ‘state’ objects are private and they are accessible only inside a component. ‘props’ are used to pass data from one component to another component.

14. How can we update state in react?

We can update the ‘state’ of a react component directly or indirectly. If we update it directly, it will not update the UI element linked to the state. The preferred way to update a ‘state’ is to use ‘setState’ method. This method updates a state object and re-renders the component automatically.

15. How does ‘setState’ function work?

‘setState’ function is used to update the state of a react component. If the UI of the component is dependent on the value we are updating, it will re-render the UI. For example :

16. How to write a callback function in ‘setState’?

We can use one callback function in the ‘setState’ method that will invoke when the state is updated and the UI is re-rendered. For the callback, it is recommended to use React lifecycle methods rather than the callback method.

17. What are the main differences between ‘state’ and ‘props’?

• ‘props’ are used to pass different properties from the parent component to the child component. But ‘state’ is used inside a component to keep ‘data’ for that component.
• The values of ‘props’ can’t be changed in a child component but the value of ‘state’ can be changed.
• The UI of a component can’t be dependent on the ‘props’ but it can be dependent on the values of ‘state’.
• ‘props’ can’t update the UI but ‘state’ can re-render the UI automatically.

18. What is a stateless component?

A stateless component has no ‘state’. It may take one props as an argument and returns a react element based on the values of the ‘props’. These components also don’t have a lifecycle.

19. What is a stateful component?

‘stateful’ components are class components. They have one ‘state’ that is used for UI re-rendering.

20. List all react lifecycle methods.

Following are the lifecycle methods for React (16.3+) :

• getDerivedStateFromProps
• componentDidMount
• shouldComponentUpdate
• getSnapshotBeforeUpdate
• componentDidUpdate
• componentDidUpdate

21. How to write React comments?

We can write comments in react as like below :

22. What is an event?

Events are triggered with respect to few specific user actions like a mouse click, keypress etc. Each event contains a set of different properties.

23. Show one example of an event.

24. What is ‘SyntheticEvent’?

SyntheticEvent is a cross-browser wrapper around the browser’s native event. It is the same as the browser’s native event. It works identically across all browsers.

25. Can you use ‘addEventListener’ in react?

‘addEventListener’ is not recommended to use in ‘React’. Instead of adding a listener when the element is created, we should provide one listener during the initial rendering time of a DOM element.

26. What is ‘create-react-app’?

‘create-react-app’ is a command line tool to create one basic react application. It is officially supported by ‘Facebook’.

27. What is conditional rendering?

We can use if-else or conditional operator to render a react element based on a specific condition. This is called conditional rendering.

28. Set one example of conditional rendering.

In this example, ‘WelcomeComponent’ will be shown if the value of ‘isFirstTimeLoggingIn’ is true, else ‘WelcomeBackComponent’ will be rendered.

29. How to use inline ‘if’ and ‘&&’ operator?

We can use one ‘if’ condition with ‘&&’ operator like below :

Here, if the value of ‘totalCount’ is greater than ’10’, it will add the <h1></h1> line in the <div> block.

30. How to use inline ‘if-else’ and ‘&&’ operator in React?

This will change the message in the <div> block based on the value of ‘totalCount’.

31. How to prevent a component from rendering in React?

To prevent a component from rendering, we can return ‘null’.

Here, if the value of ‘isFirstTime’ is false, it will not render the component.

32. What are createElement and cloneElement?

React.createElement is used to create one react element which will be used as a UI component. React.cloneElement is used to clone an element.

33. Can we create one list without using ‘key’ in react?

We can create one list without ‘key’ for each element but it will cause issues with the react component rendering the list. Even on the browser console, it will throw one error.

34. What is the use of ‘key’ in react list?

Keys are used to provide each list element with a stable identity. The keys should be unique. The best practice is to use ‘id’ of the data as the key.

35. Is it a good practice to use item index as ‘key’ of list elements?

It is not a good practice to use the index of an item as the ‘key’ of the list elements. For example, if the order of the items changes, it will impact negatively and may cause issues with the react component state.

36. Is it required the keys to be unique globally in a react application?

The keys should be unique among the sibling lists. But we can use the same keys if we have two different arrays.

37. What is Lifting state up in React?

If several states need to share common data, we can lift the state up to its closest common ancestor. That means the child components will not hold any local state, instead, the parent component will hold the common state. This same state will be used by all parent and child components.

38. What are children prop?

Children props are used to pass components to other components as properties. This can be accessed by using {props.children}. For example :

We are accessing the children inside ‘ShowMessage’ function.

39. What is the dynamic import in React?

Dynamic import is used to load a component dynamically. For example :

40. What is react Context?

React context is used to pass data through a tree of react components. Using context, we can share data globally between react components.

41. How can we create one context object?

We can create one context object using the ‘React.createContext({})’ function call. The argument of this function is the default value.

42. What are Context provider and Context consumer?

Context provider is used to provide values to a context. The provided values can be used by any other components in the application. Similarly, context consumers are used to reading the value of a context.

43. What are error boundaries?

Error boundaries are used to catch JavaScript errors anywhere in the child components. These are used to log the error and show a fallback UI. It was introduced in React 16.

44. What are Fragments?

Fragments are used to group a list of children components without using any extra nodes to the DOM. For example :

45. What are empty tags <></> used for ?

Empty tags are used for declaring fragments in React.

46. What are higher-Order components ?

A higher-order component is a function that takes one react component and returns one new component. We can use it for state abstraction/manipulation, props manipulation or for reusing of code.

47. What are react portals?

Portal is used to render children into a DOM node. ‘createPortal’ method is used for it.

The second argument is a DOM element and the first argument is any renderable react child.

48. What are the difference beween getInitialState() and constructor() ?

If we are creating one component by extending ‘React.Component’,  the constructor is used to initialize the state. Again, if we are creating one component by using the ‘React.createClass’ function, ‘getInitialState’ is used to initialize the state.

49. What is StrictMode?

StrictMode is used to run additional checks and warnings for react components. It runs only on development build. It doesn’t impact the production build. It highlights the problems in an application without rendering any visible UI. ‘<React.StrictMode> </React.StrictMode>’ are used to enable strictmode for any part of an application.

50. What is ‘prop-types’ library used for?

‘prop-types’ library is used to do runtime type checking for props and similar objects in a react application. Using ‘npm’, we can install this library.

51. What are react hooks?

React hooks are introduced in React 16.8. Using hooks, we can use state and other react features without writing a class.

In this example, we are declaring one state variable ‘click’ with the initial state ‘0’. ‘useState’ is a hook in this example.

Hope you find these questions and answers useful. Please let us know if need to know more or any question for us. Happy to answer you.

All the best !