Hooks in React

In react 16.8, hooks were added as a new feature that allows adding additional behavior (such as the state) to functional components. That was in February 2019, it`s time to verify how it looks right now.

We`ll take a look at available hooks in react and check how to create our own hook.

hooks in react

useState

Functional components were called stateless because it was not possible to use state inside them. With the new hook useState it`s possible to add state to functional components.

The useState hook returns an array with two values: the current state value, and a function that can update the state value. The initial state value is passed as an argument to the useState hook.

Let's take a look at a simple example where we add state to a functional component and update it once the input value is updated:

When the setValue function is called with a new value from input, React re-renders the component with the new state value.

The above approach looks clean and simple compared to the old way to write the same: