React Hooks Design Pattern

Jonathan Rodriguez — Sun, 06 Jun 2021 07:29:43 +0000

I want to share with you one pattern to improve the readability and maintainability of your React components.

Why should we care about maintainability?
If our components are interdependent, not extensible, and not single-responsible, as our application grows in lines of code and complexity, our time to add new features or resolve bugs will also increase.

Let's say we have a form component, and we need to save its values into local storage as it changes.

function LocalStorageForm() {
  const [values, setValues] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  return <Form values={values} onChange={handleChange} />;
}

We might want to change the code into something like this, adding local storage synchronization logic inside the component:

function MessyLocalStorageForm() {
  const [values, setValues] = useState(() => {
    const storedValues = JSON.parse(localStorage.getItem('form'));
    return storedValues || {};
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    const updatedValues = { ...values, [name]: value };
    localStorage.setItem("form", JSON.stringify(updatedValues));
    setValues(updatedValues);
  };

  return <Form values={values} onChange={handleChange} />;
}

It works, but is messy, what if we have another form where we want to also synchronize the values with local storage? Could we abstract the complexity of state management to reuse it multiple times? Yes, creating a custom hook only responsible for the local storage synchronization.

import { useState, useEffect } from "react";

function useLocalStorage(key, initialValue) {
  const [state, setState] = useState(() => {
    const value = localStorage.getItem(key);
    return JSON.parse(value) || initialValue;
  });

  useEffect(() => {
    const value = JSON.stringify(state);
    localStorage.setItem(key, value);
  }, [key, state]);

  return [state, setState];
}

And now, all we need to do is go back to the first version of our code and just change the useState to our new custom hook useLocalStorage.

function LocalStorageForm() {
  const [values, setValues] = useLocalStorage('form', {});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  return <Form values={values} onChange={handleChange} />;
}

Photo by Xavi Cabrera on Unsplash

Sobre microservicios y autenticación JWT

Jonathan Rodriguez — Fri, 10 Jul 2020 05:59:52 +0000

La arquitectura de microservicios tiene como objetivo aislar los distintos componentes de una aplicación, con el fin de que cada uno sea una aplicación por sí misma. Nace como una respuesta contra las arquitecturas monolíticas que consideran una aplicación como una unidad indivisible, lo que impacta negativamente su escalabilidad pues la limitan en complejidad, carga soportada y desarrolladores, pues será necesario entender todo el sistema para realizar un cambio o un despliegue.

Al aplicar esta nueva arquitectura nos veríamos ante la necesidad de implementar autenticación para el acceso a los servicios, entre las soluciones utilizando JWT están:

Crear un servicio para generar y autenticar tokens, para que cada vez que un servicio reciba un token de un cliente realicé una llamada a este servicio y lo verifique. Pero esto traería como consecuencia el generar un bottleneck en este servicio.
Se podría configurar la llave secreta en cada servicio que reciba un token del cliente, así verifica el token sin necesidad de llamar a otro servicio, pero no es una práctica recomendada tener en múltiples ubicaciones la llave secreta pues aumenta el riesgo de comprometerla y por ende al sistema entero.

En base a estas soluciones, se puede optar por utilizar un llave pública bajo el algoritmo RS256 que nos permita únicamente tener la llave privada en el servicio de autenticación (para generar los tokens) mientras los otros servicios pueden verificar utilizando esta llave pública.

Forem: Jonathan Rodriguez

React Hooks Design Pattern

Sobre microservicios y autenticación JWT