Complete: React.js Interview Questions and Answers 2020

React.js is the top Javascript library today. Here is the complete list of React.js Interview Questions and Answers if you are looking to start or switch career in React.

React.js Interview Questions and Answers

We know, an interviewer may ask you variety of different questions. We will keep this updated by adding more questions and answers, so you don’t have to look anywhere else when you are preparing for React.js interview.

1] What is React.js?

React.js is the Javascript library for building User Interfaces. Look into
this for more details.

2] What is JSX?

It is an extension of Javascript. It is used in React to describe what the UI should look like. It looks like HTML template but it comes with the power of Javascript.

3] What is React Elements?

React elements are basically objects and they are cheap to create. React elements used by React DOM to update original DOM. Components are made up of elements.

4] How to Render React Elements?

We use ReactDOM.render() to render elements. It takes two parameters. First is react element and second is HTML element where you actually want it to be rendered.

5] How to Update Rendered Element in React?

You have to create a new element and pass it to ReactDOM.render() to update the existing element.

6] How Rendering Internally Works in React?

React DOM keeps records of old elements. If new elements get created, React DOM creates a new chain of elements and compare that with old. After this, only updated part reflects on actual DOM.

7] What is a Component?

Components are like JavaScript functions. Components are independent and reusable pieces of UI. They accept inputs (we called them ‘props’) and returns ‘React elements’ which describe what should appear on the screen.

8] What is Pure and Impure Components?

Pure Components don’t modify their own props and Impure Components change their own props value.

Note: All React components must act like pure functions with respect to their props.

9] How to Create a Class Component in React?

You can write any class name followed by a class keyword which uses extends keyword to extend from React.component. Example Below.

10] What is ‘State’ in React.js Component?

React component contains a built-in state object. The ‘state’ object stores property values that belong to the component. When state object changes, the component gets re-render. The state object is similar to props but it is private and fully controlled by the component itself.

11] What is Mounting and Unmounting in React?

Whenever the component is rendered for the first time in the DOM
is called mounting in React and Whenever the DOM produced by the component is removed called as unmounting in React.

12] What is the Lifecycle Methods in React?

We declare some special methods in the component class to run some code when component mount and unmount. Those two methods are ‘componentDidMount’ and ‘componentWillUnmount‘.

13] When Do Lifecycle Methods Get Called in React?

When a Component gets Rendered into DOM componentDidMount gets called and when DOM produced by Component gets removed componentWillUnmount gets called.

14] What are the Three Things You Should Know About ‘State’ in React?

  • Do not modify state directly.
  • State updates may be Asynchronous.
  • State updates are merged.

15] Why State is Called Local or Encapsulate?

Neither parent nor child Components can know if a certain Component is stateful or stateless and they shouldn’t care whether it is defined as a function or a class. It is not accessible to any component other than the one that owns and sets it.

16] What is ‘Top-Down’ or ‘Unidirectional’ Data Flow in React?

The State is always owned by some specific Component, and any data or UI derived from that state can only affect Components ‘below’ them in the tree.

17] Can You Use ‘return false’ to Prevent Default Behaviour in React?

No. You need to call preventDefault explicitly.

18] What is Conditional Rendering?

In conditional Rendering, you can render some of the Components depending on state of the application. In this, you can use if/else or conditional operator to create elements representing the current state.

19] How to Prevent a Component from Rendering?

You have to return ‘null‘ instead of rendering output.

20] Does Prevent a Component from Rendering Affect Components Lifecycle Methods?

No, it doesn’t. For instance “componentDidUpdate” will still be called.

21] What are Controlled Components?

HTML form elements (like <input>, <textarea>, <select>) maintain their own state and update based on user input. In react, the state is kept in the ‘state’ property of the Component and can be updated only using setState(). We can combine these two states making the React state be the ‘single source of truth‘. An input form element whose value is controlled by React in this way is called a ‘Controlled Component’.

22] What is ‘Single Source of Truth’?

Please refer Question – 21 for this.

23] What is Babel?

Babel is the Javascript Compiler. It is mainly used to convert ES 2015+ code into a backwards-compatible version of JavaScript that can be run by older JavaScript engines. It is a popular tool for using the newest features of JavaScript.

Tutorial Funda

Tutorial Funda will keep you updated with the latest Programming Languages, Software Tools and related technologies used in Software Development.

Leave a Reply

Your email address will not be published. Required fields are marked *