Recently, I have been reading Xiu Yan’s “React in A Simple Way”. My writing style is very interesting, and there is no lack of useful things. After reread several times, I still get a lot of things. There are about 15 articles in this series. If you think it is helpful, you can give a star. If you find any problems, please feel free to correct them in the comments section.

Why React Hooks?

In the last article, we spent almost the whole text explaining the design philosophy of Hooks. The final conclusion is that function components are more in line with the design philosophy of React, which can be an answer to the above question. Besides, are there any other reasons to use React Hooks?

According to the Hooks?

Questions starting with “Why XXX” often have no standard answer, but there are some key “points”. Besides the design concept, there are also the following reasons:

  • Say goodbye to the incomprehensible Class
  • Solve problems where business logic is difficult to split
  • Make state logic reuse easy and feasible

Now let’s expand on these three points.

Say goodbye to incomprehensible Class: The two pain points of Class

What are the two biggest pain points of class components? This and the life cycle.

As you all know, there’s a lot of learning and understanding costs associated with the lifecycle after three iterations. Let’s focus on this, for example. We don’t care about the logic of the component, just look at the changeText method: it is the event listener for the Button button. When I click on the button, I expect it to change the state for me, but in fact, the program will report an error after the click occurs. The reason is simple: changeText does not get this of the component instance.

class Example extends Component {
  state = {
    text: ""
  };
  changeText() {
    // There will be an error
    this.setState({ text: 'Hello'});
  }
  render() {
    return <button onClick={this.changeText}>{this.state.text}</button>}}Copy the code

In order to solve the problem of this not meeting the expectations, the front end is also pretty much everything, which used to use bind and now favors the arrow function. But whatever it is, it is essentially a practical constraint to solve a design-level problem. Hooks are based on function components, we don’t need to care about this because there is no this, which is superior to class components on a mental and understanding level.

Solve problems where business logic is difficult to split: Hooks enable better logic splitting

Remember in the past, how did we organize business logic? Most of the time, you have to figure out what the business needs are and then split the business logic into different lifecycle functions. What does that mean? This means that the logic is coupled with the lifecycle.

In such a premise, we find that the life cycle function often deviated from the single responsibility principle, a life cycle function often need to do more than one thing inside, in a complex React applications, they often have very large volume, the internal logic is complicated, to read and maintain caused a lot of trouble, such as the following example,

class Example extends Component {
  componentDidMount() {
    // 1. Make an asynchronous call here
    // 2. Here we get some data from props and update the DOM based on this data
    // 3. Set a subscription here
    // ...
  }
  componentWillUnMount() {
    // Uninstall the subscription here
  }
  componentDidUpdate() {
    // 1. Update the DOM here based on the asynchronous data obtained by DidMount
    // 2. Here we get some data from props and update the DOM based on this data}}Copy the code

These things seem to have nothing to do with each other, and the logic seems to have been “broken” into the life cycle. For example, the logic for setting up subscriptions and uninstalling subscriptions, although logically strongly related, can only be handled in separate lifecycle functions, which is not a very sound design by any means.

With the help of Hooks, we can logically split these complex operations into separate functions: a module for managing subscriptions, a module for handling DOM, a module for retrieving data, etc. Hooks help us aggregate business logic and avoid complex components and redundant code.

Hooks make state logic reuse easy and feasible

React doesn’t provide us with a posture for state logic reuse at the native level, so in the past, we relied on the component design modes such as HOC and Render Props. However, these design modes are not a panacea. They not only realize logic reuse, but also destroy the structure of components. One of the most common problems is the phenomenon of “nested hell”.

React provides a native approach to reusing state logic. Now you can use custom Hooks to fix state reuse.

Keep your head: Hooks are not everything

For all the good of which Hooks are, it is important to be clear that they have some limitations, primarily the following:

  • Hooks are not yet fully capable of complementing class components for function components: getSnapshotBeforeUpdate, componentDidCatch
  • “Lightness” is almost a functional component of the gene, which may make it less able to digest “complexity” well: If functional components are used to solve complex business problems, the separation and organization of logic can be a big challenge. The boundary between coupling and cohesion can sometimes be really difficult to grasp. Functional components give us a degree of freedom, but also put higher demands on the level of developers
  • Hooks have strict rules when it comes to use: Without remembering and implementing Hooks’ principles, and without a firm grasp of the Hooks’ key principles, it’s easy to turn your React project into a crash site

Related articles

  • React Advanced series: Hooks Design Motivations

Write in the last

This article first in my blog, uneducated, unavoidably have mistakes, the article is wrong also hope not hesitate to correct!

If you have questions or find mistakes, you can ask questions and errata in the comments section,

If you like or are inspired by it, welcome star and encourage the author.