Beginning ReactJS Foundations Building User Interfaces with ReactJS

11Introducing Hooks

React Hooks give function components access to much of the functionality of React that was previously only available with class components. Hooks also give developers a simpler syntax for using state, performing tasks in response to lifecycle events, and reusing code.

In this chapter, you'll learn:

• What hooks are.
• General rules and best practices for using hooks.
• How to use React's built-in hooks.
• How to write custom hooks.
• How to find and use other custom hooks.

WHAT ARE HOOKS?

Hooks are functions that are part of the React library which give you access to features of React that were previously only available by extending the React.Component class. These features include state and lifecycle, as well as refs and caching of function results (aka memoization). Hooks “hook into” React from functions.

WHY WERE HOOKS INTRODUCED?

Hooks were introduced to solve several problems with the React library. The first is that React didn't have a simple way to share reusable functionality between components. Prior to React Hooks, solutions such as higher-order components and render props (both of which are covered in Chapter 12) were commonly used (and still are) for sharing functionality. However, higher-order components tend to result in code and component trees that are difficult to read and overly complex. Code that renders multiple levels of components within components within components in order to provide reusable functionality to a deeply buried component ...