preface

This article is free translation, translation process mixed with my own understanding, if misleading, please give up reading.

Making Sense of React Hooks by Dan Abramov

This week, Sophie Alpert and I spoke at the React Conf conference about Hooks proposals, and Ryan Florence went further.

I highly recommend that you watch the opening keynote to see exactly what kind of problem we are trying to fix with Hooks. However, spending almost an hour watching the video is already a big investment for the reader (let alone the 1 hour, 35 minutes and 29 seconds), so I decided to briefly share a few of my thoughts or thoughts on React Hooks.

Note: Hooks are still an experimental proposal in React, you don’t need to learn them right away. At the same time, please note that this article is purely my personal opinion, which has nothing to do with the React Team. Please do not write it at will.

The body of the

Why Hooks?

As you all know, we rely on components and top-down data flow to break down a huge application into small, independent and reusable blocks of code. However, because logic is stateful, it cannot be extracted as a function or component, so we cannot further decompose complex components into small, simple and reusable components. This is what people often say: “React doesn’t help them achieve a separation of concerns.”

The above scenario is quite common, and includes animations, form processing, associating external data, and other scenarios that we want to do separately within the component. When we try to solve this kind of problem with components alone, we often end up with the following results:

  • Large components that are difficult to test and refactor.
  • Write repetitive logic in different components and lifecycle functions.
  • Complex patterns such as Render props, high order components are used.

We feel that Hooks are the best way to solve these problems. Hooks let us organize logic within a component into separate reusable units.

Here are screenshots and links from two React users demonstrating the benefits of using React Hooks.

【 Sunil Pai @ threepointone 】

【 Pavel Prichodko @ PRCHDK 】

Hooks apply the React philosophy (explicit data flow and composition over inheritance) within components rather than between components. That’s why I think Hooks naturally fit the React component model.

Unlike the render props and higher-order component patterns, Hooks do not introduce additional nesting layers into your component tree. At the same time, it doesn’t suffer from mixins.

If your first instinct is to dislike Hooks, I suggest you give them a fair chance and try to use them. I’m sure you’ll like it.

Do Hooks make React bloated?

Before we get into the details of Hooks, you might worry that introducing Hooks will introduce some additional concepts. This is a perfectly normal question. Objectively, there is certainly some cognitive cost to learning Hooks in the short term, but the effect is the opposite as you become more familiar with them. (That is to say, in the future, you can use the knowledge gained in the short term to gain long-term benefits.

Assuming that the React Community embraces the Hooks proposal, it will greatly reduce the number of concepts you need to weigh when developing your React application. Hooks allow you to only write functions instead of constantly switching between functions, classes, higher-order Components, and render props.

In terms of implementation size, Hooks give React a size increase of approximately +1.5KB(min+gzip). While this is not much, using Hooks might reduce the package size because code using them is much easier to compress than its equivalents using Classes. The following example may seem extreme, but it shows a lot of why.

Let’s also compare how well these minify

The introduction of Hooks didn’t bring some cliff-like upgrades to React. Even if you use Hooks in new code, existing code will still work, they will not be affected. In fact, this is what we often recommend — do it gradually and don’t do any extensive rewrites. On some critical code, it is wise to wait and see instead of writing it right now. However, we would appreciate it if you could use [email protected] alpha and send us some feedback. You can post your comments and questions you would like feedback on to Hooks Proposal and report any bugs.

What exactly are Hooks?

Before we move on to Hooks, we need to take a moment to review code reuse.

Currently, there are many ways to reuse logic in React applications. We can write computational pure functions to compute certain values; We can also write components (function Component or classes Component) for reuse. Components are more powerful, but at the same time, they are responsible for rendering the UI. This makes them less convenient for reusing logic at non-visual levels. Eventually, we had to introduce some complex patterns to achieve this — high-level components or render props. Wouldn’t the React ecosystem be simpler if there was only one accepted way to reuse code?

Functions seem like a perfect mechanism for reusing code. The cost of sharing code by encapsulating logic in functions is minimal. However, functions cannot contain React state. In the Classes Component, it is difficult to extract behaviors such as Observables without refactoring code or introducing a new layer of abstraction: Watch window size and update the state, animate a value over time.

That is what the Hooks are for. Hooks support you to use React features in functions (e.g. state, lifecycle, context, etc.). And all it takes is one function call. React provides a set of Hooks that allow you to use the building blocks of the React app — the same ones mentioned above.

Because Hooks are just a normal javascript function, you can combine the built-in Hooks in React with your own “custom Hooks”. This way, you can turn some complex implementation into a single line of code and share it with your React application or the React community.

Build your React application with the NPM package

Note that custom Hooks are not technically part of the React feature. However, the Hooks that you implement yourself logically follow the Hooks design philosophy.

Code demo

(To be continued……)