React.lazy remounts component if used within a render

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Simple reproduction here: https://codesandbox.io/s/6z4qmm2k7n

The contrived example does not make much sense, but I got burned by this in the context of react-router. I simply wanted to avoid defining all lazily loaded components up front but instead have them coupled with a particular route.

function Routing() {
  <>
    <Route path="foo" component={lazy(() => import('./foo'))} />
  </>
}

What is the expected behavior?

In case this is intended behavior, it should be definitely documented. Otherwise it would be nice to have some memoized lazy variant. Possibly with hooks coming what about useLazy ? 😃

[hypeJunction]

Solution from @maulik-soni works for me if I wrap the output in useMemo

const CodesIndex = useMemo(() => LazyloadComponent(() => import('./Screens/Codes'))(true), []);

return (
   <Route path="/codes" components={CodesIndex} />
);

[theKashey]

Because you are missing the point @Haraldson.

• React.lazy is always returning a new component. Because it’s a factory
• every lazy has an internal state, which knows is it not-loader/loading or loaded. Once it “loaded” - it never refetches the code. NEVER.
• lazy expects some importer - a function which will return a Promise with default, and it could be anything. It could not, and should “think” what it is, and every time you will give it a “new” importer. The same problem as with “new” lazy itself.
• However, SSR requires to “knew” which bundles has to be loaded to fulfil requirements for “lazy components” on the current page. This is “the track” you are looking for.

For example - loadable-components will use babel-plugin to extract file name from import, and will synchronously import required component, as long as they “knew” - their code is loaded. However, as long as any factory will generate a unique result every time - you will experience a full tree remount. Like using a different key on the node.

So, please, just try to understand how it works, why it works that way, and why it’s not working for your case, and what’s is wrong with your case.