Book Image

React Design Patterns and Best Practices. - Second Edition

Book Image

React Design Patterns and Best Practices. - Second Edition

Overview of this book

React is an adaptable JavaScript library for building complex UIs from small, detached bits called components. This book is designed to take you through the most valuable design patterns in React, helping you learn how to apply design patterns and best practices in real-life situations. You’ll get started by understanding the internals of React, in addition to covering Babel 7 and Create React App 2.0, which will help you write clean and maintainable code. To build on your skills, you will focus on concepts such as class components, stateless components, and pure components. You'll learn about new React features, such as the context API and React Hooks that will enable you to build components, which will be reusable across your applications. The book will then provide insights into the techniques of styling React components and optimizing them to make applications faster and more responsive. In the concluding chapters, you’ll discover ways to write tests more effectively and learn how to contribute to React and its ecosystem. By the end of this book, you will be equipped with the skills you need to tackle any developmental setbacks when working with React. You’ll be able to make your applications more flexible, efficient, and easy to maintain, thereby giving your workflow a boost when it comes to speed, without reducing quality.
Table of Contents (19 chapters)
Free Chapter
1
Section 1: Hello React!
4
Section 2: How React works
9
Section 3: Performance, Improvements and Production!

Declarative programming

Reading the React documentation or blog posts about React, you have undoubtedly come across the term declarative. One of the reasons why React is so powerful is because it enforces a declarative programming paradigm.

Consequently, to master React, it is essential to understand what declarative programming means and what the main differences between imperative and declarative programming are. The easiest way to approach the problem is to think about imperative programming as a way of describing how things work, and declarative programming as a way of describing what you want to achieve.

A real-life parallel in the imperative world would be entering a bar for a beer, and giving the following instructions to the bartender:

  1. Take a glass from the shelf.
  2. Put the glass in front of the draft.
  3. Pull down the handle until the glass is full.
  4. Pass me the glass.

In the declarative world, you would just say: Beer, please.

The declarative approach of asking for a beer assumes that the bartender knows how to serve one, and that is an important aspect of the way declarative programming works.

Let's move into a JavaScript example, writing a simple function that, given an array of uppercase strings, returns an array with the same strings in lowercase:

  toLowerCase(['FOO', 'BAR']) // ['foo', 'bar']

An imperative function to solve the problem would be implemented as follows:

  const toLowerCase = input => { 
const output = [];

for (let i = 0; i < input.length; i++) {
output.push(input[i].toLowerCase());
}

return output;
};

First of all, an empty array to contain the result gets created. Then, the function loops through all the elements of the input array and pushes the lowercase values into the empty array. Finally, the output array gets returned.

A declarative solution would be as follows:

  const toLowerCase = input => input.map(value => value.toLowerCase());

The items of the input array are passed to a map function that returns a new array containing the lowercase values. There are some significant differences to note: the former example is less elegant and it requires more effort to be understood. The latter is terser and easier to read, which makes a huge difference in big code bases, where maintainability is crucial.

Another aspect worth mentioning is that, in the declarative example, there is no need to use variables nor to keep their values updated during the execution. Declarative programming tends to avoid creating and mutating a state.

As a final example, let's see what it means for React to be declarative.

The problem we will try to solve is a common task in web development: showing a map with a marker.

The JavaScript implementation (using the Google Maps SDK) is as follows:

  const map = new google.maps.Map(document.getElementById('map'), { 
zoom: 4,
center: myLatLng
});

const marker = new google.maps.Marker({
position: myLatLng,
title: 'Hello World!'
});

marker.setMap(map);

It is imperative because all the instructions needed to create the map, and create the marker and attach it to the map, are described inside the code one after the other.

A React component to show a map on a page would look like this instead:

  <Gmaps zoom={4} center={myLatLng}> 
<Marker position={myLatLng} title="Hello world!" />
</Gmaps>

In declarative programming, developers only describe what they want to achieve, and there's no need to list all the steps to make it work.

The fact that React offers a declarative approach makes it easy to use, and consequently, the resulting code is simple, which often leads to fewer bugs and more maintainability.