Hooked 🎣: Understanding Hooks in React

Frontend Bootcamp 2021

Carlos Contreras

Class vs Functional Components

Class

React 16.8. was released

React Hooks

Functions that add state variables to functional components and instrument the lifecycle methods of classes. They tend to start with use

Why use Hooks?

Easier to build and to re-use stateful logic without changing the component hierarchy
Easier to split one component into smaller functions base on what pieces are related
Removes confusion over the many lifecycle methods.
Easier to add types (unlike HOC and render props patterns)

Rules of Hooks

⚠️ Only call hooks at the top level

Don't call hooks inside loops, conditions or nested functions.

⚠️ Only call hooks from React functions

Don't call hooks from regular JS functions. Instead you can:

Call hooks from React function components
Call hook from custom hooks

useState

useState lets us keep local state in a function component.

👉🏼 useState Demo

useEffect

Data fetching
Setting up a subscription
Manually changing the DOM
Logging
Timers
Event Handlers

The useEffect Hook lets you perform side effects in function components:

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

👉🏼 useEffect Demo

useContext

useContext hook makes it easy to pass data throughout a component tree without manually passing props to every children.

It makes up part of React’s Context API

👉🏼 useContext Demo

useReducer

useReducer works similar to the useState hook, it allows state management in funcional components.

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

👉🏼 useReducer Demo

useMemo

Returns a memoized value.

👉🏼 useMemo Demo

useCallback

Returns a memoized callback.

👉🏼 useCallback Demo

useRef

useRef allows us to create a ref object whose .current property is initialized with whatever we pass in as argument.

There are two main uses of useRef:

Accessing the DOM nodes or React elements
Keeping a mutable variable will keep the same reference between renders and will not trigger a re-render when a property is changed.

👉🏼 useRef Demo

useImperativeHandle

useImperativeHandle allows you to pass values and functions from a Child component back up to a Parent using a ref . From there, the Parent can either use it itself or pass it to another Child.

👉🏼 useImperativeHandle Demo

useLayoutEffect

useLayoutEffect is identical to useEffect, but its major key difference is that it gets triggered synchronously after rendering the component but before painting to the screen

👉🏼 useLayoutEffect Demo

Custom Hooks

A custom hook allows you to extract some components logic into a reusable function.

A custom hook is a Javascript function that starts with use and that call can other hooks.

👉🏼 Custom Hooks Demo

useDebugValue

useDebugValue can be used to display a label for custom hooks in React DevTools.