React-Questions.md

React Questions

1. Does create-react-app have any default css preproccesor included ? If No, which package provides the capability to have abc.scss files in the project.

• A: sass-loader
• B: node-scss
• C: node-sass
• D: Yes, it already has a Preprocessor

Answer

Answer: C

---

2. Which one is the right syntax to dispatch an action to update the Redux store.

import { useDispatch } from "react-redux";
import { addToCart } from "../actions/cartActions";

const ProductCard = (props) => {
    const { eachListItem } = props;
    const dispatch = useDispatch();

    return (
        <div className="prod-card">
        <div className="btn-contn">
            <button className="btn" onClick={() => /*Enter Your Code*/}>
                Add to Cart
            </button>
        </div>
        </div>
    );
};

• A: dispatch().addToCart(eachListItem)
• B: dispatch(addToCart(eachListItem))
• C: dispatch.addToCart(eachListItem)
• D: None of the Above

Answer

Answer: B

---

3. Which React Hook would you prefer to use so as to replace componentWillUnmount() lifecycle method.

• A: useContext
• B: useReducer
• C: useWillMount
• D: useEffect

Answer

Answer: D

---

4. Which one of them is a more modern approach.

• A:

const ProductCard = props => {
  const { addToCart, eachListItem } = props;
  return (
    <div className="prod-card">
      <div className="prod-name-contn">
        <span className="prod-name">{eachListItem.title}</span>
      </div>
      <div className="btn-contn">
        <button className="btn" onClick={() => addToCart(eachListItem)}>
            {buttonLabel}
        </button>
      </div>
    </div>
  );
};

• B:

function ProductCard(props) {
  return (
    <div className="prod-card">
      <div className="prod-name-contn">
        <span className="prod-name">{props.eachListItem.title}</span>
      </div>
      <div className="btn-contn">
        <button className="btn" onClick={function(){
             props.addToCart(props.eachListItem)
        }}>
            Add to Cart
        </button>
      </div>
    </div>
  );
};

• C: Both A & B
• D: None

Answer

Answer: A

---

5. Which all Component lifecycle methods are considered legacy which were used to capture changes to props or state?

• A: UNSAFE_componentWillUpdate(), UNSAFE_componentWillReceiveProps() & UNSAFE_componentWillMount()
• B: UNSAFE_componentWillUpdate() & UNSAFE_componentWillReceiveProps()
• C: UNSAFE_componentWillMount()
• D: None of them

Answer

Answer: B

---

6. If you want to run an effect and clean it up only once (on mount and unmount) in react, Which of the following approach is used ?

• A:

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

• B:

useEffect(() => {
  ...
}, []);

• C:

useEffect(() => {
    document.title = `You clicked ${count} times`;
});

• D: None of them

Answer

Answer: B

---

7. Which statement doen not suffice the reason for using key attribute while using lists in React?

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

• A: React will mutate every child instead of realizing it can keep the <li>Duke</li> and <li>Villanova</li> subtrees intact.
• B: When children have keys, React uses the key to match children in the original tree with children in the subsequent tree.
• C: In practice, finding a key is usually not hard. As a last resort, you can pass an item’s index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.
• D: None of them.

Answer

Answer: A

---

8. How does the following JSX renders in HTML?

const Columns = () => {
  return (
    <>
    <td>Hello</td>
    <td>World</td>
    </>
  );
}

const App = () => {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
      <tr> </tr>
    </table>
  ) 
}

• A:

<table>
  <td>Hello</td>
  <td>World</td>
  <tr> </tr>
</table>

• B:

<table>
  <tr> </tr>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

• C:

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
  <tr> </tr>
</table>

• D: Syntax Error

Answer

Answer: C

---

9. Which of the following is incorrect about React.lazy?

const OtherComponent = React.lazy(() => import('./OtherComponent'));

• A: It automatically load the bundle containing the OtherComponent when this component is first rendered.
• B: React.lazy takes a function that must call a dynamic import().
• C: Suspense component should be wrapped around the OtherComponent with some fallback component.
• D: React.lazy and Suspense is available for server-side rendering.

Answer

Answer: D

---

10. Which of the following is not one of the React.PropTypes?

• A: array
• B: list
• C: bool
• D: object

Answer

Answer: B