Custom Hooks

Here’s a quiz to test your understanding of React custom hooks! Explore how well you know creating reusable logic, managing state, and optimizing your React components with hooks.

Last Updated :

Discuss

Comments

Question 1

What is the primary purpose of custom hooks in React?

To modify the state of components
To handle side effects in functional components
To allow reuse of component logic across multiple components
To manage routing in React applications

Discuss it

Question 2

Which of the following is a key rule when creating custom hooks in React?

Custom hooks must be named with the prefix "use"
Custom hooks can only be used inside class components
Custom hooks require React's useContext hook
Custom hooks are not reusable across components

Discuss it

Question 3

What is the correct syntax to create a custom hook in React?

function useMyHook() {}
const useMyHook = () => {}
use function MyHook() {}
Both a and b are correct

Discuss it

Question 4

In which scenario would you most likely use a custom hook?

When you need to handle form validation in multiple components
When you want to update the CSS styles dynamically
When you need to use Redux
When you want to import static assets

Discuss it

Question 5

Which of the following is an example of a custom hook that fetches data?

useEffect()
useState()
useFetchData()
useDataFetcher()

Discuss it

Question 6

Which hook is commonly used within a custom hook to manage state in React?

useEffect()
useState()
useMemo()
useRef()

Discuss it

Question 7

What is the advantage of using custom hooks in React?

They can only be used with Redux
They make component code more complex
They allow reusing logic without changing the component structure
They prevent the use of state management libraries

Discuss it

Question 8

Given the following custom hook, what will useCounter() return?

JavaScript

function useCounter() {
    const [count, setCount] = useState(0);
    const increment = () => setCount(count + 1);
    return [count, increment];
}

An array containing the count and a function to increment it
Only the count value
A function that increments the count
The initial count value

Discuss it

Question 9

What does the following custom hook useLocalStorage do?

JavaScript

function useLocalStorage(key, initialValue) {
    const [value, setValue] = useState(initialValue);
    useEffect(() => {
        localStorage.setItem(key, value);
    }, [value]);
    return [value, setValue];
}

Stores and retrieves values from localStorage.
Fetches data from an API.
Clears localStorage on every render.
Sets the value to null by default.

Discuss it

Question 10

What does the useFetch hook return in the following code?

JavaScript

function useFetch(url) {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetch(url)
            .then((res) => res.json())
            .then(setData);
    }, [url]);
    return data;
}

null initially, then fetched data
The URL of the API
undefined after the first render
An error message

Discuss it

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion