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. https://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

• 3.0s Interactive
• 2.7s Perceived

• 2.7s Interactive
• 2.4s Perceived