advanced react coursera week 2 quiz answers

Knowledge check: Getting started with hooks

1. Imagine you have to log into the console a state variable, whenever the variable gets updated. What's the best place to perform such operation in a React component?

  • Before the return statement of the component
  • the useEffect hook

2. The useEffect hook accepts...

  • a callback function and an object
  • a callback function and an array
  • two callback functions

3. What is a pure React component?

  • A component that doesn’t have any side effects
  • A component that has at least one side effect

4. What is the name of the second argument of the useEffect() call?

  • the dependency array
  • the callback function
  • the destructured object
  • the dependencies object

5. This code is incomplete:

React.useEffect(()=> {
console.log('The value of the toggle variable is',toggle)
}, [])

You need to update the dependecies array so that the useEffect hook is invoked whenever the toggle variable updates. Choose the correct solution from the choices below.

  • The dependencies array should receive the toggle variable as its single member.
  • The dependencies array should be removed.
  • The dependencies array should be updated to: [{toggle}].
  • The dependencies array should be replaced with: {toggle}.

Knowledge check: Rules of Hooks and Fetching Data with Hooks

6. True or false: You should not call hooks inside loops.

  • True
  • False

7. True or false: You should call hooks inside if statements.

  • True
  • False

8. True or false: You should call hooks inside nested functions.

  • True
  • False

9. You are allowed to:

  • only call a single effect hook inside a component.
  • only call a single state hook inside a component
  • call multiple state hooks and effect hooks inside a component

10. True or false: You don't have to always make multiple hook calls in the same sequence.

  • True
  • False

Knowledge check: Advanced Hooks

11. True or false: useReducer is a reducer function that takes in the initial state and an action and returns the new state.

  • True
  • False

12. True or false: The useState hook is best suited for complex state logic or when the next state depends on the previous one.

  • True
  • False

13. A common scenario for using the useRef hook is to...

  • …focus the cursor into an input field.
  • …control a component’s state.
  • …handle side effects.
  • …memorize expensive operations.

14. True or false: Building your own Hooks lets you extract component logic into reusable functions

  • True
  • False

15. The useState hook gives us a reliable way to...

  • … deal with state updates in React components.
  • … deal with state updates in React prompts.
  • … deal with state updates in React dependency arrays.
  • … deal with state updates in React useEffect invocations.

Module quiz: React Hooks and Custom Hooks

16. How is array destructuring relevant to hooks in React?

  • It makes the Virtual DOM possible.
  • It makes it possible to reassign state objects.
  • It makes it possible to handle click events.
  • It is a way to get individual items from an array of items, and save those individual items as separate components.

17. Is the following paragraph correct?

With array destructuring, you are free to give any variable name to the items that you destructure from an array. Contrary to that, when destructuring objects, you have to destructure a property of an object using that exact property's name as the name of the destructured variable.

  • Yes
  • No

18. The useEffect hook is a way to:

  • handle visual effects (animations and transitions) in React
  • handle one-way data flows
  • handle a side effect.

19. Which answer is correct about the following code snippet?

useEffect( () => {
if (data !== '') {
setData('test data')
}
})

  • This code is breaking the rules of hooks
  • This code is not breaking the rules of hooks
  • This code is ok, except the fact that you should replace the if statement with a ternary operator.

20. Choose an example of a side-effect with which you’d need to use a useEffect hook:

  • Update the value of the state variable in a child component.
  • Render some prop values on the screen.
  • Run a Fetch API call in React.

21. Complete the sentence:

The useState hook starts with an initial state, but...

  • the useReducer hook cannot be used to track the state at all.
  • the userReducer hook must be used when the initial state is an object.
  • the useReducer hook gets a reducer function in addition to the initial state.

22. True or false: useRef is a custom hook in React.

  • Yes
  • No

23. JavaScript is a single-threaded language, meaning...

  • …you can use it with React only when this single thread is used with the useEffect hook.
  • …it can only do a single thing at any given time.
  • …you can use it with React only when this single thread is passed to the useState variable.

24. Which statement is correct about the following code snippet:

import { useEffect } from "react";

function useConsoleLog(varName) {
useEffect(() => {
console.log(varName);
});
}

export default useConsoleLog;

Choose the correct statement below.

  • This is an example of a custom hook.
  • This code is an example of an explicit state-updating function.
  • This code is an example of an implicit state-updating function.

25. Find the error in this code:

import {useState} from "react";

export default function App() {
const [restaurantName, setRestaurantName] = useState("Lemon");

function updateRestaurantName() {
useRestaurantName("Little Lemon");
};

return (
< div>
< h1>{restaurantName}< /h1>
< button onClick={updateRestaurantName}>
Update restaurant name
< /button>
< /div>
);
};

  • The onClick event should not be this:

    onClick={updateRestaurantName}

  • The code inside the updateRestaurantName() function definition should not invoke useRestaurantName(“Little Lemon”)

  • The state-setting function’s variable name in the array destructuring should not be setRestaurantName.

Leave a Reply