¿Qué es React?
React es simplemente una librería, un bloque de código que ha sido construido con las herramientas que nos proporciona el navegador para resolver un objetivo en específico: Ayudar a generar nuestra Interfaz de usuario.
El DOM virtual
Uno de los objetivos principales de React es generar el DOM virtual. Esto es una representación del DOM pero en memoria y con una estructura de árbol.
En pocas palabras, la estructura árbol es un tipo de estructura donde todo elemento solo tiene un padre.
Nótese que es igual a cómo escribimos nuestro código HTML normalmente, o al funcionamiento de carpetas de nuestro sistema operativo.
Es decir, siempre se utilizará un elemento inicial del DOM cómo contenedor del virtual DOM.
Elementos de React
Los elementos de React tal y cómo los usamos en React. Es decir, con la sintaxis del lenguaje HTML. No es más que una forma de escribir objetos. Cuando escribimos nuestro código HTML en el archivo Javascript (.js), lo que realmente estamos haciendo es instanciar objetos.
Esa forma de escribir de nuestros elementos de React con HTML es llamada JSX.
Si bien parece HTML, realmente no lo es. Hay varias diferencias entre un elemento de React y un elemento del DOM real, más allá de que el elemento de React sea la representación de un objeto, por ejemplo:
Los atributos
En React todos los atributos se escriben con camelcase. Pero no todos los atributos son soportados. Existen varios que no se encuentran en las versiones actuales de HTML5.
Aquí hay una lista donde el mismo sitio de React nos muestra algunos de los atributos soportados.
Componentes
Los componentes de React son elementos más independientes y reutilizables que los antes mencionados. Estos pueden tener propiedades definidas por el desarrollador y no traídas por defecto por React.
Cabe aclarar que este documento es una introducción a React con Hooks. Por lo tanto, cuando hablemos de Componentes estaremos hablando de Componentes declarados cómo función y no cómo clases.
Invocación directa de los componentes
Invocar nuestros componentes sin utilizar la notación JSX es posible pero perdemos algo muy importante, la posibilidad de usar hooks, aun retornando JSX, React no tendría una función que invocar cuando se requiera renderizar una nueva versión del componente.
Además que ya no sería un componente porque pierde la posibilidad de tener un estado, invocar nuestros componentes sería el equivalente a guardar el JSX en una variable común y mostrarla cómo hija en nuestra app.
El orden de renderizado
Es importante el orden en el que renderizamos los elementos en React si realmente buscamos que nuestra aplicación funcione eficientemente. React por defecto busca el mínimo cambio hecho y simplemente renderiza esos pequeños cambios sin necesidad de renderizar toda la aplicación.
Pero, ¿qué pasa si realizamos un cambio brusco y cambiamos de lugar dos elementos?
En este caso, los elementos son renderizados completamente de nuevo. Una solución a esto es usar la propiedad “key”. Es el identificador que usa react para identificar cada elemento. Normalmente no es común que elementos cómo un h1 o un botón cambien de lugar, pero si lo es con colecciones (arrays) de elementos de React.
Es importante utilizar una “key” que sea única y propia de cada elemento. Esto nos puede llevar a problemas algo difíciles de depurar. Por ejemplo, si utilizamos el índice de la lista como “key”, esto puede llevar a que React nunca sepa qué elemento se ha agregado o se ha removido. Lo que puede terminar en información que se muestra en lugares incorrectos. Hoy esto es considerado un anti-patrón y si bien en ciertos momentos puede salvarnos no es algo bueno.
Hooks
Los hooks son funciones que nos proporciona React que nos permiten tener estados y otras características que nos da la librería en componentes.
Solo existen dos reglas importantes para usarlos:
- ✔ Solo deben ser usados dentro de una función.
- ✔ El orden en el que se utilizan nunca debe ser cambiado.
Estos son algunos de ellos y sus características:
useState
Este hook nos permite generar un estado, un dato consistente entre renderizados. Al llamarlo simplemente se le da un valor inicial y nos devuelve un array con el valor del estado y una función que nos permite cambiar ese mismo valor.
- Múltiples cambios de estados
Cada vez que cambiamos el valor de un estado, React ejecuta nuestra función para poder ver los cambios hechos. Y, a su vez, generar el renderizado con dichos cambios. Esto no significa que llamando muchas veces a “setCounter” generamos muchos renderizados. Recién cuando se termine de ejecutar la función “increment”, React invocará la función “app” para ver los cambios.
Cada vez que se ejecute “increment” el “counter” siempre incrementará +1. Ya cada uno de los “counter” dentro de “increment” siempre tendrán el mismo valor porque toman el valor devuelto por el hook.
Para lograr que el “counter” incremente tres veces seguidas, “setCounter” acepta funciones cómo parámetro que a su vez reciben el último valor “counter”.
useEffect
Este hooks nos permite ejecutar una función dependiendo de algunos parámetros y siempre después de que nuestro componente se haya renderizado correctamente.
Para utilizarlo le damos una función y una lista de dependencias:
Dentro de la función “warnComponentIsLoaded” no hay ninguna variable que se use por lo que la lista de dependencias está vacía.
Cada vez que React ejecute la función “App” el hook evaluará si las dependencias han cambiado y si encuentra alguna desigualdad ejecutará la función que le dimos. Estas dependencias simplemente serán evaluadas tal y cómo evaluamos con el operador de “===”.
Hooks de memorizacion
Al utilizar el hook de “useEffect” hay que tener cuidado con objetos, listas, funciones y demás tipos de datos o valores. En Javascript dos cadenas de texto mientras tenga el mismo contenido son iguales, pero dos objetos con las mismas propiedades no son iguales.
Hasta aquí no pasara nada malo Hasta que un segundo renderizado ocurra. A partir de la segunda vez que React ejecute “App”, el “author” y “showAuthorLastName” no serán las mismas instancias. Esto significa que la función dada al “useEffect” debe ser ejecutada nuevamente y es por esto que hay que memorizar dichos valores. Para que siempre sea el mismo objeto o función la que se está evaluando.
Para ello existen dos hooks especiales llamados “useCallback” y “useMemo”. Los dos aceptan una función cómo primer parámetro y una lista de dependencias en segundo lugar. La diferencia está en que useCallback memoriza la función mientras que “useMemo” ejecuta la función y memoriza el valor retornado.
Ahora si, los hooks se encargan de mantener las referencias de “author” y “showAuthorLastName”. Por lo tanto no importa cuantas veces se renderice la aplicación el “useEffect”. No ejecutara la función dada a menos que las dependencias realmente cambien.
