Skip to content
QuiznExam

Custom Hooks in React

Test your knowledge of creating and using custom Hooks in React, including reusable stateful logic, naming conventions, useState, useEffect, and Hook rules.

15
Questions
12 min
Time limit
Medium
Difficulty

No sign-up needed · Last updated:

Save your score

At least 8 characters.

Forgot password?

Related quizzes

All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open

  1. 1. What is the primary purpose of a custom Hook in React?

    • A. To create reusable stateful logic
    • B. To replace React components
    • C. To style components
    • D. To create HTML elements
    Show answer

    A. To create reusable stateful logic

    Custom Hooks allow developers to reuse stateful logic across multiple React components.

  2. 2. What naming convention must a custom Hook follow?

    • A. It must start with an uppercase letter
    • B. It must start with the word use
    • C. It must end with Hook
    • D. It must contain the word React
    Show answer

    B. It must start with the word use

    Custom Hooks should start with use, such as useFetch or useForm, so React and developers can recognize them as Hooks.

  3. 3. Which of the following is a valid custom Hook name?

    • A. fetchData
    • B. FetchDataHook
    • C. useFetch
    • D. customFetch
    Show answer

    C. useFetch

    A custom Hook name should begin with use, making useFetch a valid name.

  4. 4. Can a custom Hook use built-in React Hooks such as useState and useEffect?

    • A. Yes
    • B. No
    • C. Only useState
    • D. Only useEffect
    Show answer

    A. Yes

    Custom Hooks can call built-in Hooks such as useState, useEffect, useMemo, and other Hooks.

  5. 5. What does a custom Hook primarily allow developers to share?

    • A. Rendered JSX
    • B. Stateful logic
    • C. CSS files
    • D. HTML templates
    Show answer

    B. Stateful logic

    Custom Hooks are designed to share reusable stateful behavior rather than share rendered UI.

  6. 6. Which statement about custom Hooks is correct?

    • A. A custom Hook must return JSX
    • B. A custom Hook can return values, objects, arrays, or functions
    • C. A custom Hook can only return a string
    • D. A custom Hook cannot return anything
    Show answer

    B. A custom Hook can return values, objects, arrays, or functions

    A custom Hook can return whatever data or functions are useful to the component using it.

  7. 7. Which built-in Hook is commonly used inside a custom Hook to manage local state?

    • A. useState
    • B. useHTML
    • C. useComponent
    • D. useStyle
    Show answer

    A. useState

    useState is commonly used inside custom Hooks when reusable logic needs to manage state.

  8. 8. Which built-in Hook is commonly used inside a custom Hook for side effects?

    • A. useEffect
    • B. useHTML
    • C. useRender
    • D. useComponent
    Show answer

    A. useEffect

    useEffect can be used inside custom Hooks to perform side effects such as fetching data, subscribing to events, or interacting with external systems.

  9. 9. Where can a custom Hook generally be called?

    • A. Only inside class components
    • B. Inside React function components or other custom Hooks
    • C. Only inside HTML files
    • D. Inside CSS files
    Show answer

    B. Inside React function components or other custom Hooks

    Custom Hooks follow the Rules of Hooks and can be called from function components or other custom Hooks.

  10. 10. Which rule applies to Hooks used inside a custom Hook?

    • A. Hooks can be called conditionally
    • B. Hooks can be called inside loops only
    • C. Hooks should be called at the top level
    • D. Hooks must be called inside event handlers
    Show answer

    C. Hooks should be called at the top level

    Hooks should be called at the top level of a function component or custom Hook, not inside conditions, loops, or nested functions.

  11. 11. What is a major benefit of using custom Hooks?

    • A. They eliminate the need for components
    • B. They reduce duplication of stateful logic
    • C. They automatically improve application performance
    • D. They replace JavaScript
    Show answer

    B. They reduce duplication of stateful logic

    Custom Hooks make it easier to reuse common stateful behavior instead of duplicating the same logic across components.

  12. 12. If two components use the same custom Hook, do they automatically share the same state?

    • A. Yes, always
    • B. No, each Hook call has its own state
    • C. Only when useState is used
    • D. Only in class components
    Show answer

    B. No, each Hook call has its own state

    Custom Hooks share logic, not state itself. Each component calling the Hook receives its own independent state.

  13. 13. Which example correctly defines a simple custom Hook?

    • A. function useCounter() { const [count, setCount] = useState(0); return { count, setCount }; }
    • B. class useCounter() { return count; }
    • C. function CounterHook() { useState(0); }
    • D. function hookCounter() { return useState(0); }
    Show answer

    A. function useCounter() { const [count, setCount] = useState(0); return { count, setCount }; }

    useCounter follows the custom Hook naming convention, uses useState correctly, and returns reusable state-related values.

  14. 14. Can one custom Hook call another custom Hook?

    • A. Yes
    • B. No
    • C. Only if both use useState
    • D. Only inside class components
    Show answer

    A. Yes

    Custom Hooks can call other custom Hooks, allowing reusable logic to be composed into more specialized Hooks.

  15. 15. Which statement best describes the relationship between custom Hooks and UI?

    • A. Custom Hooks must render UI
    • B. Custom Hooks are primarily for sharing logic, while components are responsible for rendering UI
    • C. Custom Hooks replace JSX
    • D. Custom Hooks can only be used for styling
    Show answer

    B. Custom Hooks are primarily for sharing logic, while components are responsible for rendering UI

    Custom Hooks encapsulate reusable logic and stateful behavior, while React components use that logic to render the user interface.