Suspense para la Obtención de Datos: Cómo Obtener Durante el Renderizado

♪♪ En esta charla, voy a discutir cómo obtener data durante el renderizado inicial de un componente. Pero antes de llegar a cómo obtener durante el renderizado, deberíamos discutir primero por qué. ¿Por qué queremos obtener data durante el renderizado? Bueno, obtenemos data porque la necesitamos para mostrar al usuario algo útil. Obvio. Pero, ¿por qué hacer la solicitud de red durante el renderizado? Bueno, cuanto antes obtengamos, antes podremos mostrar al usuario lo que quieren ver y mejor user experience podemos proporcionar. Así que obtener durante el renderizado inicial es preferible a obtener en un efecto, que necesariamente ocurre después de que un componente se renderiza inicialmente, a veces mucho después.

Pero, ¿es eso lo mejor que podemos hacer? ¿Qué tal obtener por adelantado? Considera un botón que, cuando se hace clic, muestra un modal, que necesita data. Podríamos iniciar la solicitud de red cuando el usuario hace clic en ese botón, lo que significa que la solicitud de red comenzará antes del renderizado inicial y podremos mostrar el contenido relevante al usuario incluso antes. Eso es genial. Vale, así que obtener por adelantado es mejor que obtener durante el renderizado. Entonces, ¿por qué obtener durante el renderizado en absoluto? Bueno, en algunos casos, es lo mejor que puedes hacer. Considera un modal que se muestra en función de alguna función opaca de algún estado de redox difícil de razonar. Básicamente, realmente no sabemos por qué se muestra este modal o bajo qué condiciones. Y en situaciones como esa, podría ser difícil determinar un momento apropiado para iniciar esa solicitud de red. Así que lo mejor que podemos hacer es obtener durante el renderizado. Como una nota al margen, nada en mi presentación es realmente sobre la obtención per se. La obtención es solo un ejemplo de un efecto secundario que debe realizarse solo una vez y debe limpiarse.

Ahora, la limpieza que queremos hacer para obtener es recoger la basura de los data que recibimos de la red si la UI ya no lo necesita para que en dispositivos de gama baja, evitemos quedarnos sin memoria. Pero más genéricamente, si un componente se renderiza dos veces, queremos evitar obtener dos veces y en su lugar reutilizar esa misma solicitud de red. Así que otro efecto secundario que debemos realizar es saber en algún lugar que ya hemos hecho una solicitud de red idéntica. Y la limpieza que queremos hacer es, después, digamos, 30 segundos, eliminar el elemento de la caché porque la próxima vez que renderizamos ese componente, realmente queremos hacer una solicitud de red. Entonces, ¿cuáles son algunos de los otros ejemplos de efectos secundarios que podríamos realizar de esta manera? Bueno, podríamos disparar algunos análisis. Podríamos hacer que el servidor comience a procesar algunos números que vamos a necesitar más tarde. Eso es prácticamente todo lo que voy a decir sobre la obtención durante el renderizado se aplica a esos también.

Vale, así que ahora finalmente podemos llegar a cómo obtener durante el renderizado. Mantengámoslo simple. ¿Podemos simplemente hacer la maldita llamada a la API durante la función de renderizado? Bueno, desafortunadamente, React y Cloud Components render function multiple times. Y en el segundo renderizado, realmente nos gustaría reutilizar esa solicitud de red anterior. Entonces, ¿podemos usar hooks? Bueno, desafortunadamente no. Si tu componente se renderiza, se suspende, y se renderiza una segunda vez, todos los hooks se crearán de nuevo para el segundo renderizado.

Entonces, no podemos usar el estado o las referencias para almacenar información sobre la llamada a la API. Así que el hecho de que exista una solicitud de red y deba reutilizarse tiene que almacenarse en algo que sobreviva a la función de renderizado. Lo cual podría ser props, contexto, o un objeto global. Esto nos lleva a nuestro primer principio. Hacer efectos secundarios solo durante el renderizado inicial requiere una caché externa.

Vale. Entonces, hablemos de cómo debería comportarse esta caché. Considera ese modal. Lo renderizamos. Se suspende, lo que significa que React llama a su función de renderizado, pero no modifica el DOM para mostrar el componente al usuario. Luego, antes de que el componente se confirme, todo el árbol se desmonta porque el usuario navega a otra pantalla. En esta situación, React no nos dará ninguna indicación de que el componente nunca se montará. Así que cuando inicialmente colocamos el elemento en la caché, sería mejor también establecer un temporizador que limpie la caché y deseche el elemento, quizás, después de 30 segundos. De lo contrario, en situaciones como esa, tendremos fugas de memoria.

Vale entonces. ¿Qué pasa si el componente se renderiza y monta? Bueno, puede continuar renderizándose después, incluso después de que hayan pasado más de 30 segundos, y el componente aún necesitará acceso a esos data. Así que realmente no debería ser recogido como basura. Pero afortunadamente para nosotros, si un componente se monta, React necesariamente ejecutará una función de limpieza por lo que no necesitamos confiar en un temporizador para limpiar el elemento, lo que significa que un elemento no debería ser limpiado mientras un componente montado lo referencia, sino cuando ese componente se desmonta. Vale. Así que con estos tres principios, puedes hacer efectos secundarios de manera segura durante el renderizado. Tengo una biblioteca, react-disposable-state, en el repositorio de github de Isograph, donde expongo APIs extremadamente genéricas para hacer efectos secundarios durante el renderizado, y así sucesivamente. Espero que lo revises. Gracias. Que tengas un buen día.