MENU

New Capabilities

Hooks let you:

Reuse stateful logic across components without changing your component hierarchy.

Split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.

Use more of React's features without writing classes, which require more verbose syntax.

Avoid a lot of the overhead that classes require, like the cost of creating class instances and binding event handlers in the constructor.

Avoid the deep component-tree nesting that's common in codebases relying on higher-order components, render props, and context. Shallower trees mean less work for React and code that's easier to follow.

Creating functions inside a component body doesn't make Hooks significantly slower — in modern JavaScript engines, the raw performance of closures versus classes doesn't differ much.

Starting with 16.8.0, React includes a stable implementation of React Hooks for:

React DOM

React Native

React DOM Server

React Test Renderer

React Shallow Renderer

Note that to enable Hooks, all React packages need to be 16.8.0 or higher. Hooks won't work if you forget to update, for example, React DOM. (Any current React install, including React 19, meets this requirement automatically.)

What can I do with Hooks that I couldn't with classes? Hooks let you share stateful logic between components through custom Hooks, without adding more components to your tree the way render props and higher-order components do. They also let you organize the logic inside one component around related pieces (like setting up a subscription or fetching data) instead of forcing you to split it up by lifecycle method. A few things are simply easier with Hooks than with classes, such as combining what used to be three separate lifecycle methods into a single useEffect call.

Do Hooks replace render props and higher-order components? Often, yes — a custom Hook can cover the same use case with less nesting. But Hooks don't replace these patterns entirely; render props and higher-order components still have their place, and you can keep using them alongside Hooks.