Using React to Refresh a Page

When you click a navigation link created by React Router <Link>, it does not refresh the whole page if you are already on the page, instead, it simply tries to update the component tied to the page. Because the data is usually loaded during the component mounting, it's likely that you see no page update. However, in the case, you really want to refresh the data, then how to do that?

If you have questions about how to reload the current page then you can read this article. There are two ways to achieve it, which are JavaScript and Update State.

1. 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.

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;

Please note that 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 this:

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

2. Update State

The second, and more React appropriate method of refreshing a page, is to update the 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.

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;

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