js❤️ - Introducción

JavaScript tiene sus peculiaridades y nos hemos divertido mucho con ellas (ver WTFJS) pero lo cierto es que desde que en 2015 se estandarizó es6 el lenguaje ha evolucionado mucho y ahora es un lenguaje potente y productivo.

En esta serie de artículos vamos a repasar algunas de sus posibilidades y cómo se pueden utilizar para escribir un código más conciso y expresivo.

Clases

Sí, JavaScript ya soporta definir classes sin hacer hacks.

Pero, en los últimos años la comunidad de programadoras de JavaScript ha ido alejándose más y más de la programación orientada a objetos y acercándose hacia la programación funcional (más o menos).

Por eso no vamos a hablar de clases en este artículo, en su lugar puedes echar un vistazo a algún artículo sobre programación funcional en js, por ejemplo Pragmatic Functional Programming in JavaScript

De lo que sí vamos a hablar es de inmutabilidad.

Inmutabilidad

Inmutabilidad es un concepto de programación funcional que indica que no cambiamos el valor de las variables.

Necesitamos abrazar este concepto si utilizamos React (o la mayoría de frameworks actuales). React nos permite definir un árbol de componentes que representa nuestra UI. Los componentes reciben props de sus padres y a veces tienen estado.

Cuando el componente que está en la raíz del árbol cambia su estado, todo el árbol debe renderizarse. Esto de normal ocurre muchas veces, incluso varias veces por segundo, por eso es importante que la renderización del árbol sea rápida.

Para ahorrar tiempo de renderizado, antes de pintar cada componente React comprueba si este tiene cambios o si por el contrario puede utilizar el estado anterior del componente. Y para eso comprueba si sus props han cambiado o si su estado ha cambiado, más o menos de esta forma:

// para cada prop
if (prop !== oldProp) changed = true; // strict equality comparison
...

Por eso el siguiente código es erróneo:

const [users, setUsers] = useState([]);

return (
    <UserList onAdd={(user) => setUsers(users.push(user))}/> {/* ⛔️ */}
)

El método push modifica el array original. En el setUsers estamos volviendo a asignar el mismo objeto al estado y cuando React compruebe si users === oldUsers pensará que no hay cambios y no renderizará este componente.

En su lugar necesitamos buscar estrategias para generar nuevos valores sin modificar el objeto original. Muchas de las estrategias comunes las veremos en estos artículos, para otras más especiales te recomiendo echar un vistazo a immer.

El ejemplo anterior podría arreglarse así:

const [users, setUsers] = useState([]);

return <UserList onAdd={(user) => setUsers([...users, user])} />;

Gracias al uso de spread operator, del que hablaremos en el siguiente artículo.

Siguiente - Spread Operator →