Web Unit 3 Sprint 9 - Class Components & Testing

Module 3: Custom Hooks

In this module, you'll learn about custom hooks in React, how to create them, and how to use them to share stateful logic between components. You'll understand the rules of hooks and best practices for custom hook development.

Custom hooks are a powerful feature introduced in React 16.8 that allows you to extract and reuse stateful logic between different components without changing your component hierarchy. This approach helps create cleaner, more maintainable code by separating concerns and reducing duplication.

While class components have their own lifecycle methods for handling state and effects, custom hooks provide a more flexible and composable way to share logic in functional components.

Learning Objectives

• Understanding stateful logic
• Creating custom hooks
• Composing hooks
• Testing custom hooks

Custom hooks follow two important conventions:

1. Their names always start with "use" (e.g., useFormInput, useLocalStorage)
2. They can call other hooks internally (both built-in and custom hooks)

By creating custom hooks, you can:

• Extract repetitive logic from components
• Share stateful logic between components
• Create reusable utilities that manage state and side effects
• Write more declarative, focused component code

Content

Practice Activities

Additional Resources