Fast Refresh

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Fast Refresh es una función de React Native que te permite obtener retroalimentación casi instantánea para cambios en tus componentes de React. Está activado por defecto, y puedes alternar "Habilitar Fast Refresh" en el Menú de desarrollo de React Native. Con Fast Refresh activado, la mayoría de las ediciones deberían ser visibles en uno o dos segundos.

Cómo funciona

• Si editas un módulo que solo exporta componentes de React, Fast Refresh actualizará el código solo para ese módulo y volverá a renderizar tu componente. Puedes editar cualquier elemento en ese archivo, incluyendo estilos, lógica de renderizado, manejadores de eventos o efectos.

• Si editas un módulo con exportaciones que no son componentes de React, Fast Refresh volverá a ejecutar tanto ese módulo como los otros módulos que lo importan. Por ejemplo, si tanto Button.js como Modal.js importan Theme.js, editar Theme.js actualizará ambos componentes.

• Finalmente, si editas un archivo que es importado por módulos fuera del árbol de React, Fast Refresh recurrirá a hacer una recarga completa. Puedes tener un archivo que renderiza un componente de React pero también exporta un valor que importa un componente no React. Por ejemplo, quizás tu componente también exporta una constante y un módulo de utilidades no React la importa. En ese caso, considera migrar la constante a un archivo separado e importarla en ambos archivos. Esto reactivará Fast Refresh. Otros casos generalmente pueden resolverse de manera similar.

Resiliencia ante errores

Si cometes un error de sintaxis durante una sesión de Fast Refresh, puedes corregirlo y guardar el archivo nuevamente. El recuadro rojo (redbox) desaparecerá. Los módulos con errores de sintaxis se evitan ejecutar, así que no necesitarás recargar la aplicación.

Si cometes un error en tiempo de ejecución durante la inicialización del módulo (por ejemplo, escribir Style.create en lugar de StyleSheet.create), la sesión de Fast Refresh continuará una vez corregido el error. El recuadro rojo desaparecerá y el módulo se actualizará.

Si cometes un error que cause un error en tiempo de ejecución dentro de tu componente, la sesión de Fast Refresh también continuará después de corregir el error. En ese caso, React volverá a montar tu aplicación usando el código actualizado.

Si tienes límites de error (error boundaries) en tu aplicación (lo cual es buena idea para fallos controlados en producción), reintentarán el renderizado en la siguiente edición después de un recuadro rojo. En ese sentido, tener un límite de error puede evitar que siempre te expulsen a la pantalla principal de la aplicación. Sin embargo, recuerda que los límites de error no deben ser demasiado granulares. React los usa en producción y siempre deben diseñarse intencionalmente.

Limitaciones

Fast Refresh intenta preservar el estado local de React en el componente que estás editando, pero solo si es seguro hacerlo. Estas son algunas razones por las que podrías ver que el estado local se restablece en cada edición de un archivo:

• El estado local no se preserva para componentes de clase (solo los componentes de función y los Hooks preservan estado).

• El módulo que editas podría tener otras exportaciones además de un componente de React.

• A veces, un módulo exportaría el resultado de llamar a un componente de orden superior como createNavigationContainer(MyScreen). Si el componente devuelto es una clase, el estado se restablecerá.

A largo plazo, a medida que más de tu base de código migre a componentes de función y Hooks, puedes esperar que el estado se preserve en más casos.

Consejos

• Por defecto, Fast Refresh preserva el estado local de React en componentes de función (y Hooks).

• A veces querrás forzar que se reinicie el estado y que un componente se vuelva a montar. Por ejemplo, esto es útil si estás ajustando una animación que solo ocurre al montarse. Para hacerlo, puedes agregar // @refresh reset en cualquier parte del archivo que estés editando. Esta directiva es local al archivo e indica a Fast Refresh que vuelva a montar los componentes definidos en ese archivo en cada edición.

Fast Refresh y Hooks

Cuando es posible, Fast Refresh intenta preservar el estado de tu componente entre ediciones. En particular, useState y useRef mantienen sus valores previos siempre que no cambies sus argumentos o el orden de las llamadas a los Hooks.

Los Hooks con dependencias—como useEffect, useMemo y useCallback—siempre se actualizarán durante Fast Refresh. Sus listas de dependencias se ignorarán mientras Fast Refresh esté activo.

Por ejemplo, si editas useMemo(() => x * 2, [x]) para que sea useMemo(() => x * 10, [x]), se volverá a ejecutar aunque x (la dependencia) no haya cambiado. ¡Si React no hiciera esto, tu edición no se reflejaría en pantalla!

A veces esto puede producir resultados inesperados. Por ejemplo, incluso un useEffect con un array vacío de dependencias se volvería a ejecutar una vez durante Fast Refresh. Sin embargo, escribir código resistente a ejecuciones ocasionales de useEffect es una buena práctica incluso sin Fast Refresh. Esto facilita la posterior introducción de nuevas dependencias.