An example of using structural templates in React.js?

Question

JavaScript

Life situations when using structural templates (decorator, factory, mediator, facade, observer, singleton, etc.) when developing with React.js.
I would be grateful for code examples, or descriptions of the problem / solution.

Answer 1

Decorator. Many HOCs are decorators/proxies.
Facade. In the world of React, I would call selectors facades. We hide the complex structure of the store (and it doesn't matter what is used - flux, redux, context, whatever) behind simple getter functions. It can be both regular getters and calculated values.
Mediator. Let's say there is a form with two fields with "start" and "end" dates. The first cannot be given a value higher than the second, and vice versa, the second cannot be given a value lower than the first. This is where the main component of the form comes into play, which is the mediator, and assigns different behavior to these components, depending on their values. They don't know about each other.
Observer. The same HOC connect from react-redux is essentially an observer.
Adapter. You can write your own adapters on top of complex UI elements (range, datepicker, etc..), which will have a specific programming interface. This will allow you to change third-party libraries (you never know, the author will abandon support), while maintaining the programming interface inside the application.
React itself has other patterns. For example, slot pattern, render props.

Answer 2

From my point of view, a slightly strange question, because "in development on React" you can remove and insert any framework from here or just leave it "in development".
For example, decorators and an observer are used when managing state through mobx, but it is not necessary to render this state using React in this case.
You need to take a specific pattern and see what tasks it solves, and then how to render the result of its application does not really matter.