Hooks Pattern

Use functions to reuse stateful logic among multiple components throughout the app

Overview

React Hooks are functions special types of functions that you can use in order to:

• Add state to a functional component
• Reuse stateful logic among multiple components throughout the app.
• Manage a component’s lifecycle

Besides built-in hooks, such as useState, useEffect, and useReducer, we can create custom hooks to easily share stateful logic across multiple components within the application.

For example, if we wanted to see if a certain component is currently being hovered, we can create and use a useHover hook.

We could just add this logic to the Listing component itself. However, in order to make the hover logic reusable throughout the application, it makes more sense to create its own hook for it.

Now that it’s a hook, we can reuse the same logic throughout multiple components in our application. For example, if we also wanted to add the hover logic to the Image and Button component, we can simply use the hook within these functional components.

Implementation

Within this hook, we have to keep track of the hovering state by using three build-in hooks:

1. useState, which keeps track of whether the component is currently being hovered.
2. useRef, which creates a ref to the component that we're tracking.
3. useEffect, which gets executed as soon as the ref has a value. In here, we can add event listeners to the component to keep track of the hovering state.

Usage

We can use this hook in any component that cares about the hovering state.

TradeOffs

Simple : Hooks make it easy to add state to functional components, rather than (usually more complex) class components

Reusable State Logic : Hooks allow you to reuse stateful logic among multiple components across the application, which reduces the chances of errors, and allows for composition with plain functions

Good alternative to older React design patterns: The hooks pattern is a good alternative to an older React design pattern, which is mainly used with Class components, namely the Presentational/Container pattern.

Sharing non-visual logic: Hooks make it easy to share non-visual logic, without having to use patterns like HOC or Render Props