Gain insights into advanced React patterns with hooks. Learn about optimizing components with hooks over traditional methods like render props or higher-order components for better efficiency.

With the release of hooks, certain React patterns have gone out of style. Hooks are likely the way we’ll be writing React components for the next couple of years, so they are quite important. React patterns can still be used, but in most cases, developers will be better off using hooks. For example, they should choose hooks over render props or higher-order components. There may be specific cases where the aforementioned could still be used, but most of the time, hooks are better. That being said, this course will teach you some of the more advanced React patterns implemented with hooks.

Advanced React Patterns With Hooks

# Exporting Default Elements

If the user is reaching out for an `Expandable` OS library, like the one we made in the last lesson, they'll need the custom logic you’ve extracted into a reusable hook. They'll also need to render some UI elements. 

You could also export some default `Header`, `Body` and `Icon` elements built to make their styling more configurable. 

This sounds as if we can reuse the components we built earlier. However, we need to do some refactoring. 

The child elements for the compound component required access to some context object. We may get rid of that and solely base the contract on props. 

We'll now make our open source library more user-friendly and convenient by allowing export of default UI elements,

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Conclusion

Providing Default UI Elements

Exporting Default Elements