---
title: "What is React Fast Refresh?"
description: "React Fast Refresh is the latest and greatest way to load components in vanilla React, Next.js 10+, Gatsby, and more!"
source: "https://www.netlify.com/blog/2020/12/03/what-is-react-fast-refresh/"
last_updated: "2026-07-15T13:34:51.000Z"
---
Hello friends, and welcome to Blogvent, day 3!

Chances are if you’ve looked at the latest React updates or Next.js v10, you’ve seen the term “Fast Refresh” thrown around. This is a new feature that doesn’t affect your users as much, _but_ it makes your developer experience much better.

React Fast Refresh replaces React Hot Loader. React Hot Loader, before, wasn’t the most perfect thing. It lived outside of React, and led to some not-ideal debugging experiences. React Fast Refresh, however, has an updated API that is faster, handles errors better, _and_ preserves state across re-renders.

So what does that mean? Let’s say that you have a simple counter component:

```
import { useState } from 'react';
function Counter() {  const [count, setCount] = useState(0);
  return (    <>      <p>You clicked the button {count} times.</p>      <button onClick={() => setCount(count + 1)}>        Count!      </button>    </>  );
```

And, let’s say that you hit the “Count!” button 5 times, and then you decide to add a simple change, like a new line of code.

```
import { useState } from 'react';
function Counter() {  const [count, setCount] = useState(0);
  return (    <>+      <h1>Counter Example</h1>      <p>You clicked the button {count} times.</p>      <button onClick={() => setCount(count + 1)}>        Count!      </button>    </>  );
```

In this example, if you were to look at your browser page before without Fast Refresh, you would have to click the button 5 times again before seeing that previous state. Now, with Fast Refresh, that count would stay at 5!

This is obviously a very simplistic example, but if you think about the possibilities of a game state, user preferences, forms, client-side navigation… there’s so many problems here that Fast Refresh solves!

It also reloads the page automatically once syntax or runtime errors are resolved, and does a full reload when you update something outside of the React tree (because it’s more deeply integrated with React itself). Keep in mind, Fast Refresh only works for function components out of the box, not class-based components.

## I wanna try it!

Check out [this repo](https://github.com/netlify-templates/next-netlify-starter) if you’d like to see a Next.js v10+ starter project (which has Fast Refresh automatically enabled), or click this button below to clone+deploy a new Next.js project right away:

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/next-netlify-starter&utm_source=github&utm_medium=nextstarter-cs&utm_campaign=devex)

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=What is React Fast Refresh?&url=https://www.netlify.com/blog/2020/12/03/what-is-react-fast-refresh//)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F03%2Fwhat-is-react-fast-refresh%2F%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/03/what-is-react-fast-refresh//)
-   [Bluesky](https://bsky.app/intent/compose?text=What is React Fast Refresh?+https://www.netlify.com/blog/2020/12/03/what-is-react-fast-refresh//)

* * *

### Tags

-   [Next.js](/blog/tags/next.js/)
-   [React](/blog/tags/react/)
-   [blogvent](/blog/tags/blogvent/)

## Keep reading

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials November 30, 2020

[

### How to Deploy Next.js Sites to Netlify

](/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/)

-   ![Profile picture of Jason Lengstorf](/_astro/11b8e51d90b26838de71904294430279b7099995-700x700_1R7sJe.webp)
    
    Jason Lengstorf
    

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials December 2, 2020

[

### Next.js: Should I use SSR or SSG?

](/blog/2020/12/02/next.js-should-i-use-ssr-or-ssg/)

-   ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp)
    
    Cassidy Williams
    

## Recent posts

News & Announcements July 14, 2026

[

### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers

](/blog/new-pro-plan-tiers)

-   ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp)
    
    Gehrig Kunz
    

News & Announcements July 13, 2026

[

### Netlify inside of Claude Design

](/blog/netlify-inside-of-claude-design)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

News & Announcements June 25, 2026

[

### Netlify Functions, designed for Agent Experience

](/blog/netlify-functions-designed-for-agent-experience)

-   ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp)
    
    Eduardo Bouças
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)