Skip to content

Fix component registration race condition with defer loading strategy #1972

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 11, 2025
Merged

Fix component registration race condition with defer loading strategy #1972

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5abe219
Fix component registration race condition by using defer for all scripts
justin808 Nov 11, 2025
fe22829
Update specs to expect :defer as default loading strategy
justin808 Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions lib/react_on_rails/configuration.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,9 +154,9 @@ def check_component_registry_timeout
raise ReactOnRails::Error, "component_registry_timeout must be a positive integer"
end

# rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
# rubocop:disable Metrics/CyclomaticComplexity
def validate_generated_component_packs_loading_strategy
# rubocop:enable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
# rubocop:enable Metrics/CyclomaticComplexity

if defer_generated_component_packs
if %i[async sync].include?(generated_component_packs_loading_strategy)
Expand All @@ -176,12 +176,11 @@ def validate_generated_component_packs_loading_strategy
1. Use :sync or :defer loading strategy instead of :async
2. Upgrade to Shakapacker v8.2.0 or above to enable async script loading
MSG
if PackerUtils.supports_async_loading?
self.generated_component_packs_loading_strategy ||= :async
elsif generated_component_packs_loading_strategy.nil?
Rails.logger.warn("**WARNING** #{msg}")
self.generated_component_packs_loading_strategy = :sync
elsif generated_component_packs_loading_strategy == :async
if generated_component_packs_loading_strategy.nil?
# Use defer as the default to ensure generated component packs load and register
# components before main bundle executes, avoiding race conditions with async loading
self.generated_component_packs_loading_strategy = :defer
elsif generated_component_packs_loading_strategy == :async && !PackerUtils.supports_async_loading?
Copy link
Member Author

@justin808 justin808 Nov 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AbanoubGhadban This requires careful review before we release 16.2.0

raise ReactOnRails::Error, "**ERROR** #{msg}"
end

Expand Down
14 changes: 4 additions & 10 deletions spec/dummy/app/views/layouts/application.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,10 @@

<%= yield :head %>

<%# Conditionally use defer: true for pages with Redux shared stores (inline registration).
Modern apps should use async: true for optimal performance. See docs for details:
docs/building-features/streaming-server-rendering.md %>
<% if uses_redux_shared_store? %>
<%# defer: true required for Redux shared stores with inline component registration %>
<%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', defer: true) %>
<% else %>
<%# async: true is the recommended approach for modern apps (Shakapacker >= 8.2.0) %>
<%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', async: true) %>
<% end %>
<%# Use defer: true to ensure proper script execution order.
When using generated component packs (auto_load_bundle), defer ensures
component registrations complete before React hydration begins. %>
<%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', defer: true) %>

<%= csrf_meta_tags %>
</head>
Expand Down
3 changes: 2 additions & 1 deletion spec/dummy/config/initializers/react_on_rails.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,5 +42,6 @@ def self.adjust_props_for_client_side_hydration(component_name, props)
config.components_subdirectory = "startup"
config.auto_load_bundle = true
config.immediate_hydration = false
config.generated_component_packs_loading_strategy = :defer
# Don't explicitly set generated_component_packs_loading_strategy - let it default to :defer
# which ensures generated component packs load and register components before main bundle executes
end
Loading