A web browser with a component to refresh a page in React.

In React, there are two ways to refresh a page: updating the state and forcing a page reload. Let’s explore both methods of using React to refresh a page.

Method 1: Refresh a Page Using JavaScript

The first way of refreshing a page or component is to use vanilla JavaScript to call the reload method to tell the browser to reload the current page:

window.location.reload(false);

This method takes an optional parameter which by default is false. If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page.

Let’s take a look at how to use the location.reload method inside of a React component:

App.js
import React from 'react'; function App() { function refreshPage() { window.location.reload(false); } return ( <div> <button onClick={refreshPage}>Click to reload!</button> </div> ); } export default App;

React uses JavaScript at its core, therefore you can use vanilla JavaScript whenever and however you want.

The code above renders a single button that when clicked, calls the refreshPage function which triggers the window.location.reload method. We can even call the reload method inline the onClick handler, like so:

<button onClick={() => window.location.reload(false))}>Click to reload!</button>

Method 2: Update State

The second, and more React appropriate method of refreshing a page, is to update state inside of a React component.

React is a modern JavaScript library and therefore does not require a page refresh to display the latest data in the UI.

A really common example of refreshing a page when the UI needs to be updated is an e-commerce site. In a typical e-commerce site, when you add an item to a shopping cart you’re taken to another page showing you the contents of your cart.

We’re using React, not some old-school PHP e-commerce framework! Let’s build a ๐Ÿ›’shopping cart component to demonstrate how to refresh a page using state:

ShoppingCart.js
import React, { useState } from 'react'; function ShoppingCart() { const [cart, setCart] = useState([]); function addItemToCart(e) { const item = e.target.value; console.log(item); setCart(cart => [...cart, item]); } return ( <div className="app"> <div className="items"> <button value="MacBook Pro" onClick={addItemToCart}>๐Ÿ’ป MacBook Pro</button> <button value="iPhone XS" onClick={addItemToCart}>๐Ÿ“ฑiPhone XS</button> <button value="Gem" onClick={addItemToCart}>๐Ÿ’Ž Gem</button> <button value="Teddy Bear" onClick={addItemToCart}>๐Ÿงธ Teddy Bear</button> </div> <div className="cart"> ๐Ÿ›’Cart <ul> {cart.map(item => <li key={item}>{item}</li>)} </ul> </div> </div> ); } export default ShoppingCart;

If you drop the ShoppingCart component into a running React app, you’d see something that looks like this:

The page is refreshing each time an item gets added to the cart without the need to hard refresh the page.

Why? Because of state. If you’d like to learn more about state, check out my in-depth tutorial Simplifying React State and the useState Hook.

๐Ÿ’ป More React Tutorials
All React Tutorials

๐Ÿ“ฌ The Monthly Upmostly Newsletter

One email a month, packed with the latest React tutorials, delivered straight to your inbox.
Zero spam, just great content. Unsubscribe at any time.

๐Ÿ’ฌ Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.