-
Notifications
You must be signed in to change notification settings - Fork 757
Performance
Based on discussions at #773 and #828
From https://reactjs.org/docs/perf.html
As of React 16, react-addons-perf is not supported. Please use your browser’s profiling tools to get insight into which components re-render.
React-Rails 2.3.x was the last version on React 15 that has react-addons-perf
You can use standard browser tools: Chrome Lighthouse Audit
The most interesting statistics to measure are "Perceptual Speed" and "First Interactive", they show how soon someone could see something, and how soon it actually finished loading most of the page.
Run the audit until the numbers roughly stabilize, 3 runs is enough for most meaningful changes.
Wrap specific components using the Rails view-helper in a call to benchmark
<% benchmark 'Root of SPA' do %>
<%= render_component "WholePageContainer", @large_data_blob %>
<% end %>
If you want to measure all components, you may want to wrap the render_component view-helper itself.
def render_component name, props, prerender
benchmark("Component #{name}") do
react_component name, props, prerender: prerender
end
end
If you're using a tool like Scout, Appsignal, Skylight, NewRelic or others, you may want longer term instrumentation. http://guides.rubyonrails.org/active_support_instrumentation.html
This project gives some direction if you wish to implement this yourself. https://github.com/pboling/react-rails-benchmark_renderer
Thanks to @arnoldclark for stats and dev time provided.
TLDR: Server-side rendering + Hydrate is faster perceived and first interactive than any other option.
- 4.0s Interactive
- 2.3s Perceived
![screen shot 2017-11-03 at 20 09 09](https://user-images.githubusercontent.com/637868/32393790-e104fef8-c0d2-11e7-8465-cf9fe37df67b.png)
- 3.0s Interactive
- 2.7s Perceived
![screen shot 2017-11-03 at 20 08 15](https://user-images.githubusercontent.com/637868/32393778-d68c27a8-c0d2-11e7-8965-48846198d850.png)
- 2.7s Interactive
- 2.4s Perceived
![screen shot 2017-11-03 at 20 41 56](https://user-images.githubusercontent.com/637868/32395065-8189488a-c0d7-11e7-890a-3d6055de65d7.png)