0

This might be a stupid question but I have some useEffects that act as initial triggers and set up the component. Now, I could trigger all these useEffects with some flag in the dependancy array and kinda fake a "reconstruction" of the component but is there a way to do it properly?

So that the component rerenders as if its doing it for the first time? Thanks for any suggestions...

My use case is as follows: A generic React component that you provide an ID, on initial rendering it will check redux store if there is a state existing for this id, if yes, it grabs it and renders the state from store. Additionally, it renders third party components that behave in a certain way given the initial properties you pass it.

So, I basicly rely on reacts way of only triggering a useEffect once. But how would I control react to do it again, from outside...

This is not a duplicate because I dont want to force an update, I need to emulate a complete initial construction of the component.

The reason for this is because down the line I render third party components like so:

useEffect(()=>{...},[]); // initial set up

if(something){
  return <SomethirdPartyComponentsThatBehaveWellWhenInitialized />;
}

When something is true the first time, the third party components initialize perfectly and everything works fine.

However the issue is when I set something to false and then back to true again.

Now, my props that I pass to the third parties are all set up to act as if something has just become true, therefore, they are the initial props for the third party components and are handled this way.

However the third party components are already rendered and now behave out of sync because theyre still built off the old initialization, no longer corresponding to the new props...

The easiest fix in my head: Tell react that at this point you want <SomethirdPartyComponentsThatBehaveWellWhenInitialized />; to be reconstructed as if it were the first time. This would also recursively trigger that initialization in child components which would also be super helpful.

ThatBrianDude
  • 2,952
  • 3
  • 16
  • 42
  • 3
    If you need to *force* a re-render in React, you are probably doing something wrong. What does your code look like? – kelsny Apr 12 '23 at 15:54
  • Your question isn't clear. What about What aspect of rerendering isn't working for you? Please see [ask] and show some code. – isherwood Apr 12 '23 at 15:54
  • As asked, you can find your answer [here](https://stackoverflow.com/questions/30626030/can-you-force-a-react-component-to-rerender-without-calling-setstate). But I think it's actually much simpler than that: Add a state member, add that state member to the dependency array of the `useEffect`, and change the state member when you want the effect(s) to run again. – T.J. Crowder Apr 12 '23 at 15:56
  • *"But how would I controll react to do it again, from outside..."* The "from outside" is new information. So instead of a state member, use a prop as the dependency of the `useEffect`. Then the effect is run whenever the prop changes. – T.J. Crowder Apr 12 '23 at 15:59
  • The issue is that the component renders third party components down the line (e.g. a List with a controlled selection state etc etc..) and all these things work great after initialed first, but when I switch back into their branch in the render tree, theyre already initialized, and the selection becomes all f'ed up. So the easiest would be to completely emulate the initial render of the component vs trying to control the third party components myself, as their behaviour is not part of my code and work as wanted when initialed first. – ThatBrianDude Apr 12 '23 at 16:06
  • I edited the question for more clarity – ThatBrianDude Apr 12 '23 at 16:13

0 Answers0