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

Love it or hate it, styling (or CSS) is integral to how the web works. 

While there’s a number of ways to style a `React` component - and I’m sure you have a favorite - when you build reusable components, it’s always a good idea to expose a frictionless API for overriding default styles. 

Usually, I recommend having your components be styled via both `style` and `className` props. 

For example: 

// this should work.
<MyComponent style={{name: "value"}} />
// and this.
<MyComponent className="my-class-name-with-dope-styles" />

Now, our goal isn’t just styling the component, but to make it as reusable as possible. This means letting the consumer style the component whichever way they want, whether that be using inline styles via the `style` prop, or by passing some `className` prop. 

# Styling the `Header` Component
Let’s begin with the `Header` child component; have a look at `Header.js`.

Let's style our expandable component in this lesson!

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Conclusion

Manageable Styling for Reusable Components

Styling the `Header` Component

Manageable Styling for Reusable Components

Styling the Header Component

Styling the `Header` Component