DEV Community: Emmanuelle Laguna

React Hooks Parte 1 - Entendiendo el estado a través de los Hooks.

Emmanuelle Laguna — Wed, 15 Apr 2020 17:23:11 +0000

¿Para qué se usan los Hooks?

En 2019 React introdujo los Hooks a su API. Esto naturalmente causo revuelo, ya que hasta ese momento no se podía manejar el estado en componentes que no fueran de tipo clase. Esto suponía una molestia ya que escribir componentes como funciones es más sencillo que hacerlo como clases, ademas en muchos casos los componentes no necesitan lógica avanzada y crear una clase para manejar un estado sencillo, se volvía tedioso. Veamos un componente simple declarado como clase y comparemos su equivalente escrito como función.

Componente como clase

export default class MyComponent extends Component {
    render() {
        return (
            <h1>A simple component as class</h1>
        );
    }
}

Componente como función

export default MyComponent = () => <h1>A Simple component as function</h1>;

Como podemos ver, aún en componentes simples escribirlos como clases supone una sintaxis más compleja, aunque conviene no dejar de lado que tener clases tenía ciertas ventajas sobre los componentes escritos como funciones y entre esas ventajas se encontraba el uso de estados, ademas de poder controlar el ciclo de vida de los componentes. Antes de entrar de lleno a los Hooks explicaré que es el estado de un componente y para qué sirve.

El estado de un componente.

Si eres nuevo en React, seguramente habrás notado que el estado siempre se menciona, ya que para quienes hacemos web, hacer que el DOM cambie o que se ejecute una función a partir de una acción del usuario en el navegador es cotidiano. Con JavaScript existen formas de hacer esto, pero sí estamos usando React, podemos aprovechar su poder y hacerlo de forma más legible y en muchos casos con mejor rendimiento. Pensemos en un componente que se conectará a una API y después mostrará una lista. Si nos preocupamos por nuestros usuarios, es una buena práctica de experiencia de usuario el avisar, por lo menos con un texto, que los datos están cargando, ya que en conexiones rápidas, seguramente el usuario no notará nunca la carga, pero en conexiones lentas, puede que la carga de datos tarde un poco o incluso podría haber un error de conexión. Está es una necesidad común de hecho y resolverlo a través de estados es muy sencillo. Veamos cómo se resuelve esto a través de un componente tipo clase.

export default class MyComponent extends Component {
  constructor() {
    this.state = {
      dataState: "loading",
      message: "Cargando mensaje...",
    };
  }

  componentDidMount() {
    const { dataState } = this.state;
    if (dataState === "loading") {
      fetchToServer()
        .then((message) =>
          this.setState({
            dataState: "loaded",
            message,
          })
        )
        .catch(() =>
          this.setState({
            dataState: "error",
            message: "Error de conexión.",
          })
        );
    }
  }

  render() {
    const { message } = this.state;
    return <p>{message}</p>;
  }
}

Lo primero que debemos notar en nuestro componente es que estamos declarando un mensaje por defecto, el cual indica al usuario que estamos cargando el mensaje. Por lo tanto mientras no se cambie ese mensaje a través del método setState el mensaje a mostrarse será “Cargando mensaje…”. La segunda parte del componente es el componentDidMount, el cual es ejecutado una vez que el componente fue cargado. Lo primero que hacemos es validar que no hemos intentado ya cargar los datos y por ello comparamos que el valor de dataState sea el que tenemos por defecto en el constructor, es decir “loading”. Después, suponemos que fetchToServer es una promesa que retorna la respuesta del servidor y por ello, si la petición fue exitosa vamos a cambiar el estado a “loaded” y ademas pasar el mensaje que nos regreso la promesa. Por otro lado si algo salió mál, pasaremos el mensaje de error. Sin importar si la petición fue exitosa o no, estamos dando retroalimentación a nuestro usuario.

Como podemos ver en el ejemplo anterior el uso del estado es muy importante y como ya imaginarás, tiene muchos usos prácticos, pues a través de él se puede controlar el comportamiento de un componente. Esto anterior si eres un usuario experimentado te sonará familiar y si eres nuevo seguramente te hará sentido, pero gracias a los Hooks este mismo comportamiento podemos controlarlo de una mejor forma. Veamos ahora el miso ejemplo mediante el uso de Hooks.

export default MyComponent = () => {
  const [message, setMessage] = useState("Cargando mensaje...");
  const [dataState, setDataState] = setState("loading");

  if (dataState === "loading") {
    fetchToServer()
      .then((message) => {
        setDataState("loaded");
        setMessage(message);
      })
      .catch(() => {
        setDataState("error");
        setMessage("Error de conexión");
      });
  }

  return <p>{message}</p>;
};

Ambos componentes hacen exactamente lo mismo. Pero como podemos notar, el segundo tiene menos lineas. Ahora, analicemos que está pasando en el componente a detalle.

Primero, es importante hacer notar que para hacer uso de useState debemos importarlo desde React de la siguiente forma:

import { useState } from “react”;

Analicemos la segunda linea const [message, setMessage] = useState("Cargando mensaje…"); en la cual pasan dos cosas principalmente; se declara una constante message cuyo valor es “Cargando mensaje...” el cual asignamos mediante la función useState pasándolo como parámetro. Es importante mencionar que el valor que recibe useState no tiene porque ser una cadena y puede ser cualquiera que nos convenga según nuestro componente. Es decir yo pude pasar un true, un false, un array un numero o un objeto. Por otra parte, setMessage es una función la cual actualizará nuestro estado. En otras palabras, es equivalente a this.setState({message});.

Es muy importante tener en cuenta que nuestro componente volverá a ejecutar el Render cada ves que cambiemos el estado y por esa razón no debemos olvidar cuando hacer la petición al servidor, en este caso cuando dataState es igual a loading. De otra forma podríamos tener problemas de rendimiento o caer en un bucle innecesario.

Hasta ahora hemos visto cómo declarar el estado con useState, como acceder a él, y como modificarlo. Pero hay veces que nos gustaría hacer mas cosas con el estado antes de actualizarlo. Explico con un ejemplo:

Suponiendo que tengo un contador en el estado, lo declaro de la siguiente forma

const [counter, setCounter] = useState(0);

Después, supongamos que queremos actualizar esté contador de dos en dos y que si pasa de 10 lo reseteamos, lo podemos hacer de la siguiente forma:

setCounter((previousState) => {
    return (previousState < 10) ? previousState + 2 : 0;
});

Como podemos ver, esto nos deja un gran margen de posibilidades, ya que nos permite modificar el estado y manipularlo.

Espero que esto sirva para entender mejor el uso de estados en React y cómo agregado comento que también funciona en React Native.

Existe una forma de mejorar nuestro componente. Hacerlo mas robusto y con mejores prácticas. Para eso podemos usar useEffect el cual explicaré en la segunda parte de esta serie de posts. En cuanto publique está segunda parte, pondré la liga aquí.

Como destructurar objetos con JavaScript y no volver a hacer validaciones de propiedades

Emmanuelle Laguna — Tue, 31 Mar 2020 00:04:43 +0000

Una de las cosas que mas me gusta de JavaScript es su manejo de objetos. Ademas dada la tendencia de usar JSON en las API, el paso entre obtener información de un servicio y usarlo como objeto en tu código es casi natural. Aunque como todo en la vida usar objetos tiene sus pros y sus contras. Una de las dificultades que encuentro frecuentemente al traer información desde una API es que alguna propiedad falte, para evitar que esto cause algún error inesperado, es una buena practica validar que las propiedades existan, pero hacer estas validaciones puramente mediante condicionales puede resultar engorroso y varias veces bajar el rendimiento de nuestro código. Por un tiempo tuve ese dilema, validar y sacrificar rendimiento o no validad y esperar a que siempre recibiera la información pero gracias a unos compañeros de trabajo aprendi sobre la destructuración.
La destructuración nos sirve primero para poder traer valores y recorrer objetos de una forma simple. Y segundo, en caso necesario, para poder pasar valores por defecto a propiedades que llegaran a ser inexsitentes dentro de un objeto. Ademas algo que me gusta mucho de la destructuración es que puede ir tan profundamente dentro de un objeto como lo necesitemos.
Para entender cómo funciona la destructuración, primero vamos a crear un objeto. Empecemos con algo simple, un objeto persona que tenga tres propiedades: "nombre", "edad" y "sexo".

const persona = {
  nombre: "Emmanuelle",
  edad: 34,
  sexo: "hombre",
};

La forma más básica para usar ese objeto es acceder directamente a sus propiedades de la siguiente forma: persona.nombre, persona.edad o persona.sexo pero tenemos varios inconvenientes aquí, el primero, como ya hemos dicho no estamos seguros de que la propiedad exista pero ademas hay un inconveniente que esta ligado a que es engorroso siempre tener que escribir el nombre del objeto el punto y su propiedad. Para ello, la destructuración también nos va a ayudar. Ejemplo:

const {
  nombre,
  edad,
  sexo,
} = persona;
// Lo anterior es equivalente a hacer lo siguiente
/*
 * const nombre = persona.nombre;
 * const edad = persona.edad;
 * const sexo = persona.sexo;
 */

Lo anterior es equivalente a hacer lo que se muestra en los comentarios. Es decir, nos extrae las propiedades indicadas dentro de las llaves del objeto persona y las asigna a constantes con el nombre de las propiedades. Así si quiero saber la edad de la persona solo tengo que llamar a edad y listo. Igual para las demás propiedades. Lo anterior ya nos permite simplificar nuestro código, y escribir menos cada ves que necesitemos el valor de cierta propiedad, pero vamos a seguir teniendo un problema. Aún no sabemos si las propiedades existen o no. Por ejemplo, si quisiera acceder a la propiedad estatura del objeto persona, de forma clásica accedería de la siguiente forma persona.estatura pero esto nos puede causar un error, ya que intentamos acceder a una propiedad que no existe. Para evitar esto, y para evitar condicionales por todo nuestro código, podemos hacer lo siguiente al momento de destructurar:

const {
  nombre = "",
  edad = -1,
  sexo = "",
  estatura = 0,
} = persona;
// El valor de nombre es "Emmanuelle"
// el valor de estatura es 0 sin importar que no se encuentre en el objeto original

Lo anterior nos permite declarar un valor por defecto, es decir, si la propiedad no existe, JavaScript declarará la constante y le asignara ese valor, evitando así un error de referencia, es decir: si la propiedad existe, la conserva, sino existe, toma el valor por defecto y la declara.
Con lo que hemos visto hasta ahora, podemos simplificar nuestro código y ademas evitar tener validaciones por todo nuestro código. Pero vamos mas allá y que es normal encontrar objetos más complejos. En realidad encontrar objetos planos o de un solo nivel no es la norma y regularmente encontramos objetos de más de un nivel como vemos a continuación:

const persona = {
  nombre: "Emmanuelle",
  edad: 34,
  sexo: "hombre",
  cabello: {
    tipo: "quebrado",
    color: "negro",
  },
};

En el caso anterior podemos hacer una destructuración anidada:

const {
    nombre = "",
    edad = -1,
    sexo = "",
    cabello: { tipo = "", color = "" } = {},
    estatura = 0,
} = persona;

Es importante mencionar que en la destructuración anterior no es posible acceder a la variable cabello pero sí podemos acceder a tipo o color directamente.
Si quisiéramos acceder a la variable cabello, deberíamos hacer la destructuración de la siguiente forma:

const {
    nombre = "",
    edad = -1,
    sexo = "",
    cabello = {
        tipo: "",
        color: "",
    },
    estatura = 0,
} = persona;

Esta otra forma de hacer la destructuración nos permite conservar el objeto cabello y su estructura base pero no olvidemos que aquí lo que perdemos es la validación interna del objeto, por lo tanto, si existe cabello pero no existe color dentro de este, JavaScript no hará ninguna validación de color. Yo personalmente recomiendo usar el primer método ya que hace más sentido con el propósito de validar cada propiedad. Pero dependerá de tu proyecto en específico y de tu forma de trabajo o del de tu equipo.
Por último, voy a dejar un ejemplo de como hacer la destructuración con más niveles.

const persona = {
    nombre: "Emmanuelle",
    edad: 34,
    sexo: "hombre",
    cabello: {
        tipo: "quebrado",
    },
};
const {
    nombre = "",
    edad = -1,
    sexo = "",
    cabello: { tipo = "", color = "" },
    estatura = 0,
    ropa: { accesorios: { lentes = true, gorra = false } } = {
        accesorios: {},
    },
} = persona;

Las dos cosas a resaltar en este ejemplo, es que vamos a acceder directamente a las variables lentes y gorra, ademas las propiedades ropa y accesorios no existen. El segundo punto a resaltar en esta destructuración, es que es indispensable crear un objeto accesorios por defecto ya que de no hacerlo JavaScript nos mandara un error de referencia ya que accesorios no existe.

UPDATE: Gracias a @jmz12

Como bien lo menciona @jmz12 en su comentario de en Medium, ademas de hacer validaciones como ya hemos visto, podemos renombrar con la siguiente estructura:

const persona {
    nombre: "Emmanuelle"
};
const {
    nombre: nombreDePila
} = persona;

De esta forma, tendríamos que acceder a nombreDePila ya que es el nombre con el que declaramos la variable.

Como configurar un path global de NPM con zsh

Emmanuelle Laguna — Tue, 08 Oct 2019 23:19:00 +0000

Como configurar un path global de NPM con zsh

Hace pocos días salió la actualización del sistema operativo para Mac Catalina. Esto me trajo errores con mi instalación de Node que se solucionaron fácilmente pero aún así dejo este tutorial para quien esté experimentando lo mismo.

Antecedentes

Cuando instalo Node me gusta dejar una ruta personalizada para las instalaciones globales, esto para evitar hacer uso de sudo cada vez que instalo algo globalmente. Ademas si instalo desde mi respaldo de Time Machine en una nueva maquina, esta configuración se respetará. Dicho esto, me gustaría mostrar cómo lograr esta configuración, en caso de que aún no sepas hacerlo.
Primero vamos a crear una carpeta en raíz llamada .npm-global, aunque puede llamarse como prefieras, ejecutando el siguiente comando desde la terminal:

$ mkdir ~/.npm-global

Ahora, vamos a necesitar decirle a nuestro sistema en donde buscar nuestros paquetes de Node haciendo lo siguiente:
Creamos un archivo llamado .bash_profile, en caso de no existir, con el siguiente comando

$ vim ~/.bash_profile

se puede usar cualquier otro editor, pero a mí me gusta VIM.
Agregamos la siguiente linea:

export PATH=~/.npm-global/bin:$PATH

guardamos los cambios y cerramos el documento.
En caso de no tener zsh solo basta con que ejecutemos un comando más;

$ source ~/.bash_profile

y nuestro ambiente estará trabajando correctamente. Si como en mi caso, estas usando zsh que por cierto viene por defecto en la versión 10.15 de MacOS , entonces tendremos que crear otro archivo, como lo explico a continuación.
Creamos un archivo llamado .zshrc y ponemos la siguiente linea

$ source ~/.bash_profile;

guardamos y volvemos a ejecutar

$ source ~/.bash_profile

con eso deberíamos tener nuestro NPM funcionando correctamente.

Aclaraciones

Puede ser que el archivo .bash_profile no funcione, para ello te recomiendo leer el siguiente post What is the difference between .bash_profile and .bashrc?