How to reload a component (part of page) in reactjs?

Question

I was working on react project. I was trying to reload a component when we click the reload button. I implemented the onClick function as given below. But it is reloading the whole window. I just want to reload only that class component, not the whole window. Can anyone help me to solve this?

refreshPage() {
    window.location.reload();
  }

You are supposed to change the state in order to re-render something. — Murat Karagöz, Jun 18 '19 at 12:24
do you also want to call `componentDidMount` for some nested components as well? if you do, I see only possible solution to change `key` prop for topmost element in part you want to "update" — skyboyer, Jun 18 '19 at 12:38
Why do you need this to reload? Generally if a component needs to be visually updated, the props and/or state should be changing anyway. Could you elaborate on what you're trying to accomplish? — Chris B., Jun 18 '19 at 12:41

score 28 · Answer 1 · answered May 24 '22 at 08:22

28

The easiest way I have found out is to set a seed state, and use that in the key attribute of the rendered component. Whenever the seed changes now the component will be reloaded.

       const [seed, setSeed] = useState(1);
       const reset = () => {
            setSeed(Math.random());
        }
       <Component key={seed}/>
       <Button onClick={reset}>Reset</Button>

Whenever the Reload button is pressed now the component I need will be rerendered.

answered May 24 '22 at 08:22

errorParser

471
5
5

Thanks man. Hacky way, but it works! – Ezeeroc Jul 01 '23 at 12:51
Hey @Ezeeroc happy to know that it works for you as well – errorParser Jul 03 '23 at 12:14

score 26 · Answer 2 · edited May 11 '22 at 20:58

26

If you just want to reload the component's data, use the useEffect Hook:

useEffect(() => {
    fetchData();
}, [data]);
// fetchData() is called whenever data is updated.

edited May 11 '22 at 20:58

tronman

9,862
10
46
61

answered Jan 29 '20 at 23:35

Ren

376
4
4

score 7 · Answer 3 · answered Jun 18 '19 at 12:36

7

You can trigger a reload of components by updating the state.

class YourComponent extends Component {
  state = {
    reload: false
  };

  refreshPage = () => {
    this.setState(
      {reload: true},
      () => this.setState({reload: false})
    )
  }
}

This is dirty, but it may work. I have not tested it, though.

answered Jun 18 '19 at 12:36

lukeocodes

1,192
1
16
31

How will it reload and how the state variables be tracked? – Gauranga Jun 18 '19 at 12:39
Anything that occurs in render() re-runs. It `Reacts` to state changes. – lukeocodes Jun 18 '19 at 12:40
1

will it call ```componentDidMount``` again? – Gauranga Jun 19 '19 at 05:34
It shouldn't, no. If you need to do that, it may be that you're using the lifecycle events wrong. – lukeocodes Jun 19 '19 at 19:44

Alok Mali · Answer 4 · 2019-06-19T16:27:56.990

1

You can create a new function. And you can call it on componentDidMount and refreshPage.

exampleFunction = () => {
   /** Do your job here */
}

componentDidMount(){
   /** your code */
   this.exampleFunction ();
   /** your code */
}

refreshPage(){
   this.exampleFunction ();
}

edited Jun 19 '19 at 16:27

answered Jun 18 '19 at 12:30

Alok Mali

2,821
2
16
32

1

this.forceUpdate() doesnot produce any result – Gauranga Jun 18 '19 at 12:37
1

want to highlight: that will not call `componentDidUpdate`, `componentDidMount` or constructor's code. just re-renders. – skyboyer Jun 18 '19 at 12:40
this method skips shouldComponentUpdate(), you can read more about here https://reactjs.org/docs/react-component.html#forceupdate – Alok Mali Jun 18 '19 at 12:55
@skyboyer I want to call componentDidmount also. Then forceUpdate() may not work – Gauranga Jun 19 '19 at 05:00
@Gauranga, I think you want to get data again on click of refresh button. right ? – Alok Mali Jun 19 '19 at 16:20
I have modified my suggestion, You can try it. – Alok Mali Jun 21 '19 at 08:53

score 1 · Answer 5 · answered Sep 26 '21 at 07:26

1

refreshPage() {
  window.location.reload(false);
}

Reference at here: https://upmostly.com/tutorials/how-to-refresh-a-page-or-component-in-react

answered Sep 26 '21 at 07:26

Huỳnh Tấn Lực

37
4

This will still reload the entire page, which is not what was asked for, and adding a `false` is a behavior that only has any meaning on Firefox https://developer.mozilla.org/en-US/docs/Web/API/Location/reload and not the desired behavior – Jorge Kunrath Dec 23 '22 at 20:49

score 0 · Answer 6 · answered Jun 18 '19 at 12:40

0

If you want render your component then you can update any state using this.setState({}) in your function.

answered Jun 18 '19 at 12:40

Bhawana

372
1
6

Will it call componentDidMount on reload. I want this to happen? – Gauranga Jun 19 '19 at 05:11
I think it will call componentDidMount because componentDidMount calls after render. – Bhawana Jun 19 '19 at 05:51
No. It will not call componentDidMount as the component is already mounted. It will call componentDidUpdate. – abhishek gupta Feb 07 '21 at 16:14

score 0 · Answer 7 · answered Jun 19 '19 at 06:48

window.location.reload(); will reload the current document, it like the Refresh button in browser, and it will not make any partial re rendering like AJAX. To achieve this by make setState in react.

Below the working sample :

import React from "react";

class RefreshComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = { name: "React Component reload sample" };
}
 submit() {
   this.setState({ name: "React Component Updated - " + new Date() });
}
render() {
  return (
    <div>
      {this.state.name}
      <br />
      <button
       onClick={() => {
         this.submit();
       }}
     >
       Submit
     </button>
    </div>
  );
 }
}

export default RefreshComponent;

score 0 · Answer 8 · answered Jun 19 '19 at 10:21

The most maintainable way is to reactor existing components to handle "reload" in consistent way. ideally components should get data though props/context/redux instead of loading that on their own. This way you can refresh all with single call. Say it may be redux with some action like "REFRESH_HOTELS" or separate context with method reload.

as a last resort you may update key prop(to any other value, maybe just random string) and whole branch will be recreated including call to componentDidMount. it's know as "reset state by key prop" technique. but it's neither performance-safe nor really flexible way. better to avoid that until you really don't care of maintainability(or use as temporary solution... but typically "temporary solutions" stays as long as app exists)

score 0 · Answer 9 · answered Jul 16 '21 at 20:22

You can check out this other thread: Can you force a React component to rerender without calling setState?

This is the top answer:

In class components, you can call this.forceUpdate() to force a rerender.

Documentation: https://facebook.github.io/react/docs/component-api.html

In function components, there's no equivalent of forceUpdate, but you can contrive a way to force updates with the useState hook.

How to reload a component (part of page) in reactjs?

9 Answers9

Linked