2 Advanced component patterns

 

This chapter covers

  • Providing global state with the Provider pattern
  • Managing complex component structures with the Composite pattern
  • Creating clean components with the Summary pattern

The construction world, with projects ranging from sky-touching skyscrapers to peaceful neighborhood homes, adheres to a universal set of principles. In both architecture and construction, regardless of project size, there is a steadfast commitment to core engineering principles, which include designing load-bearing structures, selecting appropriate materials, and ensuring overall stability and safety.

In the digital realm, React development is committed to its own set of construction principles. Although the outer aesthetics and specific materials may differ, the underlying architectural principles remain constant.

Within React, as in software design in general, these principles are embodied in design patterns. This chapter will take an in-depth look at three foundational patterns used in modern React applications:

  • Provider
  • Composite
  • Summary

Much like the blueprints and load-bearing structures in physical construction, these patterns, shown in figure 2.1, provide the framework for building stable and scalable React projects.

Figure 2.1 The three design patterns that we'll take a closer look at in this chapter, illustrated as though they're construction blueprints. I’ll go over each illustration in detail in the appropriate section.
figure

2.1 The Provider pattern

2.1.1 Inventing a provider

2.1.2 Creating a dedicated provider component

2.1.3 Avoiding rendering everything

2.1.4 Creating beautifully typed selectable contexts with the recontextual tool

2.1.5 How useful is the Provider pattern?

2.2 The Composite pattern

2.2.1 The simple beginnings

2.2.2 Complexity increases

2.2.3 The ideal JSX

2.2.4 Implementation with composite components

2.2.5 How useful is the Composite pattern?

2.3 The Summary pattern

2.3.1 A single custom hook

Summary