React Hooks Quiz
by Kwiz
Qs
12
Difficulty
Junior
Plays
1
Record
n/a
Description

React hooks enable us to add state & lifecycle methods to functional components, finally freeing us from class-based components & complicated lifecycle management methods like componentDidMount. This React hooks quiz will cover the foundations of hooks, including rules, syntax & gotchas!

Question Preview
Before we could use React hooks to manage state within function components, what type of component did we have to use in order to manage state?
Question Preview
Which hook can we use to manage state within our function components?
Question Preview
The following code is a correct example of setting up state in a function component with useState
// other code

const [toggled, setToggled] = useState(false);
Question Preview
The destructured values in a useState call have to be called specific names
Question Preview
Select the correct placeholder values in the following destructuring of useState's return value
export default function Button() {
  const [PLACEHOLDER_1, PLACEHOLDER_2] = useState("Click me, please");

  return (
    <button onClick={() => setButtonText("Thanks, been clicked!")}>
      {buttonText}
    </button>
  );
}
Question Preview
Which hook allows us to replicate lifecycle methods within our function components?
Question Preview
Which class-based component methods does the useEffect hook replace in a function component?
Question Preview
The following is a correct use of hooks in a function component
import React, { useState, useEffect } from "react";

export default function DataLoader() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3001/links/")
      .then(response => response.json())
      .then(data => setData(data));
  });

  return (
    <div>
      <ul>
        {data.map(el => (
          <li key={el.id}>{el.title}</li>
        ))}
      </ul>
    </div>
  );
}
Question Preview
To prevent connections from remaining open after being triggered with a useEffect hook, what can we do?
useEffect(() => {
  const socket = socketIOClient(ENDPOINT);
  socket.on("FromAPI", data => {
    setResponse(data);
  });
}, []);
Question Preview
Can we use async / await with the useEffect hook?
Question Preview
We can return a Promise from useEffect
Question Preview
Which hook should we use if we are dealing with complex state within a function component?