Building a Custom Hook

Explore how to build custom hooks in React that encapsulate state management and side-effect logic. Understand how these hooks enable users to control UI rendering while you provide the underlying functionality, enhancing component flexibility and reusability.

We'll cover the following...

- Introduction
- useExpanded Custom Hook
- useEffectAfterMount Custom Hook
- Using Custom Hooks
- Quick Quiz!

Introduction

Before we go into the other advanced patterns, it’s important to understand the default way to share functionality with hooks — building a custom hook.

Only by building on this foundation can we take advantage of the other advanced patterns we will discuss.

So far, we’ve built a compound component that works great! Let’s say you were the author of some open-source library, and you wanted to expose the “expand” functionality via a custom hook, how would you do this?

First, let’s agree on the name of your open-source (OS) library. We’ll leave it as Expandable — same as before.

Now, instead of having the logic for managing the expanded state in an Expandable component that returns a Provider ...

1.Introduction

2.Compound Components Pattern

3.Control Props

4.Props Collection

5.Prop Getters

6.State Initializer

7.State Reducer

Project

8.Conclusion

Building a Custom Hook

Introduction