React Patterns & Concepts

Click image or reply to this email.

Let's get started ...

There are many concepts and patterns like Render Props and Component Composition out there. Some smaller practices would be deriving state and computed properties.

However, there are only a few popular ones and I am often missing people shouting out their novel approaches!

Here is my list of some useful approaches for certain situations ...

useState/useReducer Middleware

Using useReducer over useState helps tremendously when dealing with complex state. However, both state management are missing a callback function which happen before or after the state transition:

• useState with callback

• useReducer with middleware

Context Injection

When using React Context, the default is having one top-level Provider component with a stateful value (tutorial). For one of my use cases, I found the opposite useful: multiple top-level Providers + stateless value.

Mediator Components

A React application consists of domain specific components (e.g. MessagePage) and reusable components (e.g. List). Usually the latter is used within the former. However, to keep things clean, it's a good practice to introduce mediator components (e.g. MessageList) which are bridging the domain layer to the functional layer.

What are your infamous concepts, patterns, and practices that you are using in your React projects? I would like to hear about these :-) That's it from my side for this month!

Pick of the Month

With all the blockchain hype this year, I got interested about what kind of literature is out there about people in this space. When I came across The Infinite Machine, I was hooked and listened to it in one fell swoop! It's about the founders of Ethereum and their journey from idea to launch.