React Hooks

A breakdown of popular (and some not-so-popular) React hooks.

React hooks are special function that allow functional components to have lifecycle events and manage state. React has plenty of built in hooks, but you can also create your own for specific use-cases. There are three main rules to follow with hooks

• Hooks must be called inside React function components
• Hooks can only be called at the top level of a component
• Hooks cannot be conditional

useState: the State hook helps declare and set state variables in your components. This is a variable, getter, and setter all together. useState also triggers a re-render.

import { useState } from "react";

const [variable, setVariable] = useState("");

Declare your variable and its setter, then initialize it in the useState function. You can put an int, a string, a bool, array, custom type, or whatever you want in here

useContext: the Context hooks words like useState, but on a global level

useEffect: the Effect hook allows for manually changing the DOM and data fetching.

Pass in a function, and optionally a dependency as the second parameter. The function will run after each render by default, or if a dependency is included then it will only run on that condition. Use an empty array as the dependency to only run on the first render. useEffect does not trigger a re-render as useState does.

useMemo: the Memo hook is similar to useEffect, except it runs before the render.

useCallback: the Callback hook is the same as useMemo, except Callback returns a memoized function instead of a memoized value.

useRef: the Ref hook allows you to store the previous state, keep track of hooks that do re-render when they run, or access DOM variables. Ref doesn't re-render, so it's useful for keeping an eye on things without getting into an infinite render loop.

useReducer: the Reducer hook allows for custom state logic. This is especially useful with large, complex nested states and components. Instead of having eight handle function you can call a reducer with a switch case.

useTransition: the Transition hook allows you to set priority for various state changes. This is helpful when certain changes are going to be slow, so you can pop in an isPending for the DOM and run everything else first.

useDeferredValue: the DeferredValue hook waits until the app stops updating things to being rendering the list/value/etc that you gave it. Maybe your value only needs to be changed when something else reaches a stable state, such as a user making rapid various changes (typing) and not needing to act until things settle.

useLayoutEffect: the LayoutEffect hook is useful when manipulating the DOM. useEffect doesn't run until after the DOM renders so you can end up with the user seeing the initial state for a millisecond and then your intended effect after. For a smoother experience, you can have that effect on the element render before the DOM by using useLayoutEffect