API Reference

Built-in React Hooks

State Hooks

State lets a component For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.

To add state to a component, use one of these Hooks:

  • declares a state variable that you can update directly.
  • declares a state variable with the update logic inside a

Context Hooks

Context lets a component For example, your app’s top-level component can pass the current UI theme to all components below, no matter how deep.

  • reads and subscribes to a context.

Ref Hooks

Refs let a component like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an “escape hatch” from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.

  • declares a ref. You can hold any value in it, but most often it’s used to hold a DOM node.
  • lets you customize the ref exposed by your component. This is rarely used.

Effect Hooks

Effects let a component This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.

  • connects a component to an external system.

Effects are an “escape hatch” from the React paradigm. Don’t use Effects to orchestrate the data flow of your application. If you’re not interacting with an external system,

There are two rarely used variations of useEffect with differences in timing:

  • fires before the browser repaints the screen. You can measure layout here.
  • fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.

Performance Hooks

A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.

To skip calculations and unnecessary re-rendering, use one of these Hooks:

  • lets you cache the result of an expensive calculation.
  • lets you cache a function definition before passing it down to an optimized component.

Sometimes, you can’t skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don’t need to block the user interface (like updating a chart).

To prioritize rendering, use one of these Hooks:

  • lets you mark a state transition as non-blocking and allow other updates to interrupt it.
  • lets you defer updating a non-critical part of the UI and let other parts update first.

Other Hooks

These Hooks are mostly useful to library authors and aren’t commonly used in the application code.

  • lets you customize the label React DevTools displays for your custom Hook.
  • lets a component associate a unique ID with itself. Typically used with accessibility APIs.
  • lets a component subscribe to an external store.
  • allows you to manage state of actions.

Your own Hooks

You can also as JavaScript functions.