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