Why You Should Consider Moving to React Hooks?

React Hooks

If you’ve been working with React for a long period of time, we would like to introduce to you React Hooks, which may also make your coding life easier

Developers rejoice! The React Hook concept — launched at React Conf 2018 — entails. React Hook patterns that enable us to use state, lifecycles, and (almost) any other React features without using classes.

To avoid duplicating code and handling many Components, we use Higher-Order Components (HOC) to create reusable logic for future cases.

Higher-Order Components

Wrapping too many HOCs together can cause `Wrapper Hell`, and the code below might appear. That’s quite complex to read and understand, isn’t it?

Wrapper Hell

In addition, you may often use Functional Components to reuse logic by passing data to props.children or cloning children with many props. However, Functional Components does not have a constructor, extending from React. That’s because React methods (lifecycles) can’t be applied. This is called Stateless Component, which means you can’t declare and manage state here. And there is a big problem when using Functional Components:

You cannot manage the rendering of components.

Functional Components will render after any properties are changed.

Passing data to props.children and cloning children with many props.

But now with React Hooks, you no longer have to concern yourself with such a problem. This helps you extract, reuse logic, and kill this keyword. We use Components like Functional Components from Stateless to Stateful Components.

React Hooks

Furthermore, React Hooks help you streamline the code and minify better.

1. State

• Class

State in Class

• Hook

State in Hook

- Transition ability from Stateless to Stateful

- Shortened code

- More professional-looking interface!

2. Lifecycles

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

In React class components, the componentDidUpdate method calls after rendering finishes. However, componentDidUpdate does not call after the first rendering. Therefore, we need componentDidMount and write the same code here.

Lifecycles of Hooks and Classes

Moreover, you can limit the number of calls after each rendering only by watching the state (EX: count) you want.

React Hook with the cleanup

You can also subscribe and cleanup with return in useEffect. No need to subscribe to componentDidMount and clean it in componentWillUnmount!

For more information, please refer to this link : https://reactjs.org/docs/hooks-intro.html

With all of these advantages, we’d highly recommend using React Hooks. How about you?

Please feel free to share your thoughts with us below. Thank you for reading!

If you would like to join Manabie and work together to create a positive impact in education, visit us at: manabie.com/careers