ReactInitJavaScript performance issues

[vezaynk]

Please verify these steps before filing an issue, and check them off as you go

• The relevant native JavascriptEngineSwitcher library packages are installed (such as JavaScriptEngineSwitcher.V8.Native.win-x64)
• The VC++ 2017 runtime is installed (I'm not sure, running under Linux)
• The value of SetUseReact and SetUseBabel is correct in ReactConfig.cs or Startup.cs
• I've looked at the sample projects in this repo to verify that my app is configured correctly

I'm using these library versions:

All the latest and greatest things. (Recently updated all packages)

• node: Is node a dependency? Isn't ChakraCore what executes the JS?

Runtime environment:

• OS: (Mac, Windows, Linux flavor. Include 32-bit/64-bit and version): Arch Linux 64 bit
• .NET Framework or .NET Core Version: dotnet core 2.2.105

Steps to reproduce

I don't have a minimal reproducible example, I'm unsure if it is necessary as trying to build one will likely be a pain and the issue itself is probably straight-forward.

I outline the issue with some rough numbers here.

Long story short, calling @Html.ReactInitJavaScript() causes a significant performance burden even if there are no React components on the page. This is likely due to the fact that my JavaScript bundle is pretty big, and even node takes a while to go through it:

$ time node wwwroot/js/server.js
node wwwroot/js/server.js  0.45s user 0.04s system 105% cpu 0.461 total

My guess is that calling ReactInitJavaScript() causes the bundle to be loaded even if it is not necessary which raises two issues for me:

1. Imho, the bundle should not be loaded if there are no components to hydrate (Having client-only components on the page still does not require the server to load the bundle on its end).

2. I don't see why the bundle needs to be loaded on every page load. Would it possible to load it once, precompile it and then use the precompiled javascript for each pageload instead of redoing it every time?

[dustinsoftware]

Are you turning off engine pooling? Enabling that would help with render times. We probably could skip engine initialization if no components have been rendered, since some internal tracking is already there to know what components need to be initialized. Feel free to send a PR for that, or maybe I can get to it some time next week.

…

On Thu, May 30, 2019 at 13:00, Slava Knyazev ***@***.***> wrote: Please verify these steps before filing an issue, and check them off as you go - The relevant native JavascriptEngineSwitcher library packages are installed (such as JavaScriptEngineSwitcher.V8.Native.win-x64) - The VC++ 2017 runtime is installed (I'm not sure, running under Linux) - The value of SetUseReact and SetUseBabel is correct in ReactConfig.cs or Startup.cs - I've looked at the sample projects in this repo to verify that my app is configured correctly I'm using these library versions: All the latest and greatest things. (Recently updated all packages) - node: Is node a dependency? Isn't ChakraCore what executes the JS? Runtime environment: - OS: (Mac, Windows, Linux flavor. Include 32-bit/64-bit and version): Arch Linux 64 bit - .NET Framework or .NET Core Version: dotnet core 2.2.105 Steps to reproduce I don't have a minimal reproducible example, I'm unsure if it is necessary as trying to build one will likely be a pain and the issue itself is probably straight-forward. I outline the issue with some rough numbers here <vezaynk/Infobase#13>. Long story short, calling @Html.ReactInitJavaScript() causes a significant performance burden even if there are no React components on the page. This is likely due to the fact that my JavaScript bundle is pretty big, and even node takes a while to go through it: $ time node wwwroot/js/server.js node wwwroot/js/server.js 0.45s user 0.04s system 105% cpu 0.461 total My guess is that calling ReactInitJavaScript() causes the bundle to be loaded even if it is not necessary which raises two issues for me: 1. Imho, the bundle should not be loaded if there are no components to hydrate (Having client-only components on the page still does not require the server to load the bundle on its end). 2. I don't see why the bundle needs to be loaded on every page load. Would it possible to load it once, precompile it and then use the precompiled javascript for each pageload instead of redoing it every time? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#821?email_source=notifications&email_token=AAHGCFVFGGMCMKK6V6X2A73PYAW5VA5CNFSM4HRKF572YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GWZZF4A>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAHGCFRX4Z4HTGYYMCGBKC3PYAW5VANCNFSM4HRKF57Q> .

[vezaynk]

If by turning off engine pooling you mean SetReuseJavaScriptEngines(false), then yes, I have turned it off. The reason being was that each page load needs a different state and re-using the engines seems to mix the states and output undesirable content.

I'd love to PR it if I figure out how the system works, but if you can do it before me, please do.

Alternatively, is there a way to reuse the engines without preserving the state from the previous run?

[dustinsoftware]

Can your components derive their state from the passed in props? That way your app isn't counting on any shared internal state, and your render method calls will be pure (which is required for the engine pooling to work properly)

An example of this is in the tutorial code

[vezaynk]

No they cannot. The pattern that I have essentially is that the props serve immutable data in (mostly text in the proper language), while the rest of the data comes from redux.

The state of redux is instantiated using the props of a component whose sole purpose is to turn the props its given into the shared store.

I never quite understood why this kind of approach causes issues, as I would have assumed that the redux store would be properly updated each time and the components would use the latest updated data.

[vezaynk]

Here is a page which includes what I’m talking about: https://github.com/knyzorg/Infobase/blob/b0179e97dd8758dce039eb5344dd590dac39b583/Views/PASS/data-tool.cshtml#L6

[vezaynk]

Hey @dustinsoftware, is the reason reusing engines causes issues because each component is potentially rendered on a different engine?

If so, would it be possible to force a single engine throughout a single page load?