xxxxxxxxxx
 
import React from 'react';
​
const handleClick = () => {
  window.location.reload();  // recommended
  //window.location.href = window.location.href;  // not recommended
};
​
const App = () => {
  return (
    <div className="App">
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};
​
export default App;

2. Refresh the page by updating the state

Edit

In the below code we create a counter that update causes App component re-rendering with a new state (something like page refreshing). That approach requires to pass couter to child componentes when memo() is used. We can do it with props or contexts. This approach is not recommended because can lead to complicated code structure when many componets are nested.

Note:

For more information read this article: React - useState example.

Runnable example:

xxxxxxxxxx
 
//Note: Uncomment import lines during working with JSX Compiler.
//import React from 'react';
​
const App = () => {
  const [counter, setCounter] = React.useState(0);
  return (
    <div>
      <div>Counter: {counter}</div>
      <button onClick={() => setCounter(counter + 1)}>increment</button>
    </div>
  );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );