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?

Which hook can we use to manage state within our function components?

The following code is a correct example of setting up state in a function component with useState

// other code

const [toggled, setToggled] = useState(false);

The destructured values in a useState call have to be called specific names

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

Which hook allows us to replicate lifecycle methods within our function components?

Which class-based component methods does the useEffect hook replace in a function component?

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

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);
  });
}, []);

Can we use async / await with the useEffect hook?

We can return a Promise from useEffect

Which hook should we use if we are dealing with complex state within a function component?