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.
Want to get weekly updates to your mailbox? 📬
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 5 hours.
Learn More📚 Get access to exclusive content
Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕
Get access
