React – How to Refresh Page

Refreshing a page in React is sometimes necessary to reload the current state or data. This tutorial explains how to implement a page refresh in React using a button click. We can use browser’s window.location.reload method to refresh a page.

Example: Using window.location.reload

Use the window.location.reload Method. This method is the simplest way to refresh the entire page programmatically.

App.js

</>
Copy
import React from 'react';

function App() {
  const handleRefresh = () => {
    window.location.reload(); // Refreshes the page
  };

  return (
    <div>
      <h1>React Page Refresh Example</h1>
      <button onClick={handleRefresh}>Refresh Page</button>
    </div>
  );
}

export default App;

Explanation

  • The handleRefresh function is triggered when the button is clicked.
  • The window.location.reload method reloads the current page, clearing any unsaved state or data.

Output:

Conclusion

The window.location.reload method is straightforward but reloads the entire page.