-
-
Notifications
You must be signed in to change notification settings - Fork 380
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fully dynamic loadable is not reactive #284
Comments
What is the use case? |
Hello @luishdz1010, I see what you mean. I think we could try to fix it but if we did, you will have to specify dependencies like |
My use-case is somewhat contrived. I'm using loadable.lib to load some data files, which represent data for different pages. Based on the current URL route, I load a different one. My issue is that different pages may use different wrapper components or "layouts", therefore the loadable has to be a topmost component in the render tree, since the loadable doesn't work reactively I have to resort to use const PageJson = loadable.lib(props => import(`./pages/${props.path}`))
<PageJson key={location.pathname} path={location.pathname.replace(/\//, '_')}>
{({
default: {
data
},
}) => (
<Layout data={data.layout}>
<Page data={data.page/>
</Layout>
)}
</PageJson> @neoziro That seems like a sensible approach to me |
But what is the right behaviour:
Only the second variant has to be implemented inside loadable components, while the rest are easy to wrap around. |
@theKashey The first approach is already possible, but it does not have the same behavior as if it were implemented inside loadable. Changing the If we don't use This is what I'd expect, if I change the |
I think we could make it work the way you expect it to work. But it is a big change. I need time to work on it. For now if you don't need SSR a workaround is to create your own |
🐛 Bug Report
Seems like only the very first prop sent to the loadable component in a dynamic context is respected, further updates to the props have no effect. Same applies to loadable.lib
To Reproduce
https://codesandbox.io/s/3wn6vo7ym
Expected behavior
Changing props will work reactively. An "easy" fix is to set a
key
prop to the loadable component, this works in the case of using a loadable component (although it seems like a hack) but for loadable.lib, this will trigger an unmount and remount of all children of the component, which is sometimes not desired as the rendered tree could be similar, you want to perform animations, etc.The text was updated successfully, but these errors were encountered: