Skip to main content

React Hooks

❓ What are React Hooks ?​

Hooks are a new feature added in React from v16.8 that allows using state and other React features without writing a class.

At React Conf 2018, Sophie Alpert and Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them.

🚄 Motivation​

React hooks are introduced to solve following problems when :

Difficult to reuse stateful logic between components​

React doesn’t originally offer a way to “attach” reusable behavior to a component, thus some approaches like render props, high order component (HOC) amd mixins are introduced to wrap or abstract the logic to resolve the problem. But these methods requires us to reconstruct our component structure, resulting in a component-wrapper-hell. Moreover, mixins are later considered harmful.

After hooks have been introduced, reuseable logics are encapsulated into the hook component and can be used without modifying our component hierarchy.

Note that the render props migth still be used in some React codebase, but less common and is recommended to move to a custom hook approach.

Logic in complex components become hard to understand​

Before hooks were introduced, a component relies on lifecycle methods such as componentDidMount, componentDidUpdate to perform side effects like data fetcing, event listener setup, etc.

Thus, codes that have related logic might be forced to scatter across lifecycle methods, making it hard for maintainence/testing and breaks the principle of separation of concern. In often cases, this required to break down components into smaller ones.

To solve this, Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.

Classes confuse both people and machines​

Class component requires users to understand how the confusing concepts like this and binding work, which is confusing and make codes verbose. Moreover, classes don’t minify very well, make hot reloading flaky and unreliable, and reduce some compilation optimization benefits.

With hooks, we can use more of React’s features without classes, and enables some compilation optimizations such as Ahead of Time(AOT) Compilation, [Component Folding](https://github.com/facebook/react/issues/7323)

Recommended Readings

This visualization shows how hooks allow state logic to be more localized and make components smaller.

Built-in Hook Types​

React provides built-in hooks that can be categorized into few types based on their functionalities, note that hooks of same type are executed in declare sequence.

Introduction of each hooks can refer to official document.

State Hooks​

useState​

useState is a React Hook that lets you add a state variable to your component.

Recommended Readings

useEffect​

Recommended Readings

useRef​

🕵️ Deep Dive​

How is hook implemented?​

Recommended Readings

🔗 References​