Changing routes about react-frontload

[davnicwil]

Hi @shotap

This is an interesting one, let me see if I understand correctly, you're saying that when you change the route, you have some top level frontload component that doesn't re-render on route change, but is loading data for dependent child components that do change / render etc on the route change?

If that's the case, this will be best solved by making the child components themselves frontload components - one of the benefits of react-frontload is actually to allow you to do exactly this - have each component be responsible for loading its own data when it renders, and not some parent component further up the chain.

Does that make sense?

Also, just to highlight one point:

the frontload runs only when componentDidMount

This by default isn't actually true - frontloads run on both mount and update unless you configure otherwise - see the options for frontloadConnect

[shotap]

I will explain myself better.
lets say I have app with 2 routes:

<Route path="/a" component={AComp} exact />
<Route path="/b" component={Bcomp} exact />

in this case both AComp and BComp are both frontload connected components.
the app renders on the server side with route /a and everything is great so far.
in AComp there is a <Link to={'/b'}>link</Link>. when the route change BComp is mounted and then the frontload of BComp is executed but BComp is not re-rendered like it would be in the server side. I think that BComp should be re-rendered

[davnicwil]

Ah ok, so I think this responsibility and the problem here really belongs to react-router (or whatever router you're using) - I haven't dug into why BComp isn't mounted/updated when you follow the <Link /> in this case, but to me it looks like it should be, and if it isn't it's really a bug at the router level.

[shotap]

BComp is mounted, then the frontload function is executed but after the frontload function is resolved the component should be updated and it’s not.
The router is not aware to the frontload function, only frontload knows about it so only frontload can re render BComp.

[davnicwil]

Sure - so the component updating is definitely the responsibility of the router/the wider application - frontload can't and shouldn't control when / if the component updates. This is the way it's designed - it's just a mechanism for loading data when components mount and update, it's purely reactive and how components actually get mounted and updated is totally the responsibility of the application, and in this case specifically the router.

I see a couple of ways forward here - either you delegate data loading to components inside BComp, making BComp essentially a dumb wrapper, or figure out a way to force BComp to update when routes change (if I recall you may be able to do this with tricks like specifying a random key on BComp to force it to remount on route change - or it might be possible to do it properly with router config in later versions of react-router).

EDIT - closed this but I will actually, on second thought, keep it open until you've confirmed that what I've suggested above makes sense. I think I understand the problem here but perhaps I'm missing something and it really is a react-frontload issue, but I am pretty sure from what I understand that the responsibility for updating should lie with the router here.

[davnicwil]

OK, going to close this. If you have any more issues with this or the above doesn't make sense, please feel welcome to ask more questions.

[davnicwil]

@shotap coming back on this, I wonder if it's related to #30 -- that is, the onUpdate option for frontloadConnect was mistakenly stated as default true in the docs, when it's actually default false.

This might actually be why you weren't seeing the frontload function run on updates, perhaps try setting that option true and see if it now behaves as expected.