Is it possible to reload a ponent in react without using the help of a function like onClick. I want my ponent to reload again after it just got loaded.

I tried using window.location.reload(false); in the constructor. I even tried using useEffect() but they make the page reload infinitely.

Is there any work around?

Is it possible to reload a ponent in react without using the help of a function like onClick. I want my ponent to reload again after it just got loaded.

I tried using window.location.reload(false); in the constructor. I even tried using useEffect() but they make the page reload infinitely.

Is there any work around?

• javascript
• reactjs
• react-redux
• react-router
• dom-events

• If you want it to reload immediately after loading then it sounds like your objective is an infinite loop? – Brian Thompson Commented Jan 24, 2020 at 20:20
• I have passed a value as a prop to a child ponent which loads on the page. This value is calculated before it gets passed. I want the value to be recalculated after user performs an action on the child ponent. I figured auto reloading the page would solve my issue. – Rishi Gulati Commented Jan 24, 2020 at 20:33
• Ok that much makes sense, what is the action? – Brian Thompson Commented Jan 24, 2020 at 20:39
• addition of a cookie in the browser. I'm not using any node module, simple javascript. – Rishi Gulati Commented Jan 28, 2020 at 12:57

2 Answers 2

I have seen people acplish this by setting a dummy setState method that is strictly used to trigger a refresh. Consider this ponent:

export const Proof = () => {
    console.log("Component re-rendered")
    const [dummyState,rerender] = React.useState(1);

    const onClick = () => {
        rerender(dummyState + 1);
    }

    React.useEffect( () => {
        console.log("dummyState's state has updated to: " + dummyState)
    }, [dummyState])
    return(
        <div>
            <button onClick={onClick}>reRender</button>
        </div>
    )
}

Whenever you want to rerender the ponent you just need to trigger a change in the dummyState. Clicking the button will cause the ponents state to change, which will cause the ponent to rerender (i used a console.log() for proof). It is worth noting that simply calling a method that instantly changes the state of the ponent will result in an infinite loop.

From reading your ment above, it sounds like you are passing a value as a prop to a child ponent and you would like the value to be recalculated as soon as any interaction with that ponent occurs. Ideally, the interaction itself should cause the recalculation. But if you would just like to quickly recalculate the value and rerender the ponent as soon as it renders then i think this would work:

export const Proof = () => {
    console.log("Component re-rendered")
    const [dummyState,rerender] = React.useState(1);

    //the empty brackets will cause this useEffect 
    //statement to only execute once.
    React.useEffect( () => {
        rerender(dummyState + 1);
    }, []) 

    return(
        <div>
            <p>dummyState</p>
        </div>
    )
}

You could also recalculate the value in the useEffect method, as it will get called as soon as the ponent initially renders but not on any subsequent rerenders (due to the empty brackets as the second parameter to the useEffect method)

Have you tried to enter some dependecies to your useEffect hook ? Like :

 useEffect(() => {
    console.log('hello');
 }, [isLoad];

Here you're ponent will re-render only if isLoad is changing.