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 set to 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 in the onClick handler, like so:

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

Method 2: Updating the State

The second, and more appropriate method of refreshing a page in React, is to update the state inside of the 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, item]); } return ( <div className="app"> <div className="items"> <button value="MacBook Pro" onClick={addItemToCart}> MacBook Probutton> <button value="iPhone XS" onClick={addItemToCart}>iPhone XSbutton> <button value="Gem" onClick={addItemToCart}> Gembutton> <button value="Teddy Bear" onClick={addItemToCart}> Teddy Bearbutton> 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.

👋 Hey, I'm James Dietrich
I work full-time at an AI-based startup out of San Francisco, CA. My true passion is to help others. My tutorials help 150,000+ developers learn React and JavaScript every month. Follow on Twitter, or Github.

💬 Leave a comment

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

We will never share your email with anyone else.

Comments

Great Tutorial,
I have juste a litle question. What is the difference between setCart(cart => […cart, item]); and setCart(() => […cart, item]);

i use it like this if any other oftion is not available…

const [Refresh, setRefresh] = React.useState(false);

// call it on event 🙂
setRefresh(!Refresh)