Why are custom hooks useful?

They help extract reusable logic from components, making your code modular, readable, and easier to test.

How can you create a custom hook in React? | FullStackPrep.Dev

Q: What is a custom hook in React?

A custom hook in React is a function that uses built-in hooks like useState or useEffect to encapsulate and reuse component logic.

💡 Concept Name

Custom Hooks in React – A way to extract and reuse stateful logic using functions that start with use.

📘 Quick Intro

Custom hooks are JavaScript functions that leverage React hooks like useState or useEffect internally. They allow you to share common logic between components without duplicating code.

🧠 Analogy / Short Story

Think of custom hooks like reusable kitchen tools. Instead of chopping veggies by hand every time, you use a food processor that automates it. Custom hooks bundle common logic so components don’t have to repeat it every time.

If multiple recipes need chopped onions, rather than chopping in each recipe, use a shared chopper. Likewise, if multiple components need the same logic (like fetching data), create a custom hook once and reuse it everywhere.

This keeps your kitchen (or codebase) clean, reduces redundancy, and boosts efficiency.

Hooks are modular by nature, and custom hooks make your logic as pluggable and maintainable as your components.

🔧 Technical Explanation

🔄 Custom hooks are regular functions that call built-in hooks like useState, useEffect, etc.
🔤 They must start with the word use to follow React's rules of hooks.
♻️ Used to encapsulate reusable logic such as form handling, data fetching, timers, etc.
📦 They return values (or functions) just like normal JS functions and can be used in multiple components.
🔗 They help in separating concerns and keeping components clean and focused.

💻 Real Code Example


// useWindowWidth.js
import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

export default useWindowWidth;

// App.js
import React from 'react';
import useWindowWidth from './useWindowWidth';

function App() {
  const width = useWindowWidth();
  return <h1>Window width: {width}</h1>;
}

❓ Interview Q&A

Q1: What is a custom hook in React?
A: It's a reusable function that encapsulates logic using built-in React hooks.

Q2: Why would you create a custom hook?
A: To avoid code duplication and keep components clean and focused on UI.

Q3: Do custom hooks need to follow any naming convention?
A: Yes, they must start with the word use so React can enforce rules of hooks.

Q4: Can a custom hook use multiple built-in hooks?
A: Yes, it can combine useState, useEffect, and others.

Q5: Can custom hooks call other custom hooks?
A: Absolutely. Hooks can be composed for better abstraction.

Q6: What are some common use cases for custom hooks?
A: Data fetching, form handling, timers, scroll position tracking, etc.

Q7: Do custom hooks retain state across components?
A: No, each usage of the hook maintains its own isolated state.

Q8: Are custom hooks tied to any specific component type?
A: No, they can be used in any functional component.

Q9: Can a custom hook return JSX?
A: No, hooks return data or functions, not UI elements.

Q10: How do custom hooks improve testability?
A: They separate logic from UI, making logic easier to test independently.

📝 MCQs

Q1. What must be true about a custom hook's name?

It must end with 'Hook'
It must start with 'React'
It must start with 'use'
It must be in PascalCase

Q2. What can a custom hook return?

Only JSX
CSS styles
Data and functions
DOM nodes

Q3. Why use a custom hook?

To style components
To compile JSX
To reuse logic across components
To avoid importing React

Q4. What React feature do custom hooks use internally?

Redux store
JSX parser
Built-in hooks like useState
React Router

Q5. Can custom hooks trigger re-renders?

No
Yes, if they use state or effect hooks
Only in class components
Only on mount

Q6. Which of the following is a valid custom hook name?

useTimer
TimerHook
myHook
getTimer

Q7. Are custom hooks supported in class components?

Yes
Only in class components
No, only in functional components
Only with Redux

Q8. How does React identify a custom hook?

By JSX return
By class inheritance
By export default
By its name starting with 'use'

Q9. What helps in separating logic from UI in React?

Props drilling
Global state
Inline styles
Custom hooks

Q10. Can custom hooks use context or reducers?

No
Only context
Only reducers
Yes

💡 Bonus Insight

Custom hooks make your code DRY (Don’t Repeat Yourself). You can even publish your custom hooks as npm packages to share with the React community. They are a powerful abstraction layer in large-scale React applications.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon

How can you create a custom hook in React?