How to Refresh Pages in React With One Line of Code
To refresh a page in React, you don't need React, just plain JavaScript. You need to call window.location.reload
which will trigger a full page reload.
export const App = () => {
const refresh = () => window.location.reload(true)
return (
<button onClick={refresh}>Refresh</button>
)
}
This works exactly like a refresh button. Notice that we passed true
to the reload
method. This is a non-standard feature that is only supported in Firefox. It tells the browser to bypass the cache and do a force reload.
Using a boolean parameter for location.reload
is ignored for all other browsers, except Firefox.
The same can be done using an inline onClick
handler in the following way:
<button onClick={() => window.location.reload(true)}>Refresh</button>
However, in most cases, you may simply want to update your state instead of doing an entire page reload using useState
. This results in a better user experience. Therefore, only use the above solution when you specifically want to do a full-page reload.

Tired of looking for tutorials?
You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.
Check out our interactive course to master JavaScript in less time.
Learn MoreRecommended

How to Save Writable Store in Svelte to Local Storage
Learn how to create a persistent store in Svelte

How to Create an Infinite Scroll Component in React
With the help of the Intersection Observer API
