Code reuse has always been the pursuit of programmers. This article focuses on how to use React Hook to improve code reuse.
React Hook?
Hook is a new React feature that allows you to use React state and other functions without writing a class. This feature is currently available in v16.7.0-alpha, so it is not recommended for production use.
React state, hate class, confused by this? Hook to help you. Not only that, hooks can also help you reuse code elegantly.
For example
This example is created using create-react-app. You will need to install the alpha version of react and react-dom manually.
Yarn add [email protected] [email protected]Copy the code
Let’s write a component called ColoredBanner that can randomly change the background color by clicking a button:
Obviously, to implement this component, you need a state to store the color, and a click event to change the state and switch the background color.
Before we have hooks, we need to create a class and implement state management through this.state and this.setState. So how to implement Hook? Look directly at the code:
You can see that React’s state mechanism can also be used in functions. By calling the useState() method provided by React, we pass in an initial value and return an array containing two objects, color and setColor, similar to this.state and this.setstate.
We also define a method, changeColor(), that randomly selects a color and then updates the color with setColor.
How do you reuse code?
Let’s say we need to write another component that does almost the same thing as the ColoredBanner component, except that instead of requiring the user to click, a timer is set to automatically change the background.
We can’t use the ColoredBanner component directly because it has the click event logic, just the random color state update function in the ColoredBanner.
It is obvious that the logic of updating the color state randomly in the ColoredBanner component needs to be removed.
So how do we do that?
Custom hooks. Similar to Higher Order Components and Render Props.
Custom hooks for randomly updating color states:
Create a function named useRandomColor that takes two arguments, colors and initialColor, and call the setColor hook function in the changColor() method to update the color. The custom Hook is then implemented.
Used in the ColoredBanner component:
Call custom Hook useRandomColor, pass in the color array and initialize the color, destruct to return color and changeColor. The ColoredBanner component can then use this custom Hook to randomly change the background color.
Similarly, use this Hook to automatically change components with random background colors. Achieve the purpose of code reuse.
In addition to improving code reusability, custom Hook also brings another benefit. Deep states nested in the project can be divided into small hooks, which can not only avoid the problem of update failure, but also facilitate the later expansion and maintenance.
Thank you for reading
Reference:
Simple Code Reuse with React Hooks
React Hooks in Action: Building a Todo App (hint: no classes)