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

# Controlled vs. Uncontrolled Elements
Consider a simple input field. 


In React, a controlled input element will be defined like this: 

Hmm, that’s different.

A controlled input component has its `value` and `onChange` handler managed **externally**.

This is exactly what we aim for when implementing the control props pattern. We want the internally-managed state to be manageable from the outside via props! 

# Implementing in `Expandable`
## How it Works
The implementation is quite simple, but we need to understand how it works before we delve into writing some code. 

The default usage of the `Expandable` component is as shown below: 

<Expandable>
   <Expandable.Header>
       {someHeader}
    </Expandable.Header>
    <Expandable.Icon />
    <Expandable.Body>{someContent}</Expandable.Body>
 </Expandable>


Within the `Expandable` component, the `expanded` value is internally managed and communicated to the children. 

If we want to make`Expandable` a controlled component, then we need to accept a prop which defines the `expanded` value externally. 

For example: 

In this lesson, we'll make the Expandable component work so that the elements expand one at a time

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Conclusion

How Control Props Work

Controlled vs. Uncontrolled Elements

Implementing in `Expandable`

How it Works

How Control Props Work

Controlled vs. Uncontrolled Elements

Implementing in Expandable

How it Works

Implementing in `Expandable`