Hooks: One Component Rewrite History

Building Death Star with React

Hello everyone and let’s break backward compatibility with Hooks ;) It’s a joke, just a joke, relax. The best thing about Hooks is that they are 100% compatible with React’s older APIs.

Here I want to talk about and demonstrate the power of React’s new Hooks API, and how it can increase the readability of your code, and decrease the number of lines of code by providing with more reasonable API.

Let’s compare the new and old API’s a little:

Advantages

1. Hooks make stateful functional components available, so you don’t need to write a class component to use states.
2. You don’t need to destructure your props in each class method. It’s decreasing a lot of lines of code and is increasing readability by making your functions smaller.
3. You will never forget to set the initial value of the state.
4. Lifting state up will affect fewer lines of code, function and state usages will not be changed. You will only change the part where data and functions are received or get destructured.
5. It can force you to decouple your component to two smaller ones because of the impossibility of using the same variable name in the current component scope because now we have the function as a component and one scope with it. Of course, we can still continue writing big components, but now it can be more challenging.

I think this is enough to decide whether it’s time to dive into the new world of React. Let’s see how easy it is.

Now, when it is time to learn and use a new way of creating components, it is a good opportunity to give and change one of your already written and actively used in production components with Hooks. This can help you to understand the differences between the new and old API’s because you can compare two approaches, which means you will focus on understanding Hooks itself instead of understanding the functionality you want to implement.

A few months ago, I wrote a small component called “swipe to dismiss.” Its function is very easy as you can guess from the name, check it out here.

On the first screenshot, you can see the old code, on the second one, the new code implemented with Hooks.

Screenshot N1: Higher-Order Component

and here is the same functionality re-written using Hooks:

Screenshot N2: Functionality re-written using Hooks

And here is how you can use it:

Screenshot 3: Hooks in usage

Here, you see how I decoupled logic from its component.

Now, let’s examine the differences line by line:

1. We don’t need constructor(props) {
2. this.node = null; now we must use new refs API for the component mutable state const node = ref.current;
3. No initial state object like this.state = { . Now we need to define each state separately like const [removing, setRemoving] = useState(false); where the first property is value, and the second is setter/updater.
4. componentDidMount() { converts to useEffect which runs before and after render, and relies on the second parameter, the dependencies array, which encapsulates the logic of comparing current props with the next props. It’s the most important and hard-to-understand part of Hooks API, so I suggest you read about it in the official documentation.
5. onMouseMove(event) { to const onMouseUp = useCallback(() => { . useCallback is bringing simple memoization for functions and relies on the second array dependencies argument like useEffect in order to return already cached function with the same reference on each render.
6. const { pressedPosition, removing, } = this.state;andconst { distanceBeforeDismiss, direction, } = this.props; . Here you can see that in Hooks implementation, there is no destructuration part, we have access to all states and props of the component from all callbacks because they are in the same accessible scope.
7. this.setState(newState); with Hooks, there is no possibility to set multiple states at once, now you need to set each state property separately. For further you can take a look at useReducer hook, which can help you if you want a more generic way of state handling.

Here you can find easy-to-understand recipes: https://usehooks.com/ useKeyPressis my favorite one ;-)

Conclusion

So, obviously, doing this is not that hard. In my case, it looks like just syntax change. When I started I didn’t have any knowledge of Hooks API and it just took me 20 minutes to finish rewriting the whole thing. 😊

Repository link with full code.

If you liked this article, make sure to clap to make it visible for more people🙌.

Should you have any questions, just hit me up in the comments!

Check out our open roles at https://sflpro.com/job/.

Let’s talk!

Read More:

Don’t Start React with React Native

CSS Learning Roadmap