En esta publicación veremos como utilizar redux para obtener datos de una API. Con estos datos obtenidos vamos a llenar una lista de criptomonedas y agregar un buscador.
Para comprender el contenido debes de saber lo que es redux y sus principios. Si quieres más información fundamental sobre como usar redux, puedes revisar estas publicaciones:
Primera iteración, datos en duro en los componentes
La idea de empezar con los datos en duro es conocer el formato de lo que responde la API y como esos datos los queremos encajar en los componentes visuales.
¿Cómo son los datos de la respuesta del API?
Primero revisemos la forma de los datos que regresa la API. Estos datos son tomados de aquí. Más adelante simularemos la petición al API para facilitar el desarrollo.
Vamos a crear la interfaz pensando en los datos mostrados y componentes, de momento se me ocurre una tabla donde estarán listados los detalles del mercado y un campo de búsqueda.
Componente CryptoMarkets
Entonces agregamos un componente contenedor /src/CrytoMarkets/CryptoMarkets.js. En este componente contenedor vivirán los dos componentes antes mencionados, uno para hacer la búsqueda y otro para la tabla donde se listaran los mercados y el resultado de la búsqueda.
Y el componente Table en /src/CryptoMarkets/Table.js
import styles from"./Table.module.scss";exportdefaultfunctionTable(){return (<div><divclassName={styles.row}><p>Mercado</p><p>Moneda</p><p>Último precio</p><p>Volumen</p><p>Precio más alto</p><p>Precio más bajo</p><p>Variación 24hrs</p><p>Cambio 24hrs</p></div><divclassName={styles.row}><p>btc/mxn</p><p>btc</p><p>1007500.03</p><p>85.76293860</p><p>1031000.00</p><p>1003978.08</p><p>1015844.01</p><p>-1808.15</p></div><div><p>eth/btc</p><p>eth</p><p>0.08</p><p>52.02866824</p><p>0.08</p><p>0.08</p><p>0.08</p><p>-0.00040000</p></div></div> );}
Y para que se vea como una tabla le agregamos los siguientes estilos en /src/CrytoMarkets/Table.module.scss. Los estilos no es tema de esta publicación así que no le tomes mucha importancia por el momento, en caso de que se te compliquen.
Lo único es que si no estás haciendo el buscador en codesandbox y te sale algún problema con los estilos en sass, instala la librería de la siguiente forma.
En la tabla podemos notar que los divs que contiene los datos y el div del encabezado son muy similares, dentro se encuentran varios párrafos conteniendo cada pedazo de información. Así que crearemos un componente que hago eso, lo que contiene cada fila de la tabla.
Dentro del componente Table agregamos dos arreglos, uno para el header de la tabla y otro para una fila de la tabla. Como mencionamos antes, el header y las filas son muy similares, así que reutilizamos el mismo componente TableRow para generarlos.
Como te puedes dar cuenta el componente TableRow recibe items y className como propiedades, para que el header de la table no tenga el efecto del estilo :hover agregamos la clase .header.
Generando filas dinámicamente y dummies separados.
Usamos el nombre del mercado como el id porque es un dato que no se puede repetir. En este punto debemos tener algo así:
Buscador con dummies
Segunda Iteración, agregando Redux
Para usar redux, necesitamos instalar la librería redux y para facilitar su uso en React instalamos también react-redux. Desde condesandbox puedes agregar estas dependencias en la parte inferior izquierda del editor donde dice “Dependencies“.
En tu computadora local corre el siguiente comando.
yarn add redux react-redux
En este punto ya sabemos la forma en que necesitamos los datos, la tabla necesita unos headers y una lista de filas con valores (rows).
Además, necesitamos crear un store que sea accesible desde cualquier parte de nuestra aplicación. El principal insumo que necesita el store es un reducer. Aún no obtendremos los datos de los mercados de la API, utilizaremos de momento los datos del archivo /src/CryptoMarkets/dummies.js
Importamos la función createStore que recibe una función reducer y opcionalmente un estado inicial. La función reducer de momento solo regresará el estado inicial tal cual, como sabemos, en redux las funciones reducers reciben un estado y una acción. Como segundo parámetro opcional le pasamos los datos dummies.
La función configureStore la utilizaremos a continuación.
Hacer al store accesible
Para que cualquier componente pueda acceder al store es necesario crear un contexto global, esto normalmente se realiza con React.createContext() y usando su componente Context.Provider. Por suerte la librería react-redux ya cuenta con este funcionamiento y podemos utilizar su propio componente Provider.
Si tienes curiosidad como usar el Context de React, puedes revisar esta publicación:
Al componente Provider debemos pasarle una propiedad store. Esa propiedad es el store generado por la función configureStore que creamos en la sección anterior.
Acceder al store desde el componente contenedor CryptoMarkets
Ahora que ya tenemos el store listo para usarse, vamos a obtener el estado para mostrar el listado de markets en el componente Table.
Usamos lo que en redux llaman selectors, los cuales son funciones que acceden a una parte especifica del estado para facilitar su acceso. Se usa el “custom hook” useSelector de react-redux para invocar las funciones selectoras.
Componente Table recibe headers y rows como propiedades
Finalmente, el componente Table debe poder recibir las propiedades headers y rows en lugar de importarlos del dummies.js
El resultado deberá ser el mismo de la primera iteración, pero con los datos obtenidos del store
Buscador con dummies
Implementar la busqueda de mercados
La búsqueda que vamos a implementar será por el nombre del mercado. Así que basándonos en los datos del archivo /src/CrytoMarkets/dummies.js, vamos a modificar nuestra función reducer para agregar la acción de filtrado.
Creamos el archivo /src/CryptyoMarkets/cryptoMarketsState.js donde ahora vivirá nuestro reducer, separándolo del archivo /configureStore.js.
// state = { headers [], all = [], filtered = []}exportdefaultfunctioncryptoMarkets(state,action){switch (action.type) {case"FILTER_MARKETS":return{...state, filtered:state.all.filter((market)=>market.id.includes(action.payload) )};default:returnstate;}}
El comentario muestra la estructura del estado. La estructura sé cambio porque necesitamos guardar la lista original de mercados para ser utilizado en cada búsqueda, de lo contrario filtraríamos mercados sobre los últimos filtrados y así sucesivamente eliminando todos los mercados.
Una acción es un objeto literal que contiene un tipo y demás datos necesarios para cambiar el estado del store, estos datos los vamos a guardar en una propiedad llamada payload.
La acción 'FILTERED_MARKETS', filtra todos los markets que en su propiedad id incluyan el texto contenido en payload.
Disparar acción de filtrado desde el componente CryptoMarkets
Aunque ya creamos la acción, debemos dispararla cuando el usuario escribe en el campo de búsqueda, primero vamos a modificar el componente SearchField. Ahora además de recibir el label como propiedad, también la función que se ejecuta cada vez que el valor de búsqueda cambia.
Se usa el “custom hook” useDispatch de react-redux para disparar acciones desde cualquier componente funcional. Este hook regresa una función dispatch que se utiliza para disparar cualquier acción.
Al componente SearchField se le pasa la propiedad onSearchChange donde recibe la función que invoca la acción cuando el valor del campo de búsqueda cambia.
El resultado de esta iteración debe ser algo como lo siguiente:
Buscador implementado
Refactor, action creator para disparar búsqueda
Los action creators no son más que simples funciones que regresan una acción, y una acción es simplemente un objeto literal con un tipo y datos necesarios para la acción. En esta ocasión vamos a crear el action creator para la acción FILTER_MARKETS. En el archivo /src/CryptoMarkets/cryptoMarketsState.js agregamos al final lo siguiente
En el código anterior se importa el json en una variable llamada markets y se crea una promesa con un temporizador de un segundo, después del segundo la promesa se resuelve retornando los datos de los mercados (contenidos en la variable markets).
Usar redux-thunk para obtener los markets
¿Qué es un thunk?
Su definición en el ámbito de programación en general:
Los thunks se utilizan principalmente para retrasar un cálculo hasta que se necesite su resultado.
https://en.wikipedia.org/wiki/Thunk
En react se utiliza para escribir funciones en redux con lógica avanzada relacionadas con el estado de la aplicación. Donde se puede trabajar con operaciones tanto asíncronas como síncronas. Estas funciones thunk tienen acceso a las funciones dispatch() y getState() de redux, por esta razón un thunk internamente puede disparar cualquier numera de acciones y obtener los datos actuales del estado por si son necesarios en su lógica de programación.
Crear un Thunk action creator
En realidad un thunk se usa como se usan los action creators, por ese se les llama Thunk action creator.
En el codigo de arriba, el action creator regresa una función asíncrona que recibe solo la función dispatch (no vamos a necesitar la función getState()). La función comienza pidiendo los markets y una vez obtenidos, dispara la acción RECEIVE_MARKETS.
Actualizar reducer para entender la acción RECEIVE_MARKETS
En el archivo /CryptoMarkets/cryptoMarketsState.js agregamos él case para la acción RECEIVE_MARKETS. El código de este archivo debe quedar como el de abajo.
Para que el thunk se ejecute correctamente es necesario indicarle al store como tratar este tipo de funciones, para eso necesitamos agregar el middleware de react-thunk. Un middleware extiende o mejora la funcionalidad en un punto medio del software o comunica diferentes puntos de la aplicación, y también puede comunicar aplicaciones diferentes. De hecho en redux también se les llama enhancers.
Primero importamos la función applyMiddleware, luego importamos el middleware llamado thunk y finalmente aplicamos el middleware en el terecer parametro de createStore.
También cambiamos el initialState, los header los dejamos en el archivo dummies.js. Las propiedades all y filtered las cambiamos a array vacíos.
Invocando el thunk desde el componente CryptoMarkets
Por último, necesitamos invocar nuestro thunk para obtener los markets de nuestro servicio simulado. El archivo /CrytoMarkets/CryptoMarkets.js donde vive el componente padre CryptoMarkets debe quedar como el de abajo.
En este punto nuestra aplicación nos debe mostrar un error porque el formato de las propiedades de los componentes no son iguales a la respuesta del api, pero podemos agregar un console.log(action) en el reducer para comprobar que el api simulado está respondiendo con los datos.
En la imagen de arriba vemos en la consola que recibimos los datos del API simulado. En la siguiente sección eliminaremos este error mapeando correctamente los datos al formato de como los necesita el componente.
Mapeando datos a UI
Para que el error desaparezca, necesitamos mapear los datos obtenidos del servicio a datos que entienda los componentes, para esto creamos el archivo /mappers.js y vamos a crear las funciones de mapeo:
Ahora la función de mapeo es recibida por nuestro thunk, de esta manera, podemos utilizar diferentes mapeos para diferentes tipos de componentes. Imagínate que tenemos otra pantalla donde necesitamos mostrar la misma información en una lista de cards, ¿Verdad que el mapeo es diferente? ´Todo lo demás se deja intacto y solo cambiamos el mapeo.
Para esta pantalla donde tenemos una tabla, el resultado es el siguiente:
Error arreglado
Estilos en campo de búsqueda
Un toque final, vamos a mejorar el campo de búsqueda creando estos estilos:
Todavía quedan más cosas por hacer y mejorar, al igual que hicimos en esta publicación incrementando en iteraciones pequeñas hasta conseguir que funcione el buscador, así tendremos más publicaciones para continuar mejorando e incrementando aún más las funcionalidades.
Para comenzar a entender el uso de useMemo y useCallback, es necesario entender lo que es memoization o memoización en español.
¿Qué es memoization?
Memoization es una tecnica de optimización en el codigo para evitar repetir el trabajo computacional previamente realizado. Es por eso que la palabra memo, se refiere a poder recordar un resultado calculado anteriormente.
Tambien se puede entender como la forma de hacer cache de los resultados previos y evitar trabajo innecesario.
Memoization en funciones de Javascript
Cuando se trabaja con funciones en Javascript es fácil de implementar memoization, se puede usar closure o simplemente agregar una propiedad a la función (una función es un objeto). Esta propiedad normalmente puede ser un objeto o un array para guardar los resultados ya calculados.
Voy a escribir un ejemplo, nos quedamos con lo más simple agregando una propiedad memo a la función.
Ahora si ejecutamos varias veces la función con algunas valores para number, los valores anteriormente calculados se extraen de la propiedad memo ahorrándonos de cálculos innecesarios.
multiplyByTen(5);// multiplica 5 * 10 = 50multiplyByTen(6);// multiplica 6 * 10 = 60multiplyByTen(5);// No se calcula y se obtiene el valor 50 de la propiedad memo
En el ejemplo expuesto multiplicar por diez es un cálculo sencillo, pero si fuera uno que necesite mucho más poder computacional de lo normal, sí que valdría la pena optimizar la función con memoization.
Memoization con React
En React la optimización con memoization es un poco diferente a lo que acabamos de ver, en React, solo se guarda el valor calculado anteriormente inmediato, y este se actualiza conforme se cambian los parámetros de la función.
Transformar conceptualmente el ejemplo anterior a la forma como React lo implementa, seria como el siguiente ejemplo.
A continuación, al invocar la función con mismo parámetro que el anterior obtiene el valor previo, pero si los parámetros cambian, entonces si se hace el cálculo del resultado y este último se guarda como el prevResult. Así también con el parámetro que se guarda como prevInput.
multiplyByTen(5);// si hace el cálculo para regresar 50multiplyByTen(5);// No hace el cálculo porque el parametro es el mismo, regresaa 50multiplyByTen(6);// Si hace el cálculo, regresa 60multiplyByTen(5);// Se hace el cálculo porque este parametro es diferente al anterior 5 !== 6
React.memo para componentes
En Javascript existen las funciones de alto nivel, en React existen las funciones que generan a los componentes de alto nivel o HOC (High Order Component). Las cuales reciben como parámetro un componente y regresan uno nuevo.
React.memo es una función que genera un HOC como resultado, pero además optimiza el renderizado de este componente HOC.
¿Cómo funciona React.memo?
Ya habíamos comentado que la memoization en React solo guarda los parámetros usados en la última invocación y el resultado anterior. Veamos un ejemplo de cuando se cambia el estado del elemento padre de un elemento creado con React.memo
// Primer render hace el cáculo necesario<UserInfoMemofirstName="Jaime"lastName="Cervantes"></UserInfoMemo>// Segundo render, ninguna propiedad cambia, no se hace otro cálculo<UserInfoMemofirstName="Jaime"lastName="Cervantes"></UserInfoMemo>// Tercer render, cambia firstName a "Juan", vuelve hacer el cálculo del elemento<UserInfoMemofirstName="Juan"lastName="Cervantes"></UserInfoMemo>// Cuarto render, se vuelve a cambiar firstName a "Jaime", hace otro cálculo del elemento<UserInfoMemofirstName="Jaime"lastName="Cervantes"></UserInfoMemo>// Quinto render, se cambia a lastName a "Velasco", hace otro cálculo del elemento<UserInfoMemofirstName="Jaime"lastName="Velasco"></UserInfoMemo>// Sexto render, ninguna propiedad cambia, no se hace otro cálculo<UserInfoMemofirstName="Jaime"lastName="Velasco"></UserInfoMemo>
Ejemplo
El siguiente ejemplo se crea un componente llamado UserInfoMemo con la función memo y otro componente llamado UserInfo sin usar React.memo.
import{useState}from'react';import UserInfoMemo from'./components/UserInfoMemo';import UserInfo from'./components/UserInfo';functionApp(){const[title,setTitle]=useState('Memoization');const[firstName,setFirstName]=useState('Jaime');const[lastName,setLastName]=useState('Cervantes');console.log('render App');return (<divclassName="App"><h1>{title}</h1><UserInfofirstName={firstName} lastName={lastName}></UserInfo><UserInfoMemofirstName={firstName} lastName={lastName}></UserInfoMemo><buttononClick={()=>setTitle('Nuevo titulo')}>Nuevo titulo</button><buttononClick={()=>setTitle('Otro nuevo titulo')}>Otro titulo</button><buttononClick={()=>setFirstName('Juan')}>Nombre a Juan</button><buttononClick={()=>setFirstName('Jaime')}>Nombre a Jaime</button><buttononClick={()=>setLastName('Velasco')}>Apellido a Velasco</button><buttononClick={()=>setLastName('Cervantes')}>Apellido a Cervantes</button></div> );}exportdefault App;
Cuando cambia el estado de title en App, UserInfo se vuelve a renderizar, pero UserInfoMemo no, este último solo se renderiza cuando su propiedad firstName cambia. Puedes probarlo presionando los botones de título que provocan cambios en el estado title y los botones Juan y Pepe que provocan cambios en el estado de firstName.
A continuación el código de <UserInfo> y <UserInfoMemo>.
El hook useMemo te permite recordar el valor anterior si los parámetros usados para el cálculo no cambian, tal cual implementa el concepto de memoization en React recordando solo el valor anterior.
La sintaxis es la siguiente.
useMemo(()=>computeExpensiveValue(a, b), [a, b]);// o así:useMemo(function(){returncomputeExpensiveValue(a,b);}, [a, b])
Recibe una función para realizar un cálculo que involucre un gasto considerable de tiempo y recursos computacionales. Y como segundo parámetro una array de dependencias, para que solo se vuelva a ejecutar la función si alguna de las dependencias ha cambiado, de lo contrario regresa el valor recordado previamente.
Vamos a suponer que el arreglo de usuarios es muy grande y se obtiene a partir de la petición a un servicio, cada vez que se hace render de <App> se hace la petición y se genera el arreglo cuando cambiamos el estado de selectedUser
En el primer render, los console.logse ejecutan como sigue.
render Apprender UserListuseEffect UserList
Cuando se cambia el estado de selectedUser provoca otro renderizado de <App> y por consiguiente la asignación de la constante users se vuelve a ejecutar. Dado que se cambió el estado también se vuelve a renderizar <UserList>, hasta ahí no hay problema porque es lo que se espera. El problema es que se vuelve a ejecutar el useEffect en <UserList> debido a que la constante users contiene un nuevo array.
En segundo renderizado por cambio de selectedUser.
render Apprender UserListuseEffect UserList
useMemo para users
Lo ideal es que el useEffect no se vuelva a ejecutar, porque los valores de los usuarios en realidad no cambiaron. Aquí es donde useMemo tiene utilidad conservando la referencia del valor anterior.
De esta manera cuando cambiamos a selectedUser, nuestro useEffect ya no se ejecuta porque se sigue usando el mismo arreglo definido en App y no se vuelve a asignar uno nuevo gracias a useMemo.
render Apprender UserList
Usando React.memo sobre <UserList>
Podemos optimizar UserList aún más, convirtiéndolo en un HOC usando la función React.memo.
Usando React.memo, cuando se presiona el botón para cambiar el userSelected, ya no se renderiza <UserList>. Ahora en la consola solo imprime render App.
render App
Imagínate que users debiera recibir un arreglo con mil usuarios. Vale la pena hacer memoization de esos datos para evitar volver a renderizar <UserList> con mil elementos <li> que representen a cada usuario. Solo es un ejemplo, no es que en aplicaciones reales quieras obtener mil usuarios de una sola vez, para eso están las paginaciones.
Agregando selectUser
El componente UserList necesita establecer el usuario seleccionado. Agregamos una función llamada selectUser que use setUserSelected para actualizar el usuario seleccionado.
Ahora ya no tenemos problemas con la constante users gracias a useMemo y hasta evitamos el renderizado de <UserList> con React.memo.
useMemo para selectUser
Pero acabamos de agregar una función para actualizar el usuario seleccionado, cada vez que cambiamos el estado de selectedUser, la función se vuelve a crear y al ser una nueva referencia en memoria, entonces la propiedad onSelectUser de <UserList> cambia, por lo que si se renderiza este componente.
render Apprender UserList
Para evitar el tema anterior también nos sirve useMemo, al permitirnos guardar un valor de cualquier tipo, también podemos guardar una función, mientras alguna de las dependencias no cambie, la referencia a la función seguirá siendo la misma entre renderizados.
<ahref="https://codesandbox.io/s/userlist-con-usememo-ehqrx?fontsize=14&hidenavigation=1&theme=dark"><imgalt="Edit UserList con useMemo"src="https://codesandbox.io/static/img/play-codesandbox.svg"></a>
Puntos importantes del código final
<UserList> se optimizó con React.memo
user y selectUserMemo han sido optimizados con useMemo.
Estas dos valores se pasan como propiedades a <UserList>.
Los cosole.log en <UserList> (“render UserList” y “useEffect UserList”) solo se ejecutan al primer render porque users y selectUserMemo han sido optimizados con useMemo. Y <UserList> con React.memo.
useCallback
Anteriormente usamos useMemo para guardar la referencia de una función, es algo común que se quiera optimizar la creación de las funciones y evitar renderizados de componentes que reciban como propiedad esa función. Es por eso que existe useCallback, para facilitar la memoization de funciones.
Aunque estas optimizaciones con React.memo, useMemo y useCallback pueden ser importantes, por ejemplo cuando se renderizan muchos elementos debido a un cambio, como los mil usuarios que comentamos en secciones anteriores en el componente <UserList>. A menudo estas optimizaciones no se deben hacer prematuramente. El consejo de Donald Knuth no se refiere a no hacer optimizaciones por completo, sino hacerlas en el momento adecuado.
¿Pero cuándo es el momento adecuado?
En ambientes ágiles debemos recordar los términos YAGNI y KISS, que se refieren a construir las funcionalidades con el conocimiento que se tiene actualmente y de la forma más simple posible. Aplicando este principio de simplicidad podemos detectar en el futuro posibles optimizaciones, pero solo cuando sean detectadas y tengamos conocimiento que las necesitamos de verdad.
Si nos ponemos a analizar los ejemplos anteriores en realidad la mini aplicación no necesita estas optimizaciones y hacen que nuestro código sea más complejo. Se puede decir que para poder ejemplificar el uso de memoization en React incurrimos en una optimización prematura.
Con esto no quiero decir que no debas refactorizar tu código, claro que si, las pruebas unitarias y funcionales te permiten encontrar puntos de refactorización necesarios que nos ayudan a tener un código más limpio y entendible.
Precisamente el objetivo principal de la refactorización es el entendimiento del código que nos permitan mantener nuestras aplicaciones con el tiempo. Esto muy a menudo resulta en código con mejor rendimiento, pero solo el necesario.
Ya cuando se presente un punto de optimización considerable, donde el beneficio es más grande que tener u código más complejo, por supuesto que se puede implementar.
Conclusiones
React.memo,useMemo y useCallback son útiles a la hora de optimizar código usando la técnica de memoization, solo se recomienda utilizarlos cuando se presentan cualquiera de estores tres puntos.
Cálculos que tengan un gasto considerable de tiempo y demás recursos computacionales como la memoria.
Guardar la referencia en valores para verificar cuando cambian. Principalmente cuando no son primitivos, como un arreglo, objeto literal o funciones.
Evitar renderizados de más cuando los valores que provocan el renderizado en realidad no han cambiado.
Con el uso de esta funciones de memoization en React debemos tomar mucho en cuenta lo que nos aconseja Donald Knuth. Los tres puntos anteriores son la guía para estas optimizaciones.
Estos dos React hooks se complementan a la hora de crear aplicaciones. Si tu aplicación no es tan grande y compleja, estos dos react hooks te ayudaran a manejar el estado global de una forma muy similar a como lo hace Redux.
Si no estás familiarizado con Redux, te recomiendo revisar los principios usados en Redux. Además la combinación de useContext y useReducer es un buen punto de partida para empezar a entender como funciona.
Primero aprenderemos a utilizar useContext, luego useReducer, y finalmente uniremos estos dos React Hooks para replicar el comportamiento básico de Redux y controlar el estado global de una pequeña aplicación.
Contexto
La idea del contexto es que ahí guardes cierta información que necesitas en varios componentes. El problema a resolver es que esos componentes se encuentran en diferentes niveles del árbol de nodos de tu aplicación. Por esta razón, una instancia de un contexto contiene dos propiedades componentes, un Proveedor y un Consumidor (Provider, Consumer). Como consecuencia el proveedor almacena y suministra los datos, mientras el consumidor pide acceso a ellos.
Agregando a useContext, existen tres formas de consumir el contexto actual de una aplicación
static contextType = UnContexto
<UnContexto.Consumer>
useContext(UnContexto)
Las tres maneras de obtener el contexto depende de que exista su correspondiente componente proveedor padre <UnContexto.Provider>. De las tres, la forma más simple es useContext(UnContexto), punto a favor de los React Hooks.
A continuación vamos a describir el ejemplo para la creación del contexto, más tres ejemplos de los modos de consumirlo.
createContext(defaultContext)
Primero necesitamos crear un contexto para poder consumirlo, la forma de crear el contexto no cambia para los consumidores.
Creamos un nuevo proyecto en codesandbox.io y creamos un archivo llamado UserNameContext.js con el siguiente contenido. En el ejemplo queremos obtener del nombre de un usuario en nuestra aplicación, que se usa en distintos componentes.
Ahora en nuestro archivo App.js importamos el contexto.
import UserNameContext from'./UserNameContext';
Necesitamos suministrar a la aplicación con los datos de nuestro contexto, para eso ocupamos al componente <UserNameContext.Provider> y actualizamos el valor del contexto cuando el usuario escribe en el campo de texto.
El componente <Header> es padre del componente <UserInfo>, de esta manera se ejemplifica el consumo del contexto en un tercer nivel de componentes.
El componente de <UserInfo /> contendrá al consumidor del contexto. Así que este es el único componente que cambiara su implementación para ejemplificar los tres modos de consumo del contexto. En las siguientes tres secciones se muestra cada forma.
static contextType = UnContexto
Para usar esta forma de consumir el contexto, debemos crear un componente de clase. La importación del contexto debe aplicarse también para los otros dos formas. Es algo que no cambia en las tres implementaciones.
Simplemente se agrega una propiedad estática contextType a la clase, asignándole como valor el objeto contexto generado por createContext(initialContext) anteriormente.
Luego podemos usar this.context en cualquiera de los métodos del ciclo de vida de un componente en React, para hacer referencia al valor actual del contexto y utilizarlo. Tal cual como se muestra en el ejemplo de arriba, donde utilizamos el método render().
<UnContexto.Consumer>
Esta manera de consumir el valor del contexto, pude usarse en un componente de clase o en un componente funcional, necesitamos importar el objeto del contexto y utilizar el componente Consumer que está definido como propiedad del objeto contexto.
Al componente Consumer mencionado en el párrafo anterior le pasamos como children una función, la cual puede recibir como primer parámetro el valor actual del contexto. Por último en este ejemplo mostramos el valor del contexto en una etiqueta <p>.
Uno de los objetivos de esta publicación es mostrar como usar el React Hook useContext(UnContexto), este hook es el equivalente a la propiedad static contextTypes = UnContexto en un componente de clase o el uso del componente <UnContexto.Consumer>, es decir, también puede obtener el valor actual del contexto y subscribirse a cambios del mismo.
Igual que las demás formas, importamos el objeto contexto, luego dentro del componente funcional, invocamos a useContext pasándole como parámetro el propio contexto. Así obtenemos el valor actual del contexto y lo guardamos en la constante value. Si el contexto cambia, esto provocara que el componente <UserInfo /> se vuelva a renderizar con el nuevo valor del contexto.
Compara la complejidad de obtener el contexto con useContext(UserNameContext), static contextType = UserNameContext y <UserNameContext.Consumer>.
Este React Hook es bastante interesante como alternativa a useState, se recomienda usarlo cuando:
Necesitas controlar el estado en algún objeto complejo, lo más común es en un objeto literal o Arreglo
Realizar lógica compleja relacionada con el estado previo para calcular el próximo estado.
useReducer, como su nombre lo indica utiliza una función reducer, esta función es la que se encarga de manejar la complejidad de los cambios en el estado de la misma forma que los reducers en Redux.
reducerFn, es la función reducer encargada de la lógica de actualizar el estado, es una función en la forma (state, action) => { }.
initialState, es el estado inicial.
initLazyFn, este parámetro es opcional, se usa para calcular el estado inicial final basado en el initialState, se invoca initLazyFn(initialState) para obtener el estado final. Útil para separar la lógica del cálculo del estado inicial de la función reducerFn.
Ejemplo
Creamos un nuevo proyecto en codesandbox.io, y en el archivo App.js ponemos lo siguiente:
El ejemplo es un formulario donde se guarda el nombre, apellido y edad de un usuario conforme escribe en sus respectivos inputs. Luego hasta el final tiene un botón para guardar al usuario en locaStorage al enviar el formulario.
Se tiene en archivos diferentes ainitialState,initLazyFn (parseInitialState) y reduceFn(reduceUser).
initialState e initiLazyFn
initialState.js, como ya mencionamos es el estado inicial.
exportdefault{name:"",age:0,lastName:""};
parseInitialState.js (initLazyFn), dado que al enviar el formulario se guarda en el localStorage, se debe parsear los datos del localStorage si es que existen.
reduceUser.js, la mayoría de las acciones realmente no son tan complejas, pero tampoco tan simples para usarlo en un useState(). El usuario guardado se puede almacenar en un arreglo de usuarios y que sea parte del estado, sin embargo no queremos complicar más las cosas, además necesitaríamos crear un componente que liste los usuarios.
Ahora bien, ya que tenemos todo el código de los archivos separados, podemos revisar el archivo App.js. En el componente App, en lugar de usar useState, se invoca a useReducer.
Se utiliza el evento onChange para disparar acciones con dispatch() y el evento onSubmit en el formulario para guardar en localStorage (“saveUser”). Aquí abajo el ejemplo completo.
Preparando codigo para combinar useContext y useReducer
Vamos a mejorar el ejemplo anterior, siguiendo las pautas que nos indica Redux, agregaremos todo lo relacionado con el estado en una carpeta llamada store.
Primero definimos el nombre de funciones como constantes en el archivo /store/actionTypes.js, para hacer referencia a ellas sin algún error de escribirlo incorrectamente.
Y finalmente vamos a actualizar las importaciones y las invocamos las funciones actions en App.js. Esto último para obtener el objeto action que necesita reduceUser(state, action) y tener un código más corto y entendible. Al menos en este caso nos evitamos la notación dispatch({ type: 'updateLastName', payload: e.target.value }). Ahora solo hacemos dispatch(updateLastName(e.target.value))
En esta sección vamos a utilizar useContext y useReducer para crear una pequeña aplicación al estilo Redux.
Primero vamos a dividir nuestra pequeña aplicación en varios componentes, agregaremos un componente <Header> el cual contendrá a otro llamado <UserInfo>. Luego otro componente <UserForm> donde usaremos el contexto para usar las acciones de nuestro reducer y el estado.
Header y UserInfo
Creamos una carpeta llamada components y creamos tres archivos, Header.js, UserInfo.js y UserForm.js.
En el componente <UserInfo>, a diferencia de la primera versión que hicimos al inicio de esta publicación, el valor del contexto es un arreglo conteniendo state y dispatch. Solo que en <UserInfo> solo nos interesa state.
Antes de crear el componente <UserForm>, vamos a crear el contexto que se utilizara en <UserInfo> y en <UserForm>.
Crear contexto
Creamos el archivo /store/UserContext.js dentro de la carpeta store
Como vemos agregamos el componente <Provider> del objeto UserContext y le asignamos como valor un arreglo conteniendo state y el dispatch. Si queremos podemos pasar solo una variable, así podemos decir que el valor del contexto es el store, en realidad esto es igual a como lo hace Redux, solo que redux trae su propio Provider.
Ahora si podemos crear el componente <UserForm> que utilizara el contexto y disparará las acciones a nuestra función reduceUser, es decir, utilizara el store de la aplicación.
Archivo /components/UserForm.js. Simplemente copiamos el contenido JSX del formulario que estaba App.js, importamos los action creators y el UserContext para utilizar useContext(UserContext) y obtener el store.
Listo podemos tener nuestra aplicación con un store igual al de Redux sin importar esta librería, esta funcionalidad ya viene construida dentro de React.
Por si no sabias como usar el contexto, en esta publicación aprendimos como crearlo y suministrar su valor a cualquier elemento hijo del árbol de nodos. Después para consumir el valor utilizamos las tres formas de hacerlo:
static contextType = UnContexto
<UnContexto.Consumer>
useContext(UnContexto)
Al final utilizamos el React Hook useContext y comparamos las complejidades, por consiguiente se puede notar que el useContext es la forma más simple de obtener el valor del contexto.
Aprendimos a utilizar useReducer() y como su funcionalidad es casi idéntica a los reducers de Redux. Luego mejoramos el código para separar la función reducer, los actions y los action types tal cual se haría en Redux separando responsabilidades.
Finalmente usamos createContext, useContext y useReducer para tener acceso al store de la misma forma que lo hacemos con Redux. Concluyendo que sin la necesidad de una librería de terceros, como lo es Redux, React ya contiene este tipo de funcionalidad gracias a los React Hooks useContext y useReducer. Estos hooks son ideales para aplicaciones pequeñas que no necesiten de las funcionalidades avanzadas de Redux.
Ya se explicó como usar useEffect en estapublicación, sin embargo aún queda una variante muy importante que de hecho es la variante más compleja, por esta razón merece ser parte de este contenido.
Inicialmente crearemos un ejemplo con esta forma de useEffect, la cual tendrá una función de retorno que sirve para hacer limpieza, llamaremos limpieza a esta función a lo largo de todo el contenido. Adicionalmente, crearemos dos React hooks personalizados para extraer la funcionalidad de la variante limpieza en piezas más pequeñas.
Como recordatorio, useEffect nos permite ejecutar y controlar efectos colaterales, como pueden ser peticiones a servicios, subscribirse a eventos, modificar el DOM o cualquier funcionalidad de manera imperativa.
Recordando el flujo de useEffect(effectFn, [deps])
Primero, la función effecFn (el primer parámetro que recibe useEffect) se ejecuta después de que el navegador ya ha pintado el componente en pantalla por primera vez (montar). Segundo, la función effectFn se ejecuta después de cada posterior repintado (actualizar). Estos dos comportamientos descritos tienen el mismo propósito que los métodos componentDidMount y componentDidUpdate.
El tercer propósito en useEffect se le llama limpieza, el cual lo podemos comparar con componentDidUnmount. En el primer pintado (montar) la función de limpieza no se ejecuta, solo se ejecuta en la fase de actualizar. Esto se debe a que la función limpieza, en realidad no existe aún en el primer pintado porque es el valor de retorno de effectFn.
El flujo de useEffect se representa en la imagen de abajo. Modificado de este original.
Flujo useEffect
Haciendo una petición a un servicio con useEffect(effectFn, [deps])
En un proyecto nuevo de codesandbox.io, crea el archivo OldNewsPapers.js. Lo que se busca con este componente es hacer peticiones a un servicio, donde podemos buscar información sobre periódicos antiguos de USA.
En resumen, la funcionalidad de este ejemplo es que en el campo de búsqueda el usuario escriba algún texto relacionado, cuando el usuario se detenga de escribir por un tiempo mayor al definido, entonces es cuando se dispara la petición.
Primero vamos a hacer solo la petición sin preocuparnos del tiempo definido de espera para ejectuarla.
Aquí está el ejemplo en codesandbox.io. Cada vez que query es modificado, se realiza una petición, como se ve en la imagen de abajo.
useEffect usando fetch
Al instante que el usuario empieza a escribir “texas”, se actualiza el estado de query provocando un “repintado” y se ejecuta la función effecFn por cada letra que se inserte.
Desafortunadamente hacer peticiones a un servicio cada vez que escribimos una letra no es un buen funcionamiento, es mejor solo hacer la petición cuando el usuario deja de escribir, tal como se planteó al principio, asi que vamos a implementar esta mejor solución en la siguiente sección.
useEffect(() => { return function limpieza(){}; }, [deps])
Comentamos previamente que esta función de limpieza se ejecuta solamente en los “repintados”, en el primer pintado no se ejecuta porque la función limpieza es el valor de retorno de la función effectFn. En el pintado número uno la función limpieza aún no existe.
Ejemplo
Para hacer la petición al servicio cuando el usuario deje de escribir, vamos a utilizar un temporizador, este temporizador estará creándose y limpiándose después de cada repintado. Cuando el usuario se detenga de escribir y pase el tiempo definido en el temporizador, ahí es donde haremos la petición al servicio.
import{useEffect,useState}from"react";exportdefaultfunctionOldNewsPapers(){const[query,setQuery]=useState("");const[newsPaperCount,setNewsPaperCount]=useState(0);const[isTyping,setIsTyping]=useState(false);useEffect(()=>{console.log("función effectFn");if (query&&!isTyping) {console.log(" fetch-->",query);fetchOldNewsPaperTitles();}asyncfunctionfetchOldNewsPaperTitles(){constresponse=awaitfetch(`https://chroniclingamerica.loc.gov/search/pages/results/?andtext=${query}&format=json` );constjson=awaitresponse.json();setNewsPaperCount(json.totalItems);}lettimeoutId;if (isTyping) {timeoutId=setTimeout(()=>{console.log(' setIsTyping(false), provoca otro "re-pintado"');setIsTyping(false);},1000);console.log(" timeout",timeoutId);}return()=>{console.log("----------re-pintado--------------");console.log("función limpieza");if (timeoutId) {clearTimeout(timeoutId);console.log(" clearTimeout",timeoutId);}};}, [query,isTyping]);return (<><h1>Periódicos viejos que contienen {query}</h1><form><inputtype="text"value={query}onChange={(e)=>{setIsTyping(true);setQuery(e.target.value);console.log(`onChange: setIsTyping(true) y setQuery(${e.target.value})` );}} /></form><section>{newsPaperCount}</section></> );}
Al código de arriba le dejé varios console.log para que podamos ver el flujo, si quieres se los puedes eliminar para mayor claridad. Aquí esta este ejemplo completo en codesandbox.io.
useEffect con limpieza
Explicación de flujo
Después del primer “pintado” se ejecuta effectFn, luego cuando el usuario empieza a escribir “texas” provoca un “repintado”, lo anterior sucede por cada letra insertada debido al evento onChange que actualiza el estado de query.
Posterior a cada repintado se ejecuta primero la función limpieza, eliminando el temporizador, luego la función effectFn volviendo a activar un temporizador y retornando una nueva función limpieza.
Cuando el usuario deja de escribir, la función callback del setTimeout se ejecuta, provocando la actualización del estado isTyping a false. Lo anterior causa otro repintado adicional, teniendo a isTyping igual a falsey query igual a “texas”, siendo las condiciones (query && !isTyping) necesarias para realizar una petición. En el momento que el resultado de la petición está listo, se actualiza setNewsPaperCount con el número de periódicos antiguos que contiene la palabra “texas”. La actualización de setNewsPaperCount provoca un último repintado, solo que en este último repintado no se ejecuta la función limpieza ni effectFn porque query y isTyping, las dependencias de nuestro useEffect, permanecen sin cambiar.
React Hooks personalizados
Las funciones son la unida esencial para la organización y reutilización de código, ya sea solo para separar las responsabilidades de cada función y/o para encapsular código/funcionalidad reutilizable. Los React Hooks perzonalizados, al ser funciones también tienen esta habilidad de organización y reutilización.
Vamos a extraer funciones de nuestro ejemplo anterior con la finalidad de hacer más fácil de leer el código, lo primero que podemos ver es que dentro del useEffect, tenemos un código que realiza una petición usando el API de fetch y otro para llevar el control del temporizador. Tal vez valga la pena separarlos, a estas funciones separadas se les llama React hooks personalizados porque la separación se realiza en forma de Hooks
Lo que hacemos en realidad es pasar tal cual el código que queremos separar, y luego cambiar los nombres de los identificadores para mejorar su lectura y entendimiento.
Explicación del Reack hook personalizado useCanContinueTimeout
Este React Hook personalizado, puede ser utilizando en cualquier campo de búsqueda donde se quiera realizar una acción después de que el usuario deja de escribir por un tiempo determinado. Recibe dos parámetros, un valor que es el trigger o disparador principal del efecto. Y otro valor que indica el tiempo del temporizador (waitTime), si no se limpia y se crea otro temporizador, canContinue es actualizado a false indicando que la acción de escribir dejo de suceder durante el tiempo indicado por waitTime.
El estado interno canContinue condiciona si puede seguir creando temporizadores o no, si es false ya no puede crear temporizadores, porque la acción de escribir dejo de suceder y si es true indica que el usuario está escribiendo. Se expone este estado canContinue al exterior regresando un par de valores tal cual lo hace useState para su manejo.
La razón por la que se expone al exterior canContinue es porque es más flexible que desde donde se use este hook se pueda definir inmediatamente en que momento puede seguir creando temporizadores o no.
En el caso particular del ejemplo solo le interesa indicarle que si puede continuar creando temporizadores mientras el usuario siga escribiendo dentro del campo de búsqueda.
¿Cómo se puede usar el react hook personalizado useCanContinueTimeout?
Este Hooks se puede usar de la siguiente forma con el ejemplo que hemos estado trabajando.
Aunque se creó pensando en el uso del campo de búsqueda, queda claro que pude ser usado para saber si se detuvo o continua cualquier otra acción. Puede usarse en cargadores, en notificaciones temporales, acciones de scroll en el navegador web y de momento no se me ocurre otro caso, es una primera versión del hook, pero es un ejemplo de como podemos extraer funcionalidad con react hooks personalizados.
Ahora es el turno de la función que realiza la petición a un servicio, primero separamos la funcionalidad, al igual que con useCanContinueTimeout solo copiamos el código y cambiamos los nombres de las dependencias de useEffect.
De entrada le cambiamos el nombre para que tenga más sentido sobre lo que hace realmente, obtener un json cuando una condición se cumple. Luego ya no obtendremos solo el número de resultados, mejor ahora guardamos la respuesta completa. Además para no crear una función separada abajo de la condición, se utilizó una función autoinvocada (function() {})().
Solo se hará la petición si se tiene una url y la condición se cumple, el manejo de estos dos datos no es responsabilidad de este hook, así que se la delegamos al usuario final, que en nuestro caso es el componente OldNewsPapers.
Funcion async/await del useEffect
Creamos una función anónima para poder hacer la petición asincrónicamente sin hacer a effectFn asíncrona, ¿Por qué no queremos hacer la función effectFn asíncrona? La respuesta en realidad es simple, normalmente la función effectFn regresa undefined o una función normal de limpieza, pero si la hacemos asíncrona deberá regresar una promesa, lo cual romperá con el funcionamiento normal de valores de retorno de useEffect. Por no mencionar que función effectFn es invocada de manera normal, no de forma async/await.
Aclaramos que la forma anterior donde primero se definía la función por separado de la invocación dentro del effectFn es equivalente a esta función anónima autoinvocada. Al final regresamos el estado del hook, que es la respuesta del servicio o un objeto vacío cuando la respuesta aún no se ha obtenido.
Extraer en su propia función a fetch con petición GET para respuestas JSON.
Finalmente vamos a extraer la funcionalidad de hacer la peticion para que sea mas simple de leer el efecto
functionuseGetJsonWhenCondition(url,condition){const[state,setState]=useState({});useEffect(()=>{if (url&&condition) { (async()=>{setState(awaitgetJson(url));})();}}, [url,condition]);returnstate;}// Es simple , sin control de errores para no perder el enfoque de los hooksasyncfunctiongetJson(url){constresponse=awaitfetch(url)returnawaitresponse.json();}
Separamos el uso de fetch en su propia función getJson, porque el uso de fetch y la llamada al servicio involucra un manejo más detallado de errores, de momento lo dejamos de manera simple separando la invocación.
Implementamos el react hook personalizado useGetJsonWhenCondition en nuestro componente OldNewsPapers
Ahora si se puede utilizar el hook en nuestro componente de ejemplo, de la siguiente forma.
exportdefaultfunctionOldNewsPapers({url}){const[query,setQuery]=useState('');const[fetchUrl,setFetchUrl]=useState('');const[isTyping,setIsTyping]=useCanContinueTimeout(query,WAIT_TIME);constnewsPapers=useGetJsonWhenCondition(fetchUrl,!isTyping);// Dejamos el manejo de url y la actualización de canCantinue al componente que los utilizauseEffect(()=>{if (query) {setIsTyping(true);setFetchUrl(url.replace('{query}',query));}else{setFetchUrl('');}}, [query,url]);return (<><h1>Periodicos viejos que contienen {query}</h1><form><inputtype="text"value={query}onChange={(e)=>{setQuery(e.target.value);}} /></form><section>{newsPapers.totalItems}</section></> );}
Como vemos el manejo de la condición y la formación de la url se la dejamos el componente que usa el hook, no al hook useGetJsonWhenCondition(url, condition). De esta manera el React Hook personalizado useGetJsonWhenCondition(url, condition) puede ser reutilizado, es decir, el componente OldNewsPapers depende de los dos React Hooks personalizados que acabamos de crear, no al revés.
Puntos importantes al usar y crear React Hooks Personalizados
Invocaciones y renderizados
Los componentes funcionales se vuelven a ejecutar cuando algo en el estado cambia, y por consiguiente también se ejecutan las funciones de react hooks personalizados. En los ejemplos que vimos, cada vez que cambia algo en el estado de query, fetchUrl, isTyping y newsPapers, provocara otra invocación del componente función OldNewsPaper, por consiguiente también se invocaran las funciones useCanContinueTimeout y useGetJsonWhenCondition (React hooks personalizados) que creamos y todo esto se traduce a un re-renderizado.
¿Por qué NO queremos hacer la función effectFn asíncrona?
La respuesta en realidad es simple, normalmente la función effectFn regresa undefined o una función normal de limpieza, pero si la hacemos asíncrona, deberá regresar una promesa, lo cual romperá con el funcionamiento normal de valores de retorno de useEffect. Por no mencionar que función effectFn es invocada de manera normal, no de forma async/await.
Reglas de React hooks personalizados
Las mismas dos reglas importantes aplicadas a los React Hooks, son tambien aplicadas a los React Hooks personalizados.
Solo ejecuta React Hooks al nivel superior de una función componente o React Hook personalizado
Solo ejecuta React Hooks dentro de funciones de React
Los nombres de los React hooks personalizados deben empezar con “use"
Esto es una convención importante, de esta manera cualquier desarrollador a simple vista se da cuenta que se trata de un React Hook. Ademas asi se nombran los Hooks de React y asi el plugin de eslint detecta posibles errores en el codigo relacionados con las reglas de los hooks.
Cada React hook personalizado, tiene su propio estado
Cada invocación de un React Hook personalizado contiene su propio estado, los Hooks no tienen estados compartidos, porque recordemos que useState() guarda un estado totalmente separado de cualquier otra invocación. Además cada invocación de una función contiene su propio ámbito.
Conclusiones
En esta publicación aprendimos como usar la variante más compleja de useEffect(() => { return function limpieza(){}; }, [deps]) y además se extrajo dos React Hooks personalizados porque el useEffect inicial es complejo. Se estableció que la creación de React Hooks personalizados es igual que cuando extraemos funciones más pequeñas de una función grande. Por último vimos los puntos a tomar en cuenta cuando creamos y usamos React Hooks personalizados.
Los React Hooks, son funciones que se ejecutan en un determinado punto en la vida de un componente funcional. Permiten usar características de React, sin la necesidad de usar clases. Por ejemplo te permite agregar state a un componente funcional.
También permite controlar efectos colaterales en caso de ser necesarios. Por ejemplo, peticiones a servicios, subscribirse a eventos, modificar el DOM, logging o cualquier otro código imperativo.
¿Por qué funciones y componentes funcionales?
Si necesitas más detalles sobre como son las funciones en Javascript, puedes revisar estas dos publicaciones:
Se sabe que las funciones son la unida esencial para la organización y reutilización de código, es decir, las funcionalidades de cualquier software.
Al utilizar funciones se elimina la complejidad de usar clases. No necesitas usar this, constructores, ni separar funcionalidades estrechamente relacionadas en varios métodos del ciclo de vida de un componente en React.
Si has creado componentes en React, de seguro has aprendido ver a los componentes como una función y sus propiedades como sus parámetros. ¿Por qué no hacerlo más transparentes al usar solamente funciones?
De hecho las clases, surgieron de funciones. Como se explica aquí y aquí. No necesitamos clases y nos ahorramos muchos dolores de cabeza.
Composición
Es mucho más simple y flexible utilizar funciones en lugar de clases para la composición, tanto de componentes como de cualquier funcionalidad en general.
Mejor composición de objetos sobre herencia de clases
Design Patterns: Elements of Reusable Object-Oriented Software
Simplicidad
Normalmente con las clases, el flujo del código de los efectos colaterales necesita brincar de un método del ciclo de vida a otro, con React Hooks esto es más lineal y fácil de leer. También la definición del estado de un componente es mucho más simple, sin necesidad de definirlo en el constructor. En el siguiente punto viene un ejemplo de como los React Hooks son más simples.
Se elimina el uso de componentes de alto nivel
Aunque los componentes de alto nivel (HOC) se basan en las funciones de alto nivel, la naturaleza del código HTML y clases hace que esto sea complejo. El código se vuelve difícil de leer y también provoca que los componentes envolventes se aniden demasiado.
Los React Hooks resuelven el famoso “HOC hell”, muy parecido a como las promesas y funciones asíncronas resuelven el “Callback hell”.
HOCs, complejo
Ahora, si se utilizan React Hooks, esos HOC complejos se convierte en un código más simple y lineal.
React hooks, simple y lineal
Más rápido
Es un hecho que las funciones tienen mayor rendimiento que las clases. En el caso de React, un componente de función es más rápido que un componente de alto nivel. Además, usando los React hooks adecuadamente, los componentes con React hooks suelen ser más rápidos que los componentes de clases en React.
Fácil de probar
Haciendo tus pruebas correctas evitando detalles de implementación, tu react hook debería estar cubierto con tus pruebas del componente funcional. En otras publicaciones veremos cómo hacer esto. En caso de que tengas un React Hook complejo, existen herramientas que te facilitan estas pruebas aisladas o también podemos hacer a mano nuestro wrapper que use nuestro React Hook para cada uno de sus casos.
Las dos reglas importantes de React Hooks
Solo ejecuta React Hooks en el nivel superior de la función
La clave de esta regla es que React depende del orden en que se ejecutan los React Hooks.
No ejecutes React Hooks dentro de condiciones, ciclos o funciones anidadas porque se necesita asegurar el orden correcto de los hooks cada vez que el componente se renderiza. Esto permite que React controle correctamente el estado entre multiples useState y useEffect.
Si existe alguna condición en el código, y permite que a veces un hook se ejecute y otras no, el orden se pierde al igual que los datos correctos del estado. Hay que aclarar que las condiciones, ciclos y funciones anidadas dentro de los hooks como en el caso de useEffect si son posibles.
// No hagos esto!!if (nombre) {useEffect(()=>{document.title=`Algo con ${nombre}`;}, [nombre]);}// Esto si lo puedes haceruseEffect(()=>{if (nombre!=='') {document.title=`Algo con ${nombre}`;}}, [nombre]);
Solo ejecuta React Hooks dentro de funciones de React
Ejecuta React Hooks dentro de componentes de función.
En las clases los React Hooks no funcionan, además en clases ya existen los métodos del ciclo de vida de un componente en React.
Ejecuta React Hooks dentro de otros React Hooks (puedes hacer tus propios hooks).
Para garantizar el orden y controlar correctamente el estado entre múltiples Hooks. Te permite ejecutar react hooks al inicio de otro hook creado por ti.
Reac Hooks, useState(initialState)
Empecemos con el hook más utilizado, useState. Este hook proporciona la misma capacidad de los componentes de clases para tener un estado interno. Vamos a hacer un formulario de registro de un usuario nuevo, algo sencillo y genérico, nada de detalles de implementación específicos. Probablemente con el campo nombre será suficiente.
Vamos a utilizar la herramienta de codesandbox.io, usando la plantilla de React. Agregamos un archivo RegistroDeUsuario.js
Primero, la función useState(initialState), regresa un arreglo de dos elementos, el valor del estado (inicializado) que queremos controlar y un método para modificar ese estado. Este par de valores se asignaron a las constantes nombre y setNombre con la sintaxis de destructuring assignment.
El desctructuring assignment de la línea 4 se traduce a lo siguiente.
const statePair =useState('');const nombre = statePair[0];const setNombre = statePair[1];
Invocaciones y renderizados
Cada vez que se escribe sobre el campo Nombre, se vuelve a renderizar el componente. Pero React guarda el estado entre renderizados. Se puede notar como la línea 5 se ejecuta al primer rénder (Montar, con texto vacío) y también cada vez que se actualiza el valor de nombre (Actualizar, revisa la consola de la parte derecha de la imagen de abajo).
El resultado debe ser algo como lo siguiente.
Renderizados por useState input Nombre
El flujo de useState es el siguiente. Modificado de este original.
Flujo useState
El valor de nombre se actualiza a través del evento onChange y el método setNombre. Al modificar este estado interno, provoca la ejecución de la función RegistroDeUsuarios y un “re-renderizado”. Si el componente se renderiza debido a un cambio a otro estado u otra propiedad, el estado de nombre permanece con la última actualización.
useState(() => { return initialState; })
useState(initialState) puede recibir una función que regrese el estado inicial usado en el primer render. Un ejemplo de su uso es el que sige, ¿Qué podemos hacer si queremos guardar y obtener el estado de localStorage?
import{useState}from"react";exportdefaultfunctionRegistroDeUsuario(){const[nombre,setNombre]=useState(()=>{console.log("Solo una vez");returnlocalStorage.getItem("nombre") ||"";});console.log("Más invocaciones");functionactualizarNombre(e){setNombre(e.target.value);localStorage.setItem("nombre",e.target.value);}return (<form><labelhtmlFor="nombre">Nombre</label><inputtype="text"value={nombre}id="nombre"onChange={actualizarNombre} /><buttontype="submit">Enviar</button><section>{nombre}</section></form> );}
Ahora usamos una función para definir el estado, le agregamos un console.log('Solo una vez') para demostrar que la función solo se ejecuta una vez. Y un console.log('Más invocaciones') para demostrar que en los siguientes invocaciones ya no se ejecuta la función de nuestro useState(initialState), pero si el de Más invocaciones.
En el resultado de abajo, escribí Jaime en el campo nombre, luego recargue la página, revisa el lado derecho en la vista y la consola.
useState, campo nombre en localStorage
Al recargar se imprime Sola una vez y al empezar a escribir Cervantes se imprime Más invocaciones un total de 11 veces. Mi nombre jaime, lo obtuvo del localStorage al primer renderizado.
setState(prevState => {})
El método para actualizar el estado setNombre también puede recibir una función, cuyo parámetro es el valor anterior. Veamos un ejemplo modificando la función actualizarNombre.
La función setNombre obtenida de useState recibe como parámetro el nombreAnterior, y al imprimir en la consola nos damos cuenta de que siempre imprimirá el valor anterior del estado nombre.
Actualizar el estado pasando una función
useEffect(effectFn, [deps])
Este React hook, useEffect, nos permite ejecutar y controlar efectos colaterales, como pueden ser peticiones a servicios, subscribirse a eventos, modificar el DOM o cualquier funcionalidad que no pueda ejecutarse en el cuerpo de nuestro componente función porque no pertenece al flujo lineal del mismo.
Flujo de useEffect
La función effectFn se ejecuta después de que el navegador ya ha pintado el componente en pantalla por primera vez (montar). También por defecto después de cada posterior repintado (actualizar). Este comportamiento descrito tiene el mismo propósito que los métodos componentDidMount y componentDidUpdate.
El tercer propósito en useEffect se le llama limpieza, el cual lo podemos comparar con componentDidUnmount. En el primer pintado (montar) la función de limpieza no se ejecuta, solo se ejecuta en la fase de actualizar. Es decir, se ejecuta después de cada repintando, pero antes del que el cuerpo de useEffect se ejecute. Este caso en específico se explica mejor con ejemplos enesta publicación.
El flujo de useEffect es el siguiente. Modificado de este original.
Flujo useEffect
useEffect recibe un segundo parámetro, deps, el cual es un Array con la lista de dependencias que permiten decidir si ejecutar el efecto colateral o no, después de cada repintado. Sirve bastante para mejorar el rendimiento si no queremos que después de cada repintado se ejecute effectFn.
Si te das cuenta, he usado la palabra pintado en lugar de renderizado. Esto se debe a que efectivamente el efecto se ejecuta después de que los cambios ya estén pintados en el navegador web. El renderizado involucra al Virtual DOM, y React decide en que momento es conveniente actualizar el DOM, pero el pintado sucede un poco después de lo anterior. Aclaremos que aunque se actualice el DOM, el navegador debe calcular estilos y el layout de los elementos para posteriormente realizar el pintado de los pixeles.
useEffect(effectFn)
Veamos un ejemplo, aquí la idea es tener un input de búsqueda y queremos que lo que tengamos en el input se imprima en título de la pestaña de nuestro navegador web. Para poder realizar esto necesitamos un efecto utilizando la API del DOM.
De nuevo, con la herramienta codesandbox.io y su plantilla de react, creamos un nuevo proyecto. Agregamos un archivo llamado OldNewsPapers.js donde vivirá nuestra funcionalidad en forma de un componente funcional.
import{useEffect,useState}from"react";exportdefaultfunctionOldNewsPapers(){const[query,setQuery]=useState("");useEffect(()=>{console.log("document.title");document.title=`Periodicos viejos ${query}`;});console.log('Invocación);return (<><h1>Periódicos viejos que contienen {query}</h1><form><inputtype="text"value={query}onChange={(e)=>setQuery(e.target.value)} /></form></> );}
Este efecto se ejecuta después de la primera vez que se pinta el componente, esto es el primer propósito que se puede comparar con componentDidMount. ¿Cómo es el flujo?
Se ejecuta la función, es decir, el componente funcional.
Lo cual inicializa el estado de query y el efecto colateral.
Se renderiza y se pinta el elemento de react en el navegador con el valor inicial de query = ''.
Texto “Periódicos viejos que contienen” en el <h1>.
Se ejecuta el efecto colateral después del primer pintado.
Texto “Periódicos viejos que” en el título de la pestaña.
useEffect flujo al montar
Si escribimos “texas” en el input, ahora el flujo es de la siguiente manera
Cada vez que se introduce una letra en el input (cinco veces más, por las cinco letras de “texas”)
El estado de query cambia debido al setQuery en el onChange, provocando un nuevo pintado (invocación del componente función, renderizado y finalmente pintado).
Después del pintado se actualiza document.title, cambiando el título de la pestaña del navegador web.
useEffect, flujo actualizar document.title
En la imagen de arriba vemos seis “document.title”, como describimos al principio, por defecto el useEffect se invoca después de cada pintado en el navegador web.
En el último ejemplo nuestro efecto se va a ejecutar después de cada pintado, incluso si el estado de query no ha cambiado. Para comprobar esto vamos a agregar otro estado para llevar la cuenta del número de invocaciones de nuestro componente funcional, que se traduce en el número de renderizados realizados. Estas invocaciones las haremos a través de un botón.
Inicializamos invocations con 1, porque la primera vez que se renderiza será el estado actual. Luego si oprimimos el botón Invocar, se cambia el valor de invocations, se hace otro re-renderizado, y luego se vuelve a ejecutar nuestro efecto, incluso cuando query no ha cambiado.
useEffect por defecto siempre se ejecuta después de cada pintado
Para evitar que se ejecute demasiadas veces nuestro efecto, podemos indicarle que corra solo cuando una de sus dependencias ha cambiado. En este caso para evitar que se le asigne a cada rato el valor a documen.title, le indicamos que solo lo haga cuando query cambia.
Las siguientes veces que se actualice query escribiendo en el input, el título de la pestaña ya no se actualiza.
useEffect con deps vacío
Conclusión sobre
Las funciones han existido desde mucho antes de la programación, gracias al cálculo lambda de Alonzo Church. No es extraño que en los últimos años el desarrollo de software ha volteado hacia la programación funcional debido a la simplicidad y el poder expresivo. Resolviendo varios problemas en el camino.
Y bueno, con el uso de React Hooks, se ha dado un paso muy importante debido a los beneficios que es programar de esta manera, desde hace años que se utilizaban componentes funcionales, y ahora con esto creo que React tiene más futuro prometedor por delante.
Hemos entendido, con suficiente profundidad (para comenzar con hooks), como funcionan los flujos de los Hooks useState y useEffect. De useEffect aún quedan temas por ver, así como también los React Hooks personalizados. Aquí pondré el enlace con los temas pendientes, cuando estos estén publicados. Cualquier duda, no dudes en escribirla en los comentarios, ¡Estaremos contentos de ayudarte!.
ES_MX 
EN