Real turing react quiz questions

Question 1

You are assigned to moniter and improve application performance. which of the following strategies will work well?

a. Using react tool (profiler) to detect the root cause
b. trying to reduce bundle size
c. using PureComponent to prevent re-render
d. all of the above
e. using React.memo to detect re-render functional component

Answer 1

The correct answer is:

d. all of the above

Explanation:

a. Using React profiler: Profiling your React application can help identify performance bottlenecks, such as slow components or unnecessary re-renders, allowing you to optimize them effectively.

b. Trying to reduce bundle size: Reducing the size of your application’s bundle can improve loading times, especially for users on slower internet connections or mobile devices. Strategies such as code splitting, tree shaking, and lazy loading can help achieve this.

c. Using PureComponent: PureComponent can prevent unnecessary re-renders by implementing a shallow comparison of props and state. This can improve performance by avoiding re-renders of components when their props and state haven’t changed.

e. Using React.memo: React.memo is similar to PureComponent but for functional components. It memoizes the result of the functional component rendering, preventing unnecessary re-renders if the component’s props haven’t changed.

All of these strategies contribute to improving application performance by identifying and optimizing areas that impact loading times, rendering efficiency, and overall responsiveness. Therefore, selecting “all of the above” is the most appropriate choice for monitoring and improving application performance.

Question 2

You are using React v.16.8 to develop a web application. How can you handle
window resizing?
1. none
2. Use useContext to handle resize event and update state
3. Use useState to handle window resize event
4. Use useLayoutEffect hook to handle resize

Answer 2

Option 3: Use useState to handle window resize event

You can handle window resizing in a React application by using the useState hook to update state whenever the window size changes. Here’s a basic example of how you can achieve this:

import React, { useState, useEffect } from 'react';

function App() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    // Function to update window size
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    // Add event listener to window resize
    window.addEventListener('resize', handleResize);

    // Clean up the event listener
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Empty dependency array ensures this effect runs only once

  return (
    <div>
      <h1>Window Size</h1>
      <p>Width: {windowSize.width}</p>
      <p>Height: {windowSize.height}</p>
    </div>
  );
}

export default App;

Question 3

Consider that you have a Button component inside a Card component, given that
you have different actions on the click event of a button and card. When a user
clicks a button you have to add item to cart, when user clicks on card you need to
take user to the product page. Currently, when you click on the button it adds the
item to the cart but also takes the user to the Product page which should not
happen. When clicking on button it should only add the item to cart.

const Card () => {
const onCardClick = () => {
take to product page
]
const onAddToCart = () => {
// &ladds product to cart
}
return (
<div onclick=[onCardClick]>
{/* all card related info */}
<button onclick={onAddToCart]>Add to Cart</button>
</div>
)

Answer 3

To resolve the issue where clicking the button to add an item to the cart also triggers the redirection to the product page, you need to handle the propagation of the click event properly. You can achieve this by stopping the event propagation when clicking on the button. Here’s how you can modify your code:

const Card = () => {
  const onCardClick = () => {
    // take user to product page
  };

  const onAddToCart = (event) => {
    // add product to cart
    // Prevent the event from propagating to the parent div
    event.stopPropagation();
  };

  return (
    <div onClick={onCardClick}>
      {/* all card related info */}
      <button onClick={onAddToCart}>Add to Cart</button>
    </div>
  );
};

Question 4

You are a React developer at Turing. You are using React Redux. Which of the
following statements is incorrect about Container in Redux?
Select one answer
1. Containers describe the presentational part of your application.
2. Containers delegate rendering to presentational child components.
3. Container is an informal term for a component that is connected to a Redux store.
4. None of the above.

Answer 4

The incorrect statement about Containers in Redux is:

“Containers describe the presentational part of your application.”

Containers in Redux are responsible for connecting the presentational components to the Redux store, managing the data flow, and passing down the necessary props to the presentational components. They typically encapsulate the logic for interacting with the Redux store, rather than focusing solely on the presentational aspect.

Question 5

What is the equivalent of the following using React.createElement?

const element = (
<h1 className="hello">
Greetings!
</h1>
);

Answer 5

The equivalent code using React.createElement would look like this:

const element = React.createElement(
  'h1',
  { className: 'hello' },
  'Greetings!'
);

In this code:

‘h1’ represents the HTML tag name.
{ className: ‘hello’ } represents the props (in this case, the className).
‘Greetings!’ represents the text content inside the <h1> element.