React Interview Questions (6-10) :-

As in the previous blog, I have discussed five interview questions, in today's blog I'm discussing the next 5 interview questions, Hope you all will enjoy it and learn something new.

Link for previous questions -

Q6.What are Pure Components?

Ans - Pure components are those components that render the same output for the same props and state. We can achieve this Pure Component in the function component through memoized React. memo() API wrapped around component.

This API prevents unnecessary rerendering of components by comparing the previous prop and the new prop through shallow copy. So, it will be helpful for performance optimization.

But at the same time, it won't compare the current and previous state because the function component has by default property that it prevents unnecessary rendering if the same state is set again.

Below is the syntactic representation of the memoized component -

const MemoizedComponent = memo(AnyComponent, arePropsEqual?);

Below is an example of how the child component(i.e., UserProfile) prevents re-renders for the same props passed by the parent component(i.e., UserRegForm).

  import { memo, useState } from 'react';

  const UserProfile = memo(function UserProfile({ userName, email }) {
    return (<>
          <p>UserName:{userName}</p>
          <p>Email: {email}</p>
          </>);
  });
  export default function UserRegForm() {
    const [userName, setUserName] = useState('');
    const [email, setEmail] = useState('');
    return (
      <>
        <label>
          userName: <input value={userName} onChange={e => setUserName(e.target.value)} />
        </label>
        <label>
          Email: <input value={email} onChange={e => setEmail(e.target.value)} />
        </label>
        <hr/>
        <UserProfile email = {email}/>
      </>
    );
  }

In the above code, the userName prop has not been passed to the child component. So there won't be any re-renders for userName prop change.

so, how to get pure components in class components, The way of getting pure components in class components is that the components that extend React.PureComponent instead of React. component will become the Pure Component. When state or props changes PureComponent will do a shallow comparison of props and state by invoking shouldComponentUpdate() .

Note - React.PureComponent is a high-order component.

Q7. What is state in React ?

Ans - The state of a component is an object that holds the information of the component which may change over the lifecycle of the component. One thing we have to keep in mind is that whenever a state changes component will re-render. It is advised that we have to keep our state as simple as possible and minimize the number of stateful components.

Let us take an example of a Post component with message state, here useState hook has been used to add state to the Post component.

import React, { useState } from "react";

function Post() {
  const [message, setMessage] = useState("Welcome to my react series");

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

Note - the state is similar to props but it is private and it is controlled by component.

Q8. What are props in React?

Ans - they are just the input to the component. They are single-valued or may be objects that contain a set of values passed to components on creation similar to HTML- tag attributes. Here, the data is passed from the parent component to the child component.

The purpose of props in React is -

1. passing custom data to your component.

2. Triggers the state change.

3. Use via this.props.reactProp inside component's render() method.

how to use prop in component is shown below with help of example -

import react from "react";

const ChildComponent = (props) => {
  return (
    <div>
      <p> {props.email} </p>
      <p> {props.name} </p>
    </div>
  )
}

const ParentComponent = () => {
  return (
    <>
    <ChildComponent email = "mayank@123" name = "mayank" />
    <ChildComponent email = "shriyash@123" name = "shriyash" />
    </>
  )
}

we can access properties from prop object by using concept of destructuring from ES6.

so, our above child component can also be written as -

const ChildComponent = ({email,name}) => {
  return (
    <div>
      <p> {email} </p>
      <p> {name} </p>
    </div>
  )
}

Q9. What is the difference between props and state in React?

Ans - props and state in react is a plain JavaScript object that is used to manage data in components. but both are used in different ways as they have different characteristics. state is managed by the component itself and it can be updated only by setState() function. state are modified by the component but props cannot be modified . state is used to manage the internal state of components. If there is any state change it will re-render the component.

while props are just only read-only properties and they are passed by their parent component. Read-only means that the props cannot be modified by the component itself. props are used to configure the behaviour of components and to pass data between components.

Q10. Why should we not update the state directly?

Ans - if we change the state directly, it won't render the component.

// wrong 
this.state.name = "shriyash";

Instead, use the setState() function to update the state, so what setState() does is it schedules an update to a component's state object. Whenever the state changes the component responds by re-rendering.

// right
this.setState({ name : "shriyash"});