curriculum/challenges/english/blocks/quiz-react-state-and-hooks/66f1a417757b6ca4eecd89d6.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
Which of the following is the correct way to add a click event to a button in React?
<button onClick={{ handleLoginClick }} />
<button onclick={handleLoginClick} />
<button onClick={handleLoginClick()} />
<button onClick={handleLoginClick} />
What is a React Synthetic Event?
A type of JSX element for inputs and submit events only.
A type of JSX element for submit events only.
A way to alter the bubbling phase of event propagation to be more user friendly.
A wrapper around native events like click and submit events.
Which of the following is a common prefix used for naming event handler functions?
isHandling
hasHandled
handling
handle
What are the three major stages in React's rendering?
Handshake, loading and hydration.
Fetching, decoding and execution.
Mounting, updating and unmounting.
Triggering, rendering and committing.
Which of the following is the correct way to work with the useState hook?
const [count, setCount] = useState<0>;
const <count, setCount> = useState(0);
const count, setCount = useState(0);
const [count, setCount] = useState(0);
Which of the following is NOT a valid attribute used for handling React events?
onChange
onClick
onSubmit
onHandle
Which of the following is the correct way to update array state?
const [certificates, setCertificates] = useState([]);
setCertificates(previousItems => previousItems, "Front-End");
setCertificates.push("Front-End");
setCertificates().append("Front-End");
setCertificates(previousItems => [...previousItems, "Front-End"]);
What is wrong with this function?
function updateSpaceship() {
setSpaceship(previousState => ({
name: "Discovery"
}));
}
Updating a useState variable is not allowed inside a nested function.
previousState needs to be surrounded by parenthesis.
Arrow functions should not be used inside a state setter function.
previousState must be spread before name to ensure any other properties are not overwritten.
Which of the following is the correct way to update state to remove items from an array?
const removeItem = (id) => {
setItems((prevItems) => prevItems.reduce((item) => item.id));
};
const removeItem = (id) => {
setItems((prevItems) => prevItems.map((item) => item.id !== id));
};
const removeItem = (id) => {
setItems(() => delete item.id !== id);
};
const removeItem = (id) => {
setItems((prevItems) => prevItems.filter((item) => item.id !== id));
};
What is the ref attribute typically used for in React?
It is used to audit for performance issues in react components.
It is used to audit for accessibility issues in react components.
It is used to remove DOM nodes.
It is used to access a DOM node.
Which of the following is the correct way to access the current value for a ref?
const inputRef = useRef(null);
inputRef.initial
const inputRef = useRef(null);
inputRef.val
const inputRef = useRef(null);
inputRef.curr
const inputRef = useRef(null);
inputRef.current
How many times will this message be logged to the console?
useEffect(() => {
console.log("Nice work!!");
}, []);
Three times.
Twice.
None as the dependency array is empty.
Only once on initial render.
What are React custom hooks typically used for?
They are used to execute an app's most complex functionality.
They are not typically used, built-in hooks are preferred.
They replace life cycle methods from previous versions of React.
They are helpful for reusing stateful logic across components.
How many times will this message get logged to the console?
useEffect(() => {
console.log("I love freeCodeCamp!");
});
It will be logged anytime a form is submitted or a click event happens.
It will be logged twice.
It will only get logged once.
It will be logged each time the component renders.
Which of the following is the correct way to prevent a browser refresh for an onSubmit event?
function handleSubmit(event) {
event.defaultPrevent();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button>Submit</button>
</form>;
function handleSubmit(event) {
event.Default();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button>Submit</button>
</form>;
function handleSubmit(event) {
event.prevent();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button>Submit</button>
</form>;
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button>Submit</button>
</form>;
Which of the following hooks is typically used to fetch data?
useReducer
useState
useDebounce
useEffect
Which of the following is NOT a valid property on the native Event object?
currentTarget
type
target
prop
Which of the following rendering stages occurs when React detects that something has changed and the user interface (UI) might need to be updated?
setter
commit
loop
trigger
Which of the following stages refers to when React takes the prepared changes from the virtual DOM and applies them to the real DOM?
trigger
render
setter
commit
What is the purpose of the dependencies in a useEffect?
useEffect(() => {
// Your side effect logic (usually a function) goes here
}, [dependencies]);
The optional dependencies argument does not effect anything dealing with the useEffect.
The optional dependencies argument makes the effect run on an infinite loop.
The optional dependencies argument is used to prevent the effect from running.
The optional dependencies argument controls when the effect runs.