React JS Top 10 Important Questions in this time 2022

many beginners of react developer does not know the answer of this type of Question So we try to make some
question or answer to help someone to explore it.

1.What is React?

React is an open-source frontend JavaScript library which is used for building user interfaces especially
for single page applications. It is used for handling view layer for web and mobile apps. React was created
by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook's News Feed
in 2011 and on Instagram in 2012.

2.What are the major features of React?

The major features of React are:
It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive.
Supports server-side rendering.
Follows Unidirectional data flow or data binding.
Uses reusable/composable UI components to develop the view.

3.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.
Let's create a user component with message state,

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

    this.state = {
      message: 'Welcome to React world'
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    )
  }
}

4.Why should we not update the state directly?

If you try to update the 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' })

Note: You can directly assign to the state object either in constructor or
using latest javascript's class field declaration syntax.

5.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.

6.What are the different phases of component lifecycle?

The component lifecycle has three distinct lifecycle phases:
i.Mounting: The component is ready to mount in the browser DOM. This phase covers initialization
from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods.
ii.Updating: In this phase, the component gets updated in two ways, sending the new props and
updating the state either from setState() or forceUpdate(). This phase covers getDerivedStateFromProps(),
shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate() lifecycle methods.
iii.Unmounting: In this last phase, the component is not needed and gets unmounted from the browser
DOM. This phase includes componentWillUnmount() lifecycle method.
It's worth mentioning that React internally has a concept of phases when applying changes to the DOM. They
are separated as follows
iv.Render The component will render without any side-effects. This applies for Pure components and
in this phase, React can pause, abort, or restart the render.
v.Pre-commit Before the component actually applies the changes to the DOM, there is a moment that
allows React to read from the DOM through the getSnapshotBeforeUpdate().
vi.Commit React works with the DOM and executes the final lifecycles respectively componentDidMount()
for mounting, componentDidUpdate() for updating, and componentWillUnmount() for unmounting.

7.What are Higher-Order Components?

A higher-order component (HOC) is a function that takes a component and returns a new component. Basically,
it's a pattern that is derived from React's compositional nature.
We call them pure components because they can accept any dynamically provided child component but they won't
modify or copy any behavior from their input components.
const EnhancedComponent = higherOrderComponent(WrappedComponent)
HOC can be used for many use cases:
i. Code reuse, logic and bootstrap abstraction.
ii. Render hijacking.
iii. State abstraction and manipulation.
iv. Props manipulation.

8.What is context?

Context provides a way to pass data through the component tree without having to pass props down manually
at every level.
For example, authenticated user, locale preference, UI theme need to be accessed in the application by many
components.
const {Provider, Consumer} = React.createContext(defaultValue)

9.Why fragments are better than container divs?

Below are the list of reasons,
i. Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a
real benefit on very large and deep trees.
ii. Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationships, and
adding divs in the middle makes it hard to keep the desired layout.
iii. The DOM Inspector is less cluttered.

10.How to apply validation on props in React?

When the application is running in development mode, React will automatically check all props that we set on
components to make sure they have correct type. If the type is incorrect, React will generate warning messages
in the console. It's disabled in production mode due to performance impact. The mandatory props are defined with
isRequired.
The set of predefined prop types:
i. PropTypes.number
ii. PropTypes.string
iii. PropTypes.array
iv. PropTypes.object
v. PropTypes.func
vi. PropTypes.node
vii. PropTypes.element
viii. PropTypes.bool
ix. PropTypes.symbol
x. PropTypes.any
We can define propTypes for User component as below:

import React from 'react'
import PropTypes from 'prop-types'

class User extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired
  }

  render() {
    return (
      <>
        <h1>{`Welcome, ${this.props.name}`}</h1>
        <h2>{`Age, ${this.props.age}`}</h2>
      </>
    )
  }
}

Note: In React v15.5 PropTypes were moved from React.PropTypes to prop-types library.
The Equivalent Functional Component

import React from 'react'
import PropTypes from 'prop-types'

function User({name, age}) {
  return (
    <>
      <h1>{`Welcome, ${name}`}</h1>
      <h2>{`Age, ${age}`}</h2>
    </>
  )
}

User.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired
  }