MENU

New Capabilities

Hooks are a new React syntax which:

allows you to reuse stateful logic without changing your component hierarchy.

lets you 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.

lets you use more of React's features without classes that require more verbose syntax.

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

doesn't need the deep component tree nesting that is prevalent in codebases that use higher-order components, render props, and context. With smaller component trees, React has less work to do.

Creating functions in render doesn't cause Hooks to be significantly slower because, in modern browsers, the raw performance of closures compared to classes doesn't differ much generally.

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.

React Native 0.59 and above support Hooks.

What can I do with Hooks that I couldn't with classes?

Do Hooks replace render props and higher-order components?