force reload screen on an event of a child component

it is sort of too late to change things so I was wondering if there is a way to do it in my functional components. Basically, I have a main screen with a child component in it:

ScreenHome.js

      <ChildComponent/>

ChildComponent does something and upon completion of the process, I want to reload the screen. ChildComponent is in all the screens so I need it to to reload the current screen. I have seen:

     this.forceUpdate()

but I am using functional components only so that can't apply. How would I go reload the page?

1 answer

  • answered 2020-10-29 22:46 Kipnoedels

    You can define a state in your parent (screen) and pass the setter to your child. E.g.

    const [getForceUpdate, setForceUpdate] = useState(false);
    
    <Parent>
       <Child forceAnUpdate={() => setForceUpdate(!getForceUpdate)}/>
    </Parent>
    

    Call props.forceAnUpdate when your child process is done. This will trigger a re-render in all your components.