Enhanced turbolinks support #962
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This does 2 things.
The first is move the mounting to
turbolinks:before-render
, since that's the earliest event where the user sees content on the page. When it was set toload
only, the user wouldn't see any react components until the network request finished, rather than seeing them on the cached page. This fixes #960The second caches rendered components. If you pass an existing component to ReactDOM, it will update the currently mounted component with the passed component, rather than replacing it.
This allows the
data-turbolinks-permanent
attribute to work correct. When the cached page is displayed and react_ujs mounts the existing component, it won't destroy the cached component.This lets you do things like have react components in your layout that aren't affected by page changes, like a navigation component, or search popup.
An example where the navbar/appbar is permanent, but the main page is not: