<@U33H6SB2B> I think the lazy React-Components is,...

# javascript

[Paul Schnürer]

@turansky I think the lazy React-Components is, what I need. The requirement is to decrease the initial load time of the app and load everything else when needed.

I'm just unsure, whether this solution will completely cover this use case.
When loading a component lazily, will the subcomponents also get loaded lazily (EDIT: Just tested it: does not seem to be the case)?

Initially I was thinking about code-splitting as described by webpack (https://webpack.js.org/guides/code-splitting/) or the lazy loading of routes in angular (https://angular.dev/guide/ngmodules/lazy-loading). The latter could already be covered by the react-router lazy in combination with the lazy components (haven't tried it yet).

[turansky]

сс @Hildebrandt Tobias

[turansky]

We plan to implement lazy modules in Seskar (compiler plugin), which already contains some optimizations for React

[turansky]

https://kotlinlang.slack.com/archives/C0B8L3U69/p1726327457577309

[Paul Schnürer]

@turansky I was finally able to check out your React Lazy Components. Great work.

But I have still issues to make it work using multiple modules:

Currently there is no exported file for the shared-component. I tried to make it work based on your kotlin-wrappers/example

// appmodule/App.kt
val App = FC {
  Suspense {
    Shared{}
  }
}

// sharedmodule/Shared.kt
@Lazy
val Shared = FC {
  div { +"Something" }
}

With your current implementation I am able to only export one component per file, but it does not work if one component needs another components:

// LazyHeader.kt
import HeaderContent

@Lazy 
val Header = FC {
  div {
    HeaderContent()
  }
}

This Lazy-Component is not getting exported.

[turansky]

Could you please provide small project, where problem will be reproduced?

[turansky]

PR in Seskar example - also works

[Paul Schnürer]

Yes, of course. I´ll get back to you

[turansky]

Just add breaking change in Seskar example and I will provide fix

[Paul Schnürer]

I added a PR, thank you^^

[turansky]

Seskar is fine 🙂

[turansky]

Looks like Kotlin issue