React

🔥 Сегодня покажу, как настроить мгновенное обновление компонентов в React без полной перезагрузки страницы

Если ты пользуешься Vite, Parcel или Webpack с React — тебе точно стоит включить React Fast Refresh. Это технология, которая сохраняет состояние компонентов при обновлении кода. Раньше нужно было каждый раз обновлять страницу и терять всё введённое. Теперь — нет!

⚙️ Как это работает?

React Fast Refresh отслеживает изменения в компонентах и аккуратно обновляет только изменившиеся части DOM. Всё состояние (useState, useReducer, useRef) остаётся.

✅ Как включить в Vite:

Установи плагин:

npm install --save-dev @vitejs/plugin-react

И подключи в vite.config.ts:

import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

Этот плагин включает react-refresh автоматически под капотом.

🤯 Что получаешь:

* мгновенное обновление UI при изменении кода
* сохранение состояния формы, вкладок, фильтров и т.д.
* больше удовольствия от разработки 😎


🎯 Не забудь, это работает только в dev-режиме. В проде всё остаётся стабильным и оптимизированным.

✍️ @React_lib

www.tg-me.com/id/telegram/com.React_lib/678

780 viewsMay 9 at 10:53

🔥 Сегодня покажу, как настроить мгновенное обновление компонентов в React без полной перезагрузки страницы

Если ты пользуешься Vite, Parcel или Webpack с React — тебе точно стоит включить React Fast Refresh. Это технология, которая сохраняет состояние компонентов при обновлении кода. Раньше нужно было каждый раз обновлять страницу и терять всё введённое. Теперь — нет!

⚙️ Как это работает?

React Fast Refresh отслеживает изменения в компонентах и аккуратно обновляет только изменившиеся части DOM. Всё состояние (useState, useReducer, useRef) остаётся.

✅ Как включить в Vite:

Установи плагин:

npm install --save-dev @vitejs/plugin-react

import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

BY React