React Hooks and Custom Hooks INTRODUCTION

SELF-REVIEW: MANAGING STATE WITHIN A COMPONENT

1. Is this a valid useState hook invocation and destructuring?

const [car, setCar] = useState({ color: 'blue', mileage: 0})

2. True or False: You can clone a JS object using the . operator (the dot operator).

3. Consider the following code:

 const [person, setPerson] = useState({ name: 'John', age: 21})

Imagine you’re using a setPerson() state-updating function to update the value of the state variable named person. You only want to update the value of age, from 21 to 22. Choose the correct code snippet to do that.

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?

2. The useEffect hook accepts…

3. What is a pure React component?

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

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.

SELF-REVIEW: CAN YOU FETCH DATA?

1. True or False: When invoking the fetch() function to get some JSON data from an API, you should pass it a URL.

2. True or False: After invoking the fetch() function, you need to add a call to the then() function.

3. Choose the right way to handle the response from a fetch call.

KNOWLEDGE CHECK: RULES OF HOOKS AND FETCHING DATA WITH HOOKS

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

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

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

4. You are allowed to:

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

SELF-REVIEW: CREATE YOUR OWN CUSTOM HOOK, USEPREVIOUS

1. True or False: You code a custom hook when you want to avoid duplication.

2. Let’s imagine you code a custom hook, called for example useNext, on a separate file named useNext.js. What’s the minimum requirement for the custom useNext hook to be a valid hook?

3. In the previous exercise, you were given a task to create your own custom hook, usePrevious. What was being returned from the usePrevious function declaration?

KNOWLEDGE CHECK: ADVANCED HOOKS

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

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

3. A common scenario for using the useRef hook is to…

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

5. The useState hook gives us a reliable way to…

Coursera Meta Front-End Developer Professional Certificate Answers and Study Guide

Weekly Breakdown | Meta Study Guides | Back to Top

MODULE QUIZ: REACT HOOKS AND CUSTOM HOOKS

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

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

3. The useEffect hook is a way to:

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

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

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

6. Complete the sentence:

The useState hook starts with an initial state, but…

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

8. JavaScript is a single-threaded language, meaning…

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

10. 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>
  );
};

11. Which of the following is true about the useState hook? 
Select all that apply.   

12. You can use an object with multiple properties as the initial value of the state variable.

13. True or False:

A pure function will perform a side effect.   

14. How should you add a side effect functionality In React?   

15. Is this code using a valid invocation of a hook?

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

16. Which of the below statements is an accurate description of JavaScript utilizing the fetch function?

17. Which of the statements below best describes how the fetchData function is working?   

18. Which of the following statements is true about the useReducer hook?   

19. What is the data type of the returned value from the useRef hook invocation?   

Interactive CSS CONCLUSION