Loading... Login Loading... Register

React Hooks Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

How do you create a custom hook in React?

Select your answer

A custom hook is a method directly in JSX.

A custom hook is a function that uses built-in hooks and starts with 'use'.

A custom hook must be a class method.

A custom hook is any function in a React component.

Question 2/15

Consider you have a component that fetches data and you want to fetch the data only when a certain prop changes. Which hook and strategy would you use?

useEffect(() => { fetchData(); }, [props.specificProp]);

Select your answer

useAsyncEffect

Use useEffect with the specific prop in the dependency array.

useState with prop hooks

useReducer to conditionally fetch data

Question 3/15

What happens if a reference created with useRef changes?

Select your answer

The component will unmount.

The state gets reset.

The component will re-render.

The component will not immediately re-render.

Question 4/15

Which hook is designed for memoizing expensive calculations?

Select your answer

useState

useMemo

useEffect

useReducer

Question 5/15

In useEffect, what does the cleanup function do?

Select your answer

It runs before the component unmounts and when dependencies change.

It does nothing, it's just a convention.

It prevents the effect from running.

It cleans up memory leaks.

Question 6/15

Why might you use useCallback in React?

Select your answer

To avoid re-rendering a component.

To clean up side effects.

To memorize a function so it doesn't change on every render unless dependencies change.

To manage state in a parent component.

Question 7/15

When should you use the useContext hook?

Select your answer

To share values between components without passing them down manually through props.

To fetch remote data.

To perform side effects.

To manage component state.

Question 8/15

When should you avoid using useMemo?

Select your answer

When calculations make the component throw errors.

For all calculations inside your component.

For trivial calculations that do not significantly impact render performance.

In every component regardless of its needs.

Question 9/15

What hook would you use to reference a DOM node in a functional component?

Select your answer

useState

useEffect

useRef

useMemo

Question 10/15

How can you update the current value of a ref object?

const myRef = useRef(initialValue);

Select your answer

setMyRef(newValue);

myRef.current = newValue;

myRef.setValue(newValue);

myRef = newValue;

Question 11/15

How can you persist a value between renders but prevent it from triggering a re-render?

Select your answer

useReducer

useCallback

useRef

useState

Question 12/15

What is the useReducer hook used for in React?

Select your answer

Rendering components conditionally.

Fetching data from APIs.

Managing side effects in components.

State management that is more complex than useState.

Question 13/15

Which hook can retain state-like value changes across renders but not cause re-renders?

Select your answer

useState

useRef

useContext

useMemo

Question 14/15

What would happen if you omit the dependency array in useEffect?

Select your answer

The effect would run after every render, similar to componentDidUpdate.

The effect would never run.

The effect would run once after the first render, similar to componentDidMount.

The component would not unmount properly.

Question 15/15

What is the purpose of the useRef hook?

Select your answer

To trigger a render in a component.

To manage state in functional components.

To store a mutable object that persists for the full lifetime of the component.

To create a reference to a DOM element that can be used across renders.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

How do you create a custom hook in React?

Available answers

A custom hook is a method directly in JSX.

A custom hook is a function that uses built-in hooks and starts with 'use'.

A custom hook must be a class method.

A custom hook is any function in a React component.

A custom hook in React is a JavaScript function that starts with 'use' and allows you to extract hook logic that can be reused across components.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

Consider you have a component that fetches data and you want to fetch the data only when a certain prop changes. Which hook and strategy would you use?

useEffect(() => { fetchData(); }, [props.specificProp]);

Available answers

useAsyncEffect

Use useEffect with the specific prop in the dependency array.

useState with prop hooks

useReducer to conditionally fetch data

By setting the specific prop in the dependency array of useEffect, you ensure that the fetchData function is called only when that prop changes.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

What happens if a reference created with useRef changes?

Available answers

The component will unmount.

The state gets reset.

The component will re-render.

The component will not immediately re-render.

References created with useRef persist across renders but do not cause the component to re-render when they change.

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which hook is designed for memoizing expensive calculations?

Available answers

useState

useMemo

useEffect

useReducer

useMemo is used for memoizing the result of an expensive calculation and will recompute it only when its dependencies change.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

In useEffect, what does the cleanup function do?

Available answers

It runs before the component unmounts and when dependencies change.

It does nothing, it's just a convention.

It prevents the effect from running.

It cleans up memory leaks.

The cleanup function returned by useEffect is executed before the component unmounts or before the effect is re-run to avoid resource leaks.

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

Why might you use useCallback in React?

Available answers

To avoid re-rendering a component.

To clean up side effects.

To memorize a function so it doesn't change on every render unless dependencies change.

To manage state in a parent component.

useCallback memorizes a function and returns a memoized version of it that changes only if one of the dependencies has changed, which can help with optimization.

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

When should you use the useContext hook?

Available answers

To share values between components without passing them down manually through props.

To fetch remote data.

To perform side effects.

To manage component state.

useContext allows you to access the current value of a context (created with React.createContext) across the component tree without prop drilling.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

When should you avoid using useMemo?

Available answers

When calculations make the component throw errors.

For all calculations inside your component.

For trivial calculations that do not significantly impact render performance.

In every component regardless of its needs.

useMemo is best avoided for trivial calculations as the optimization benefit is negated by the overhead of using the hook.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

What hook would you use to reference a DOM node in a functional component?

Available answers

useState

useEffect

useRef

useMemo

useRef can be used to directly access a DOM node or React element after a component has rendered.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you update the current value of a ref object?

const myRef = useRef(initialValue);

Available answers

setMyRef(newValue);

myRef.current = newValue;

myRef.setValue(newValue);

myRef = newValue;

You can update a ref object by directly setting its current property, e.g., myRef.current = newValue.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you persist a value between renders but prevent it from triggering a re-render?

Available answers

useReducer

useCallback

useRef

useState

useRef holds a value that persists across renders but does not cause re-renders when updated.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the useReducer hook used for in React?

Available answers

Rendering components conditionally.

Fetching data from APIs.

Managing side effects in components.

State management that is more complex than useState.

useReducer is used for state management, especially when state logic involves multiple sub-values or is complex. It is often used as an alternative to useState.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which hook can retain state-like value changes across renders but not cause re-renders?

Available answers

useState

useRef

useContext

useMemo

The useRef hook maintains a persistent value across renders that can be changed without triggering a re-render.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

What would happen if you omit the dependency array in useEffect?

Available answers

The effect would run after every render, similar to componentDidUpdate.

The effect would never run.

The effect would run once after the first render, similar to componentDidMount.

The component would not unmount properly.

If the dependency array is omitted, useEffect defaults to running the effect after each render cycle, which can lead to performance issues if not intended.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of the useRef hook?

Available answers

To trigger a render in a component.

To manage state in functional components.

To store a mutable object that persists for the full lifetime of the component.

To create a reference to a DOM element that can be used across renders.

The useRef hook is used to create a reference object which can hold a mutable value (e.g., a DOM element ref) that does not trigger re-renders when changed.