React Hooks - state
Tags: react, javascript, hooks
Published: 2018-11-23 17:20:49

---
title: React Hooks - state
published: true
cover_image: https://cdn-images-1.medium.com/max/2000/1*Ra-gkqfPqbWVhgP3tR-0Cg.png
description: Introducción a la nueva propuesta de React, los "hooks".
tags: react, javascript, hooks
series: react hooks
---

# React Hooks - state

Desde hace mucho tiempo tenemos dos tipos de componentes en React. Uno, son los llamados componentes stateful o "con estado", los cuales se implementan mediante ES2015 classes y, los otros, son los componentes stateless o "sin estado" que son simples funciones puras.

Un ejemplo de un componente stateful es el siguiente:

```javascript
class Input from React.Component {
  state = {
    value: ''
  }

  handleChange = (e) => {
    const value = e.target.value
    this.setState({ value })
  }

  render() {
    return (
      <input
        type={this.props.type}
        value={this.state.value}
        onChange={this.handleChange}
      />
    )
  }
}
```

Dado que necesitamos que el `Input` almacene su valor localmente, necesitamos proveerle un estado, de otra manera el valor **siempre tendría que venir desde fuera; es decir, como propiedad**.

En versiones anteriores de React no era posible usar componentes stateless si queríamos tener este comportamiento. La razón era sencilla: Por diseño, un componente que es una función pura **no puede contener un estado ni un ciclo de vida**.

Sin embargo, teníamos una opción: usar [recompose](https://github.com/acdlite/recompose), la cual es una (genial, por cierto) librería que nos permite inyectarle estado, ciclos de vida y demás comportamientos a componentes stateless.

Lo cierto es que, a partir de ahora, no necesitamos tener una librería de terceros para usar estados en nuestros componentes puros (no es el caso del ciclo de vida aún, lamentablemente) gracias a [React Hooks](https://reactjs.org/docs/hooks-intro.html). Pero, ¿qué es React Hooks? 🤔

## Anexo
### ¿Qué es React Hooks?

Cito a la propia definición de React:

> Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside React classes. Hooks let you split one component into smaller functions based on what pieces are related. A good example of it could be setting up a subscription or fetching data, irrespective of code split based on the lifecycle method.

Siendo prácticos, **un hook es una función que te permite acceder al estado y al ciclo de vida de un componente en componentes stateless**. Tan simple como eso.

---

Volviendo a nuestro ejemplo del `Input`, ahora ya podríamos convertirlo en un componente stateless y seguir disfrutando de los beneficios que nos traen los componentes stateful.

> Para entender la diferencia entre herencia y composición en JavaScript y el efecto que causa, recomiendo leer [este artículo](https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9) de Eric Elliot y [este otro](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4) de Dan Abramov.

## Hook `useState`

Este hook nos permite acceder al estado de un componente stateless. A esta función se le pasan solo un parámetro: **el valor inicial del estado**. A diferencia del estado de un componente stateful, con `useState` no estás obligado a pasar un objeto como estado, de hecho **puedes pasar cualquier tipo de dato**. Esta función te retornará dos elementos: la variable que almacena el dato y la función para actualizar su valor.

```javascript
import React, { useState } from 'react'

const Input = ({ type }) => {
  const { value, setValue } = useState('')

  return (
    <input
      type={this.props.type}
      value={state.value}
      onChange={(e) => {
        setValue(e.target.value)
      }}
    />
  )
}
```

En la siguiente parte veremos el "Hook effect" y el uso que podemos darle. 🤘🏼