[Translation] Detailed analysis of new features of React 16+, part 1: general information

[Translation] Detailed analysis of new features of React 16+, part 1: general information

Today we present the first part of the translation this great stuff. It is devoted to a detailed analysis of the new features of React, which have appeared in this library since version 16. The author of this material has been programming for 5 years. In the past he was a designer and tried himself as an illustrator. He included comics in his article, which, in his opinion, will help readers to better understand what is being said here.
In the original, this article is called “Reintroducing React: every React update since v16 demystified”. The title hints that the reader, perhaps already familiar with React, is invited to get acquainted with this library again. This re-introduction to React will help him streamline what he already knows and discover something new.

How to read this material?

Before reading this article, you can download the e-book , which is free. It is the same material, designed as a standalone PDF, Epub, or Mobi file. The book provides code examples with syntax highlighting. It may be more convenient for you to read the material and work on the code in parallel, based on the book. In addition, it is recommended to use the this repository. In it you can find the code of the examples considered here.

For whom and why was this material written?

I wrote my first React application about 4 years ago. Since then, the fundamental principles of React have not changed. Before us is all the same declarative code and all the same components. All this is good, but how exactly modern React applications are written is different from what it was before. For several years, a lot of new things have appeared in React, and something has been removed from this library.

If you studied React for a long time - it is quite possible that you are not particularly well-versed in the new features of this library. In addition, even those who follow innovations may well “get lost” in them, so to speak. How to rectify the situation, having understood that it is necessary to reject from the old, and what of the new - to accept? How to highlight those modern features of React that may be particularly useful?

Even I, an experienced programmer, sometimes get lost if I have to forget something old and study something new instead. It may look as difficult as learning a completely new concept.

If you also feel something like this, then I hope my work will be able to help you put everything in its place.

The same can be said about those who have just begun to study React.

Around there is a lot of outdated information. If you study React for some fairly old publications, then you can certainly learn the basics. However, in modern React-development there are many new interesting features that deserve your attention. It is best to find out about these opportunities as early as possible, rather than trying to forget the old methods of work later and learn new ones instead.

As a matter of fact, here we will examine in detail everything new that appeared in React 16+.

What's new in React 16 +?

At first glance it may seem that in React, after the release of version 16, not so many changes have been made. But actually it is not. That's what we'll talk about:

  1. New component life cycle methods.
  2. Simplified state management using the Context API.
  3. The contextType property and context API features.
  4. Profiler application: diagrams, interaction analysis.
  5. Lazy loading of materials using React.lazy and Suspense.
  6. Functional version of components based on PureComponent, created with React.memo.
  7. Simplify React applications using hooks.
  8. Advanced React application design patterns based on hooks.

Each item in this list is presented in the form of a separate large section. The first section is devoted to new methods of the life cycle of components.

Dear readers! Now we are thinking about whether to translate the sequel of this material. If the topic of React-development is close to you - we invite you to take part in the vote and comment in the comments.

<< a>

Source text: [Translation] Detailed analysis of new features of React 16+, part 1: general information