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:

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, 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. 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 de Eric Elliot y este otro 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.

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)
      }}
    />
  )
}