Important ReactJs Interview questions and answers


Recently, ReactJS has become very popular because of its extra features like simplicity and flexibility than other SPA frameworks. Many traditional web developers moving towards React due to minimal learning curve.

Here is the curated list of reactJs interview questions and answers.

1. What is React?

ReactJS is a component-based JavaScript library which is used for building an interactive and dynamic user interface for websites and mobile applications specifically for developing single page applications where data reflects in real time. Currently, it is one of the most popular front-end JavaScript library in the market. It deals with View in the MVC(Model – View – Controller).

2. What is the render method for?

This method is used to render a React element into the DOM in the supplied container and return a reference to the component. If the React element was previously rendered into container, it will perform an update on it and only mutate the DOM as necessary to reflect the latest changes.

ReactDOM.render(element, container[, callback])

If the optional callback is provided, it will be executed after the component is rendered or updated.

3. What are the lifecycle methods of React?

Lifecycle methods in angular 16.3+ are

  • getDerivedStateFromProps: Invoked right before calling render() and is invoked on every render. This exists for rare use cases where you need derived state. Worth reading if you need derived state.
  • componentDidMount: Executed after first rendering and here all AJAX requests, DOM or state updates, and set up event listeners should occur.
  • shouldComponentUpdate: Determines if the component will be updated or not. By default it returns true. If you are sure that the component doesn’t need to render after state or props are updated, you can return false value. It is a great place to improve performance as it allows you to prevent a re-render if component receives new prop.
  • getSnapshotBeforeUpdate: Executed right before rendered output is committed to the DOM. Any value returned by this will be passed into componentDidUpdate(). This is useful to capture information from the DOM i.e. scroll position.
  • componentDidUpdate: Mostly it is used to update the DOM in response to prop or state changes. This will not fire if shouldComponentUpdate() returns false.
  • componentWillUnmount It will be used to cancel any outgoing network requests, or remove all event listeners associated with the component.
4. What is Virtual DOM?

React builds up its own “virtual DOM” which is a lightweight representation of the DOM optimized for React’s diffing algorithms and reconciliation process. Virtual DOM changes eventually propagate to the actual DOM at the end of the reconciliation process.

5. What is state in React?

State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components.

Example:

class Demo extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Hello world'
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    )
  }
}
6. What are the major features of React?
  1. Declarative – React creates very interactive and dynamic user interface for websites and mobile applications. Create simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more readable and easier to debug.
  2. Virtual DOM – In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, it creates a virtual copy of the original DOM. It’s a one-way data binding hence manipulating the virtual DOM is quick rather than updating original DOM because nothing gets drawn onscreen.
  3. Event handling – In React, All browser’native events are wrapped by instances of Synthetic Event. It provides a cross-browser interface to a native event. That means you do not need to worry about incompatible event names and fields.
  4. JSX JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.
  5. React Native – React Native is mobile application framework created by Facebook. It is used to develop applications for Android, iOS and UWP by enabling developers to use React along with native platform capabilities.
  6. Component-Based In React everything is component the web page divided into small components to create a view(or UIs). Every part of applications visuals would be wrapped inside a self-contained module known as a component. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep the state out of the DOM.Components in ReactJS use to define the visuals and interactions in applications.
7. What is JSX?

JSX is a XML-like syntax extension to ECMAScript(superset of JavaScript). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.

In the example below text inside <h1> tag return as JavaScript function to the render function.

class AppDemo extends React.Component {
  render() {
    return(
      <div>
        <h1>{'Hello world!'}</h1>
      </div>
    )
  }
}
8. How to create components in React?
  • Using Class – You can create a JavaScript class that extends (a.k.a. inherits) React’s Component class and write the component’s template in render() method.
class MyComponent extends React.Component{
   render() {
      return <div>
                <h1>Hello World!</h1>
             </div>
      }
}
  • Using Function – This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as first parameter and return React elements.
function DemoComponent({ message }) {
  return <h1>{`Hello, ${message}`}</h1>

}
9. When to use a Class Component over a Function Component?

It depends, If the component needs state or lifecycle methods then use class component otherwise use function component.

10. What are props in React?

Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.

The primary purpose of props in React is to provide following component functionality:

  1. Pass custom data to your component.
  2. Trigger state changes.
  3. Use via this.props.reactProp inside component’s render() method.

For example, let us create an element with reactProp property:

<Element reactProp={'1'} />

This reactProp (or whatever you came up with) name then becomes a property attached to React’s native props object which originally already exists on all components created using React library.

props.reactProp
11. What is the difference between state and props?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.

12. Why should we not update the state directly?

If you try to update state directly then it won’t re-render the component.

//Wrong
this.state.message = 'Hello world'

Instead use setState() method. It schedules an update to a component’s state object. When state changes, the component responds by re-rendering.

//Correct
this.setState({ message: 'Hello World' })
13. What are synthetic events in React?

SyntheticEvent is a cross-browser wrapper around the browser’s native event. It’s API is same as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

14. How to write comments in React?

The comments in React/JSX are similar to JavaScript Multiline comments but are wrapped in curly braces.

 <div>
  {/* This is a comment */}
  {`Welcome ${user}, Good Morning`}
</div>
15. What is reconciliation?

When a component’s props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

16. Why is it necessary to capitalize component names?

It is necessary because components are not DOM elements, they are constructors. Also, in JSX lowercase tag names are referring to HTML elements, not components.

17. What are fragments?

It’s common pattern in React which is used for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

 render() {
  return (
    <React.Fragment>
      <ChildComponentA />
      <ChildComponentB />
      <ChildComponentC />
    </React.Fragment>
  )
}
18. What are portals in React?

Portal is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

ReactDOM.createPortal(child, container)

The first argument is any render-able React child, such as an element, string, or fragment. The second argument is a DOM element.

19. What are stateless components?

If the behavior is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components.

20. What are stateful components?

If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These stateful components are always class components and have a state that gets initialized in the constructor.

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  render() {
    // ...
  }
}

21. What’s the difference between a ‘smart’ component and a ‘dumb’ component?

Smart components manage their state or in a Redux environment which are connected to the Redux store. Whereas dumb components are driven completely by their props passed in from their parent and maintain no state of their own.