Introduction to Hooks in React

- By Nasir Zaidi

React is an incredibly powerful and popular JavaScript library used for building user interfaces. As React continues to evolve, developers are presented with more and more tools that can help them create dynamic and efficient applications. One of the most powerful tools available to React developers is the use of "hooks", which was announced at the release of React 16.8 in February 2019.

Hooks allow developers to tap into React's features and use them in a way that is more organized and efficient. It allows us to use state and other react features without writing a class. In this post we will understand the basics of React Hooks, when and why to use the hooks and some more important topics related to it.

What Are Hooks?

As we all know, Hooks is one of the latest features implemented in React 16.8 release. With it, you can use state and other React functions where you need to write classes. In simple terms, hooks are functions that connect React state and lifecycle functions from functional components. Remember that hooks don't work inside classes.

Hooks are initially misleading to people with a functional programming background. React hooks are functions that allow you to hook into the reactive state and lifecycle functions of functional components.

Hooks are not functional programming, hooks are inherently impure functions because they have side effects. In their defense, I'm assuming that's why they chose the name "useEffect", possibly implying that the function has side effects and is not functional programming.

Why did React introduce Hooks?

Unlike class state logic, hooks allow state logic to be reusable. 'useState' was not merged resulting in confusing object value updates. Hooks have many benefits as developers and they will change the way we write components for the better. They're already helping us write cleaner, more concise code - it's like we've gone on a code diet, lost a lot of weight, and we look and feel better.

React Hooks were introduced to make React more flexible and easier to use. Hooks help us create more flexible components. Hooks allow us to write code that is more modular. Hooks allow us to use state and other react features without writing a class.

Hooks are used for functionality that is not tied to a component lifecycle. We must use hooks in the same order each time a component is rendered. We can't use hooks inside of if statements or loops

How to use React Hooks?

React provides built-in hooks like useState, useEffect, useReducer, useRef, useCallback, useContext, useMemo, and you can also create your own custom hooks. React Hooks is a feature that allows users to hook into React state and lifecycle functions of functional components.

React provides built-in hooks like useState, useEffect, useReducer, useRef, use Callback, useContext and useMemo, we can also create your own custom hooks. We will be explaining some hooks to help you understand better below.

Hooks API

There are several hooks used in React including:

• UseState Hook

• UseReducer Hook

• UseEffect Hook

• UseContext Hook

• UseMemo Hook

• UseCallback Hook

We’ll be explaining the most commonly used hooks below:

UseState Hook

useState declares a state variable. This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class. Normally, variables disappear when the function exits but state variables are preserved by React.

The only argument to the useState Hook is the initial state. Unlike with classes, the state doesn’t have to be an object. We can keep a number or a string if that’s all we need. In our example, we just want a number for how many times the user clicked, so pass 0 as initial state for our variable.

useState returns a pair of values: the current state and a function that updates it. This is why we write const [count, setCount] = useState(). This is similar to this.state.count and this.setState in a class, except you get them in a pair.

UseReducer Hook

The useReducer Hook is similar to the useState Hook. It allows for custom state logic. If you find yourself keeping track of multiple pieces of state that rely on complex logic, useReducer may be useful. The useReducer hook in React is a powerful and efficient way to manage state in your React applications.

It provides a simple, straight-forward API for handling state changes and allows for easy composability in your application. By leveraging the useReducer hook, you can make your application more efficient while reducing the amount of code you need to write.

UseEffect Hook

The useEffect hook in React is a powerful way to add functionality to your React applications. It allows you to perform side effects, such as data fetching, in an elegant and efficient way.

With useEffect, you can handle asynchronous tasks, such as data fetching and updating the UI, without needing to manually keep track of the state. With useEffect, you can also handle events, such as user input, and create complex logic with ease.

UseContext Hook

The useContext hook from React is a powerful and versatile tool that allows developers to create application frameworks that are easier to manage and maintain. It provides a way to pass data between components without the need for prop drilling.

With the useContext hook, developers can access data in any component at any level of the component tree, making it easier to create an application with a consistent data layer. useContext returns the context value for the context you passed.

To determine the context value, React searches the component tree and finds the closest context provider above for that particular context.

Rules of using Hooks

Some important rules when using Hooks are as follows:

1. Hooks should sit at the top-level of your component

2. Only call Hooks from React functional components

3. You can only use on useState hook in a class

4. Never call a Hook from inside a loop, condition or nested function

5. Hooks can call other Hooks

Advantages of using Hooks

Hooks are advantageous to developers in multiple ways as they are a way to write less code, which reduces code clutter and improves the code structure as a whole. Additionally, hooks are way to write code that is modular, which means that a program's functions are separated into individual blocks or pieces, with each block containing all the parts needed to execute functionality.

Hooks make your codebase more flexible and re-usable. For scaling your web app, it is essential that the existing components are re-usable so that new, iterative features can be added without difficulty.

Top Hooks Libraries

1. Use Hooks

Access the library here.

2. React Hooked Up

To access the library, click here.

3. React Hooks-Lib

GitHub link