【React】Advanced React Patterns

The actual contents comes from Epic React’s Advanced React Patterns Workshop.

If you have interests, you can check Epic React by Kent C. Dodds.

Context Module Functions

The benefit of this is if we have to call multiple dispatch, if we leave them to let user to call, they might miss a dispatch call, so it’s better to pass the dispatch to the context module function.

Compound Components

Compound components are components that work together to form a complete UI.

Implicit State

By mapping all children to new child with additional props passed implicitly.

Flexible Compound Components

We need some way for our compound components to implicitly accept the props regardless of where they’re rendered within the Toggle component’s “posterity”

The way we do this is through context.

We can create a context system, and provide the things we want to pass to the children into Provider, and consume the context in child.

Prop Collections

In more complex components, the list of props that need to be applied to elements can be extensive, so it can be a good idea to take the common use cases for our hook or components and make objects of props that people can simply spread across the UI they render.

Prop Getters

This allow us our consumers like button to have their own logic and whatever else they want to put.

Getting enhanced capabilities from Props Getters.

State Reducer

By using this pattern, it allows our custom hooks or components to specify their own reducer.