The Builder configuration pattern in React

Lately I’ve been doing a lot of work with React Native and I’ve been relying on the use of a lot of third-party npm modules to reliably get things done. As such I’ve seen two popular patterns for configuration, the builder pattern and the options object pattern. This article will focus on just exactly what the builder pattern is (as you may have guessed from the title) and there will be a follow-up article that dives into the options object pattern.

In modern JavaScript options object’s are far more popular as the language is now dynamic enough to not enforce such verbosity that the builder pattern can create. But nonetheless it’s still present and certainly has it’s uses in React and can be used to supercharge any React application.

The builder pattern can often be used to simplify client code that creates complex and reusable view definitions and will often be popular/familiar with developers who like the concept of method chaining.

Builder’s are completely mutable right up to the point where the builders get built which scopes for the lazy-loading of properties or to inject properties as they are scoped.

I’m not going to write how the builder pattern can be implemented into plain ol’ JavaScript as I’m going to keep this article React-related but if you want to do some digging on just exactly what the builder pattern isand how you can use it in JavaScript then Addy Osmani’s famous JavaScript Design Patterns book is a great starting point. (afaik the book has not been updated for ES6 compatibility and for that you want to check out ES6 classes.)

const NewCar = new Car.Builder()
    .withColour("Black")
    .withGears(7)
    .withTopSpeed(250)
    .build();
...
<NewCar />

A builder being built…