How to Refresh a Component and Page in React

Sometimes, we want to refresh the page without reloading the page .How to Refresh a Component and Page in React.

To refresh a page you don’t need react-router. We want to reload a page by clicking a button. Here’s the example:

import React from 'react';

function App() {

  function refreshMyPage()
  {
    window.location.reload();
  }

  return (
    <div>
      <button onClick={ refreshPage }>Refresh!</button>
    </div>
  );
}

export default App;

By using useState() method we can update the component.

import React, { useState } from 'react';

function changeComp() {

    const [value, setValue] = useState();

    const refresh = ()=>{
        // re-renders the component
        setValue({});
    }

    return (
      <div>
        <button onClick={ refresh }>Refresh Component</button>
      </div>
    );
  }

  export default changeComp;

By using these methods you can update your components.

Leave a Reply

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