React Interview Questions and Answers - Part 4

Frequently asked React Interview Questions and Answers for both freshers and experienced developers.

React Interview Questions

• React Interview Questions and Answers – Part 1
• React Interview Questions and Answers – Part 2
• React Interview Questions and Answers – Part 3
• React Interview Questions and Answers – Part 4 (You are here…)

List of React Interview Questions and Answers

1. What is the purpose of using a super constructor with a props argument?
2. What is the meaning of reconciliation?
3. What is the best way to set the state with a dynamic key name?
4. Is it possible to use named exports with the lazy function?
5. Why does React use className instead of the class attribute?
6. What are fragments?
7. Why should you use fragments instead of container divs?
8. In React, what are portals?
9. What are stateless components?
10. What are stateful components?

1. What is the purpose of using a super constructor with a props argument?

The `super()` method must be used before using the `this` reference in a child class constructor. The same may be said for ES6 sub-classes. The major purpose for supplying props to `super()` is so that your child constructors may access `1this.props`.

super() with props

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

    console.log(this.props) // { name: 'Jack', age: 30 }
  }
}

super() without props

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

    console.log(this.props) // undefined

    // props parameter is still available
    console.log(props) // { name: 'Jack', age: 30 }
  }

  render() {
    // no difference outside constructor
    console.log(this.props) // { name: 'Jack', age: 30 }
  }
}

2. What is the meaning of reconciliation?

When a component's props or state change, React compares the newly returned element to the previously displayed one to determine whether an actual DOM update is required. React will update the DOM if they are not equal. This is referred to as reconciliation.

3. What is the best way to set the state with a dynamic key name?

You can do this with computed property names if you're using ES6 or the Babel transpiler to translate your JSX code.

Set the state with a dynamic key name in onChange method

handleInputChange(e) {
  this.setState({ [e.target.id]: e.target.value });
}

4. Is it possible to use named exports with the lazy function?

No, the `React.lazy` method only supports default exports. If you want to import exports named modules, you can make an intermediate module that reexports them as the default.

Let's take an example component file which exports multiple named components.

// Components.js
export const FirstComponent = /* ... */;
export const SecondComponent = /* ... */;

and reexport `Components.js` components in an intermediate file `IntermediateComponent.js`.

// IntermediateComponent.js
export { FirstComponent as default } from "./Components.js";

Now you can import the module using the lazy function as below,

import React, { lazy } from 'react';
const FirstComponent = lazy(() => import("./IntermediateComponent.js"));

5. Why does React use `className` instead of the `class` attribute?

In JavaScript, `class` is a keyword, while JSX is a JavaScript extension. That is the primary rationale behind React's usage of `className` rather than `class`. The `className` prop should be a string.

render() {
  return <span class="menu dark-menu">Menu</span>
}

6. What are fragments?

It's a popular React pattern that allows a component to return several items. Without adding new nodes to the DOM, you may group a list of children using `Fragment`.

render() {
  return (
    <react class="fragment">
      <firstcomponent>
      <secondcomponent>
      <thirdcomponent>
    </thirdcomponent></secondcomponent></firstcomponent></react>
  )
}

Declaring fragments now has a new, more concise syntax. It appears to be empty tags:

render() {
  return (
    <>
      <firstcomponent>
      <secondcomponent>
      <thirdcomponent>

  )
}
</thirdcomponent></secondcomponent></firstcomponent>

7. Why should you use fragments instead of container divs?

The list of causes is as follows:

• By avoiding the creation of an extra DOM node, fragments are a little faster and consume less memory. This is only useful on trees that are quite massive and deep.
• Some CSS methods, such as Flexbox and CSS Grid, have special parent-child connections, making it difficult to maintain the correct layout when divs are inserted in the middle.
• The DOM Inspector has been simplified.

8. In React, what are portals?

Children should be rendered into a DOM node that is outside the parent component's DOM hierarchy, which is called a portal.

ReactDOM.createPortal(child, container);

Any renderable React child, such as an element, string, or fragment, is the first parameter. A DOM element is used as the second parameter.

9. What are stateless components?

A stateless component is one whose behaviour is independent of its state. You may create stateless components using either a function or a class. If you don't require a lifecycle hook in your components, however, function components are the way to go.

If you use function components instead of `this` keyword, you'll have a number of benefits: they're easier to create, comprehend and test, and they're a bit quicker.

10. What are stateful components?

A stateful component is one whose behaviour is based on its state. Stateful components are always class components with a constructor-initialized state.

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

  render() {
    // ...
  }
}

React 16.8 Update:
Hooks allow you to leverage React's state and other features without having to write classes.

 import React, {useState} from 'react';

 const App = (props) => {
   const [count, setCount] = useState(0);

   return (
     // JSX
   )
 }

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂