From 66362872ed85dadb29b3501ac64252842f118fde Mon Sep 17 00:00:00 2001
From: Mitch <69795655+mitchellabrouwer@users.noreply.github.com>
Date: Fri, 18 Oct 2024 20:47:04 +1100
Subject: [PATCH] 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>
---
 .../66f1a417757b6ca4eecd89d6.md               | 236 ++++++++++--------
 1 file changed, 136 insertions(+), 100 deletions(-)

diff --git a/curriculum/challenges/english/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md b/curriculum/challenges/english/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md
index 5798c888457..677b5b4c983 100644
--- a/curriculum/challenges/english/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md
+++ b/curriculum/challenges/english/25-front-end-development/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md
@@ -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.