In this article, I will talk about what are React Hooks, and why should we start using React Hooks. I will assume that you already understand the basics of React, such as function and class components, props, and state. If you are new to React, I highly recommend you to follow this
tutorial from the React official website before you continue.
What are React Hooks?
React Hooks are a new feature in React v16.8, which allow you to use React features without having to write a class. Previously, you can only use states inside a class component. With hooks, on the other hand, it is now possible to use states and other React features without writing a class. However, you should keep in mind that you cannot use hooks inside class components.
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which is called "enabled"
const [enabled, setEnabled] = useState(false);
return (
<button onClick={() => setEnabled(prevValue => !prevValue)}>
{enabled ? 'Disable' : 'Enable'}
</button>
);
}
Why should we start using React Hooks?
Hooks solve a wide variety of seemingly unconnected problems in React. Whether you're new to React or use it daily, you might recognise some of these problems.
There are three important reasons why you should start using React Hooks.
Confusion in class components
To work with classes, you have to understand how this
keyword works in JavaScript, which is very different from how it works in most other languages. You also have to remember to bind event handlers in class components. On the React side, it is also observed that classes don't minify very well, and they make hot reloading very unreliable. With hooks, on the other hand, you will not have to face these problems as you don't work with classes anymore.
Hard to reuse stateful logic between components
There is no particular way to reuse stateful logic between class components. Even though higher-order components and render props pattern do solve this issue, you would have to restructure your components which results in dirty codes. For example, to share stateful logic, you will end up wrapping your components with several other components. Hooks, on the other hand, helps us by allowing us to reuse stateful logic without changing our component hierarchy.
Hard to understand complex components
When you had to create a component for complex scenarios, such as data fetching and subscribing to events, you would have realised that the related codes is not organised in one place but scattered across different lifecycle methods. For example, data fetching is usually done in componentDidMount
or componentDidUpdate
. If you have to set event listeners, you set them up in componentDidMount
and unsubscribe in componentWillUnmount
. As you can see, related codes – data fetching – is split between componentDidMount
and componentDidUpdate
. Also, code for event listeners is in different lifecycle methods – componentDidMount
and componentWillUnmount
. Besides, completely unrelated codes – data fetching and event listeners – are placed in the same method. Breaking these codes into smaller chunks is also impossible due to stateful logic. Hooks, on the other hand, let you split one component into smaller functions rather than focusing on the component lifecycle.
- How to make strongly-typed React components
TypeScript helps developers to improve their productivity and prevent them from producing bugs.
Published on Mar 10, 2021 · 2 min read
- Basic overview on JavaScript Promise
A promise represents a value that is unknown now that may become known in the future, in other words an asynchronous value.
Published on Mar 10, 2021 · 2 min read
- React Native over-the-air app update with CodePush
CodePush is a tool developed by Microsoft which allows developers to quickly and easily manage and update React Native JavaScript bundles over the air.
Published on Nov 1, 2020 · 7 min read
- Building a simple login form in React Native using React Hook Form
A short step-by-step tutorial about how to build a simple login form in React Native using React Hook Form.
Published on Oct 6, 2020 · 9 min read
- Building floating logo bubbles on Stripe.com using React Hooks
In this tutorial, we are going to clone animating logo bubbles from Stripe.com using React Hooks.
Published on Aug 11, 2020 · 9 min read
- Building custom React Hooks to fetch data from Firebase Firestore
In this article, I want to share my experience of building custom React Hooks to fetch data from Firebase Firestore.
Published on Aug 5, 2020 · 5 min read
- Building a simple login form with Material UI and React Hook Form
In this article, I will give a short step-by-step tutorial about how to build a simple login form with Material UI and React Hook Form.
Published on Jul 23, 2020 · 7 min read
- N+1 problem in GraphQL
The n+1 problem occurs because GraphQL executes a separate function – called resolver – for each field.
Published on Jul 17, 2020 · 2 min read
- GraphQL vs REST
GraphQL has been introduced as a revolutionary alternative to REST APIs. However, it has its pros and cons.
Published on Jul 16, 2020 · 3 min read
- Data fetching in Next.js 9.3+
There are two forms of pre-rendering: Static Generation and Server-side Rendering.
Published on Jul 15, 2020 · 6 min read
- When should we consider using third-party libraries?
The most crucial advantage of using third-party libraries is that it helps you to save time because you do not need to develop the functionality that the library gives.
Published on Jul 13, 2020 · 4 min read
- Step-by-step guidelines to implement Material UI in Next.js 2020
In this article, I want to share how to integrate Material UI in Next.js applications. We will build a very basic website using Material UI and Next.js.
Published on Jul 11, 2020 · 4 min read