React introduces Hooks, a JavaScript function to allow using React without classes

Yesterday, the React community introduced Hooks, a new feature proposal which has landed in the React 16.7.0-alpha. With the help of Hooks, you will be able “hook into” or use React state and other React features from function components. The biggest advantage is that Hooks don’t work inside classes and let you use React without classes.

Why Hooks are being introduced?

Easily reuse React components

Currently, there is no way to attach reusable behavior to a component. There are some patterns like render props and high-order components that try to solve this problem to some extent. But you need to restructure your components to use them.

Hooks make it easier for you to extract stateful logic from a component so it can be tested independently and reused. All of this, without having to change your component hierarchy. You can also easily share them among many components or with the community.

Splitting related components

In React, each lifecycle method often contains a mix of unrelated logic. And many times the mutually unrelated code that changes together splits apart, but completely unrelated code ends up combined in a single method. This could end up introducing bugs and inconsistencies.

Rather than forcing a component split based on lifecycle methods, Hooks allow you to split them into smaller functions based on what pieces are related.

Use React without classes

One of the hurdles that people face while learning React is classes. You need to understand that how this works in JavaScript is very different from how it works in most languages. You also have to remember to bind the event handlers.

Hooks solve these problems by letting you use more of React’s features without classes. React components have always been closer to functions. It embraces functions, but without sacrificing the practical spirit of React. With Hooks, you will get access to imperative escape hatches that don’t require you to learn complex functional or reactive programming techniques.

Hooks are completely opt-in and are 100% backward compatible. After receiving the community feedback, which seems to be positive going by their ongoing discussion on RFC, this feature, which is currently in alpha release, will be introduced in React 16.7.

To know more in detail about React Hooks, check out their official announcement.

React 16.6.0 releases with a new way of code splitting, and more!

InfernoJS v6.0.0, a React-like library for building high-performance user interfaces, is now out

RxDB 8.0.0, a reactive, offline-first, multiplatform database for JavaScript released!