mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): add react state and hooks quiz (#56556)
Co-authored-by: Naomi <accounts+github@nhcarrigan.com> Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
This commit is contained in:
Mitch
+136
-100
@@ -17,439 +17,475 @@ Answer all of the questions below correctly to pass the quiz.
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which line of code correctly handles a click event?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```jsx
|
||||
<button onClick={{ handleLoginClick }} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```jsx
|
||||
<button onclick={handleLoginClick} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```jsx
|
||||
<button onClick={handleLoginClick()} />
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```jsx
|
||||
<button onClick={handleLoginClick} />
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is a React Synthetic Event?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Allows direct access to and manipulation of the DOM.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Creates a JSX element under the hood.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Alters the bubbling phase of event propagation to be more user friendly.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
A wrapper around native events to deal with browser inconsistencies.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which of the following is true about React's state?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
The URI is a function of state.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
State is always an abstraction of the UI.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
State always updates synchronously to avoid errors.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
The UI is a function of state.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What are the three major stages in React's rendering?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Handshake, loading and hydration.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Fetching, decoding and execution.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Mounting, updating and unmounting.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Triggering, rendering and committing.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What are the two most important rules of React hooks?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Hooks should be used sparingly, prefer built in over custom.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Functions should always be pure, and return an array.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Execute in helper functions, and after a callback.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Call at the top level of, and only inside, a React function.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Why do React hooks use the prefix `use`?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
No particular reason at all.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To abstract repetitive logic.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It returns used state variables.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Easy identification and linting.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Given the following code:
|
||||
|
||||
```jsx
|
||||
const [certificates, setCertificates] = useState([]);
|
||||
```
|
||||
|
||||
Which is the most reliable way to update array state using the `useState` hook?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
```jsx
|
||||
setCertificates(previousItems => ...previousItems, "Front End");
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
```jsx
|
||||
setCertificates("Front End");
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
```jsx
|
||||
setCertificates().append("Front End");
|
||||
```
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
```jsx
|
||||
setCertificates(previousItems => [...previousItems, "Front End"]);
|
||||
```
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is wrong with this function?
|
||||
|
||||
```jsx
|
||||
function updateSpaceship() {
|
||||
setSpaceship(previousState => ({
|
||||
name: "Discovery"
|
||||
}));
|
||||
}
|
||||
```
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Updating a `useState` variable is not allowed inside a nested function.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
`previousState` needs to be surrounded by parenthesis.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Arrow functions should not be used inside a state setter function.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
`previousState` must be spread before `name` to ensure any other properties are not overwritten.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is a key benefit of using the `useContext` hook?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Data is stored externally.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Allow direct access to the global `window` object.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Avoid overusing local state in components.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Avoid prop drilling in deeply nested components.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which of the following statements is correct?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
`ref.current` is immutable.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
`ref.current` should be mutated during rendering.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
`ref.current` only accepts a DOM element.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
`ref.current` is just a plain JavaScript object.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What happens when the returned value of a `useRef` hook is updated?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
A re-render of the component is triggered.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
A reference to the DOM node is saved in memory.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
An associated click handler will be triggered.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
A re-render is not triggered.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How many times will this code print to the console?
|
||||
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
console.log("Nice work!!");
|
||||
}, []);
|
||||
```
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Three times.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Twice.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
None as the dependency array is empty.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Only once on initial render.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What are React custom hooks typically used for?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Executing an app's most complex functionality.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
They are not typically used, built-in hooks are preferred.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
They replace life cycle methods from previous versions of React.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Reusing stateful logic across components.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
When should you consider using the `useReducer` hook to manage state?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
When state is shared across many components.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
When speed and efficiency are critical.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To improve code readability.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
When a component's state is complex or tightly coupled.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the difference between controlled and uncontrolled forms?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Controlled uses external API's, uncontrolled does not.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Controlled is where React handles form submission, uncontrolled is where JavaScript handles it.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Controlled is where user inputs are sanitized automatically, uncontrolled if where they are not.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Controlled is where component behaviors are driven by props, uncontrolled is where component behaviors are driven by local state.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Inside a functional component, which of the following hooks should you use to fetch data?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
`useReducer`
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
`useState`
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
`useDebounce`
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
`useEffect`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What level does the `memo` function work in React?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
App
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Attribute
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Element
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Functional component
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
If you have a complex function inside a component, which hook can you use to memoize its result?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
`useEfficiency`
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
`useCallback`
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
`usePerformance`
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
`useMemo`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the `useCallback` hook?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
A hook that allows you to define a callback function.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
A custom hook not managed by React.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
A hook that checks an app's performance in development only.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
A hook that ensures a function isn't re-created each time a component re-renders.
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Which of the following statements is true about routing in React?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
React includes its own routing functionality accessible through the React class.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Routing is managed by advanced server components.
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Single-page applications don't actually use a single page for routing.
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
The `react-router-dom` library is a popular choice to handle routing in React apps.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user