Fast Refresh

Fast Refresh es una función de React integrada en Next.js que permite recargar la página del navegador en vivo mientras se mantiene el estado temporal del lado del cliente cuando se guardan cambios en un archivo. Está habilitado por defecto en todas las aplicaciones Next.js en versión 9.4 o superior. Con Fast Refresh activado, la mayoría de los cambios deberían ser visibles en menos de un segundo.

Cómo funciona

• Si editas un archivo que solo exporta componentes de React, Fast Refresh actualizará solo el código de ese archivo y volverá a renderizar tu componente. Puedes editar cualquier cosa en ese archivo, incluyendo estilos, lógica de renderizado, manejadores de eventos o efectos.
• Si editas un archivo con exportaciones que no son componentes de React, Fast Refresh volverá a ejecutar ese archivo y los otros archivos 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 archivos fuera del árbol de React, Fast Refresh recurrirá a una recarga completa. Puede que tengas un archivo que renderiza un componente de React pero también exporta un valor que es importado por un componente no React. Por ejemplo, tal vez tu componente también exporta una constante, y un archivo de utilidades no React la importa. En ese caso, considera migrar la constante a un archivo separado e importarla en ambos archivos. Esto permitirá que Fast Refresh vuelva a funcionar. Otros casos generalmente pueden resolverse de manera similar.

Resiliencia ante errores

Errores de sintaxis

Si cometes un error de sintaxis durante el desarrollo, puedes corregirlo y guardar el archivo nuevamente. El error desaparecerá automáticamente, por lo que no necesitarás recargar la aplicación. No perderás el estado del componente.

Errores en tiempo de ejecución

Si cometes un error que provoca un error en tiempo de ejecución dentro de tu componente, verás una superposición contextual. Corregir el error hará que la superposición desaparezca automáticamente, sin necesidad de recargar la aplicación.

El estado del componente se conservará si el error no ocurrió durante el renderizado. Si el error ocurrió durante el renderizado, React volverá a montar tu aplicación usando el código actualizado.

Si tienes límites de error en tu aplicación (lo cual es una buena práctica para fallos controlados en producción), volverán a intentar el renderizado en la siguiente edición después de un error de renderizado. Esto significa que tener un límite de error puede evitar que siempre se reinicie al estado raíz de la aplicación. Sin embargo, ten en cuenta que los límites de error no deberían ser demasiado granulares. Son utilizados por React 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. Aquí hay 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 conserva para componentes de clase (solo los componentes de función y Hooks conservan el estado).
• El archivo que estás editando podría tener otras exportaciones además de un componente de React.
• A veces, un archivo exportaría el resultado de llamar a un componente de orden superior como HOC(WrappedComponent). Si el componente devuelto es una clase, su estado se restablecerá.
• Las funciones anónimas de flecha como export default () => <div />; hacen que Fast Refresh no conserve el estado local del componente. Para bases de código grandes puedes usar nuestro codemod name-default-component.

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 conserve en más casos.

Consejos

• Fast Refresh conserva el estado local de React en componentes de función (y Hooks) por defecto.
• A veces puedes querer forzar que el estado se restablezca y que un componente se vuelva a montar. Por ejemplo, esto puede ser útil si estás ajustando una animación que solo ocurre al montar. Para hacer esto, puedes agregar // @refresh reset en cualquier parte del archivo que estás editando. Esta directiva es local al archivo e instruye a Fast Refresh a volver a montar los componentes definidos en ese archivo en cada edición.
• Puedes poner console.log o debugger; en los componentes que editas durante el desarrollo.
• Recuerda que las importaciones distinguen entre mayúsculas y minúsculas. Tanto la recarga rápida como la completa pueden fallar cuando tu importación no coincide con el nombre real del archivo. Por ejemplo, './header' vs './Header'.

Fast Refresh y Hooks

Cuando es posible, Fast Refresh intenta preservar el estado de tu componente entre ediciones. En particular, useState y useRef conservan sus valores anteriores 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. Su lista de dependencias será ignorada mientras Fast Refresh está ocurriendo.

Por ejemplo, cuando editas useMemo(() => x * 2, [x]) a useMemo(() => x * 10, [x]), se volverá a ejecutar incluso aunque x (la dependencia) no haya cambiado. Si React no hiciera esto, ¡tu cambio no se reflejaría en la pantalla!

A veces, esto puede llevar a resultados inesperados. Por ejemplo, incluso un useEffect con un array vacío de dependencias aún se volvería a ejecutar una vez durante Fast Refresh.

Sin embargo, escribir código resistente a la re-ejecución ocasional de useEffect es una buena práctica incluso sin Fast Refresh. Hará que sea más fácil introducir nuevas dependencias más adelante y está reforzado por el Modo Estricto de React, el cual recomendamos encarecidamente habilitar.