Responsive Split causes re-render & re-fetch of data

Hello!

I’ve encountered a problem using Split.

Wrapping a component, <C1 />, inside a <Split onResponsive={this._onResponsive.bind(this);}></Split> causes C1 to unmount and then remount(causing me to fetch data two times in componentWillMount) since _onResponsive updates the responsive-state & if the menu should be shown or not.

Do you have any solution on how to do this without re-fetching data? I want the responsive menu, but i’d like to avoid fetching more data.

I think this is more of a general React-problem rather than Grommet but i’m wondering if anyone has encountered the issue and how you solved it? I’m thinking of fetching data when a react-router route is changed, but that’s not optimal IMO.

I followed the docs-example but the DocsSplit doesn’t fetch data so it’ll only cause a re-render.

[alansouzati]

yeah yeah, thanks for chiming in.

[linde12]

@alansouzati Can you have a look at this diff when you have time?

It solves the problem of the components remounting(thus refetching data, resetting state etc.) but introduces another problem when Split is used with 3 or more children.

The flex breaks since the children are wrapped in two separate div elements in order to hide/show them at the correct width.

I just thought that maybe you’d have some better way of solving this after seeing the merge? Or if you’ve got some css-magic to make the flex work anyway?