Module 5.3: Custom Hooks - The Secret Weapon

🎯 What You’ll Learn

By the end of this lesson, you’ll master:

• Custom Hook Mindset: Understand how to separate Business Logic from UI Components.
• DRY Principle (Don’t Repeat Yourself): Reuse complex logic across different components.
• Building Practical Hooks: Hands-on experience writing popular hooks like useDocumentTitle, useWindowSize, and useDebounce.

1. The Mindset: Separating Logic from UI

Before Custom Hooks, sharing stateful logic across components was challenging. Custom Hooks empower you to extract logic from your components for easier testing and reuse.

1.1. Custom Hook Rules

1. Name starts with use: For example, useUser, useAuth. This is a mandatory convention that enables React’s ESLint functions to check your hooks.
2. It’s a JavaScript function: You can call useState, useEffect, or other hooks inside it.
3. Operates independently: Each time a component uses a hook, it creates its own separate state and effects (it doesn’t share state between components that use the same hook).

2. Practical Labs

Lab 1: Image Widget (useWindowSize)

Build a widget that displays screen size information and dynamically changes an image based on screen dimensions (Mobile/Tablet/Desktop).

• Features: Display current width/height, corresponding device icon (Mobile/Tablet/PC), and change background color based on breakpoints.
• Technique: Write your own useWindowSize hook and use it within a component.

💡 Tip:

• Define breakpoints: Mobile (< 640px), Desktop (>= 640px).
• Use useWindowSize to get the width.
• Conditionally render: width < 640 ? <MobileIcon /> : <DesktopIcon />.

Lab 2: Smart Search (useDebounce)

Build a smart search box that reduces the number of API requests.

• Features: Search input, display “simulated” results, or make actual API calls.
• Technique: Implement useDebounce to delay processing search logic until the user stops typing.

💡 Tip:

• useDebounce(value, delay) returns the debounced value.
• useEffect will listen for debouncedValue instead of the original value from the input.
• Display “Searching…” state when value differs from debouncedValue.

Lab 3: Scroll Progress & To Top (useScroll)

Create a progress bar that shows reading progress and a “Back to Top” button that appears only when scrolling down.

• Features:
  • A horizontal progress bar at the top of the screen that tracks scroll position.
  • A “Back to Top” arrow button that appears when scrolled past 300px.
• Technique: A Custom Hook useScroll returns the scrollY position and calculates the percentage of the page read.

💡 Tip:

• useScroll listens to the window’s scroll event.
• Calculate percentage: (scrollTop / (scrollHeight - clientHeight)) * 100.
• The “Back to Top” button uses window.scrollTo({ top: 0, behavior: 'smooth' }).

3. Key Takeaways

1. Custom Hooks are React’s most powerful tool for logic reuse.
2. Separation of Concerns: Components should primarily contain UI; push complex logic into Hooks.
3. Librarys: In practice, consider using optimized hook librarys like usehooks-ts, react-use, or ahooks before writing your own (unless for learning purposes).

4. References

• React Docs - Reusing Logic with Custom Hooks 
• usehooks-ts (Reference library)