You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If you use `document.addEventListener("turbolinks:load", function() {...});` somewhere in your code, you will notice that Turbolinks 5 does not fire `turbolinks:load` on initial page load. A quick workaround is to use `defer` instead of `async`:
87
+
If you use `document.addEventListener("turbolinks:load", function() {...});` somewhere in your code, you will notice that Turbolinks 5 does not fire `turbolinks:load` on initial page load. A quick workaround for React on Rails <15 is to use `defer` instead of `async`:
Copy file name to clipboardExpand all lines: docs/release-notes/15.0.0.md
+14-11Lines changed: 14 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,22 +30,25 @@ Major improvements to component and store hydration:
30
30
- The previous need for deferring scripts to prevent race conditions has been eliminated due to improved hydration handling. Making scripts not defer is critical to execute the hydration scripts early before the page is fully loaded.
31
31
- The `force_load` configuration makes `react-on-rails` hydrate components immediately as soon as their server-rendered HTML reaches the client, without waiting for the full page load.
32
32
- If you want to keep the previous behavior, you can set `defer_generated_component_packs: true` or `force_load: false` in your `config/initializers/react_on_rails.rb` file.
33
-
- To do that for only some components, you can call `force_load: false` in the `react_component` helper or `force_load` configuration.
34
-
- Redux store now supports `force_load` option, and uses `config.force_load` value as the default value. Which means that the Redux store will hydrate immediately as soon as its server-side data reaches the client. You can override this behavior for individual Redux stores by calling the `redux_store` helper with `force_load: false`.
33
+
- You can also keep it for individual components by passing `force_load: false` to `react_component` or `stream_react_component`.
34
+
- Redux store now supports `force_load` option, which defaults to `config.force_load` (and so to `true` if that isn't set). If `true`, the Redux store will hydrate immediately as soon as its server-side data reaches the client.
35
+
- You can override this behavior for individual Redux stores by calling the `redux_store` helper with `force_load: false`, same as `react_component`.
35
36
36
37
-`ReactOnRails.reactOnRailsPageLoaded()` is now an async function:
37
38
38
-
- If you are manually calling this function to ensure components are hydrated (e.g. with async script loading), you must now await the promise it returns:
39
+
- If you manually call this function to ensure components are hydrated (e.g., with async script loading), you must now await the promise it returns:
39
40
40
-
```js
41
-
// Before
42
-
ReactOnRails.reactOnRailsPageLoaded();
43
-
// Code expecting all components to be hydrated
41
+
```js
42
+
// Before
43
+
ReactOnRails.reactOnRailsPageLoaded();
44
+
// Code expecting all components to be hydrated
44
45
45
-
// After
46
-
awaitReactOnRails.reactOnRailsPageLoaded();
47
-
// Code expecting all components to be hydrated
48
-
```
46
+
// After
47
+
awaitReactOnRails.reactOnRailsPageLoaded();
48
+
// Code expecting all components to be hydrated
49
+
```
50
+
51
+
- If you call it in a `turbolinks:load` listener to work around the issue documented in [Turbolinks](../rails/turbolinks.md#async-script-loading), the listener can be safely removed.
0 commit comments