---
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-08-05T03:10:56.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

Opinions & Insights July 28, 2026

[

### Open Weights and the 2nd World

](/blog/open-weights-and-the-2nd-world)

-   ![Profile picture of Mathias Biilmann](/_astro/f193d4707a6391d843d5aaa73338b5a5971ec5cc-960x960_1Yylqm.webp)
    
    Mathias Biilmann
    

Tools & Services July 28, 2026

[

### MCP goes stateless and extensible

](/blog/mcp-goes-stateless-and-extensible)

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

News & Announcements July 28, 2026

[

### New Netlify projects are now private by default

](/blog/new-netlify-projects-are-now-private-by-default)

-   ![Profile picture of Taylor Barnett-Torabi](/_astro/cf4624da8c1286738397b6fecb53bad504df140b-400x400_ZsvK0s.webp)
    
    Taylor Barnett-Torabi
    

![](/_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/)