Custom Hooks

Last Updated :

Discuss

Comments

Question 1

What is the primary purpose of custom hooks in React?

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

Question 2

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

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

Question 3

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

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

Question 4

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

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

Question 5

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

A
useEffect()
B
useState()
C
useFetchData()
D
useDataFetcher()

Question 6

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

A
useEffect()
B
useState()
C
useMemo()
D
useRef()

Question 7

What is the advantage of using custom hooks in React?

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

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];
}

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

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];
}

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

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;
}

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

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion