Skip to content

Commit

Permalink
[Experiment] Reuse memo cache after interruption (#28878)
Browse files Browse the repository at this point in the history
Adds an experimental feature flag to the implementation of useMemoCache,
the internal cache used by the React Compiler (Forget).

When enabled, instead of treating the cache as copy-on-write, like we do
with fibers, we share the same cache instance across all render
attempts, even if the component is interrupted before it commits.

If an update is interrupted, either because it suspended or because of
another update, we can reuse the memoized computations from the previous
attempt. We can do this because the React Compiler performs atomic
writes to the memo cache, i.e. it will not record the inputs to a
memoization without also recording its output.

This gives us a form of "resuming" within components and hooks.

This only works when updating a component that already mounted. It has
no impact during initial render, because the memo cache is stored on the
fiber, and since we have not implemented resuming for fibers, it's
always a fresh memo cache, anyway.

However, this alone is pretty useful — it happens whenever you update
the UI with fresh data after a mutation/action, which is extremely
common in a Suspense-driven (e.g. RSC or Relay) app.

So the impact of this feature is faster data mutations/actions (when the
React Compiler is used).

DiffTrain build for commit ea26e38.
  • Loading branch information
acdlite committed Apr 19, 2024
1 parent ec52e58 commit cc4c9de
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<f42fda0db232601ac76c5f1efaee14fd>>
* @generated SignedSource<<8514bdf3885188125eab2e51d9ecb536>>
*/

'use strict';
Expand Down Expand Up @@ -7505,7 +7505,30 @@ function useMemoCache(size) {

if (currentMemoCache != null) {
memoCache = {
data: currentMemoCache.data.map(function (array) {
// When enableNoCloningMemoCache is enabled, instead of treating the
// cache as copy-on-write, like we do with fibers, we share the same
// cache instance across all render attempts, even if the component
// is interrupted before it commits.
//
// If an update is interrupted, either because it suspended or
// because of another update, we can reuse the memoized computations
// from the previous attempt. We can do this because the React
// Compiler performs atomic writes to the memo cache, i.e. it will
// not record the inputs to a memoization without also recording its
// output.
//
// This gives us a form of "resuming" within components and hooks.
//
// This only works when updating a component that already mounted.
// It has no impact during initial render, because the memo cache is
// stored on the fiber, and since we have not implemented resuming
// for fibers, it's always a fresh memo cache, anyway.
//
// However, this alone is pretty useful — it happens whenever you
// update the UI with fresh data after a mutation/action, which is
// extremely common in a Suspense-driven (e.g. RSC or Relay) app.
data: // Clone the memo cache before each render (copy-on-write)
currentMemoCache.data.map(function (array) {
return array.slice();
}),
index: 0
Expand Down Expand Up @@ -22967,7 +22990,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
return root;
}

var ReactVersion = '19.0.0-canary-8eb36427';
var ReactVersion = '19.0.0-canary-66405eaa';

/*
* The `'' + value` pattern (used in perf-sensitive code) throws for Symbol
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
0e0b69321a6fcfe8a3eaae3b1016beb110437b38
ea26e38e33bffeba1ecc42688d7e8cd7e0da1c02
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<aa7d2d8bc19196a0f82f861919a366a9>>
* @generated SignedSource<<1a8fdf80e78f9d6a4a8bccd8d1a9a735>>
*/

'use strict';
Expand Down Expand Up @@ -10482,7 +10482,30 @@ function useMemoCache(size) {

if (currentMemoCache != null) {
memoCache = {
data: currentMemoCache.data.map(function (array) {
// When enableNoCloningMemoCache is enabled, instead of treating the
// cache as copy-on-write, like we do with fibers, we share the same
// cache instance across all render attempts, even if the component
// is interrupted before it commits.
//
// If an update is interrupted, either because it suspended or
// because of another update, we can reuse the memoized computations
// from the previous attempt. We can do this because the React
// Compiler performs atomic writes to the memo cache, i.e. it will
// not record the inputs to a memoization without also recording its
// output.
//
// This gives us a form of "resuming" within components and hooks.
//
// This only works when updating a component that already mounted.
// It has no impact during initial render, because the memo cache is
// stored on the fiber, and since we have not implemented resuming
// for fibers, it's always a fresh memo cache, anyway.
//
// However, this alone is pretty useful — it happens whenever you
// update the UI with fresh data after a mutation/action, which is
// extremely common in a Suspense-driven (e.g. RSC or Relay) app.
data: // Clone the memo cache before each render (copy-on-write)
currentMemoCache.data.map(function (array) {
return array.slice();
}),
index: 0
Expand Down Expand Up @@ -26037,7 +26060,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
return root;
}

var ReactVersion = '19.0.0-canary-bd0f09e6';
var ReactVersion = '19.0.0-canary-e42cf623';

/*
* The `'' + value` pattern (used in perf-sensitive code) throws for Symbol
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<3659a427365aaec7f1c22e3be8b66f08>>
* @generated SignedSource<<0ce01fc662f6de8232355aded350d529>>
*/

'use strict';
Expand Down Expand Up @@ -10721,7 +10721,30 @@ function useMemoCache(size) {

if (currentMemoCache != null) {
memoCache = {
data: currentMemoCache.data.map(function (array) {
// When enableNoCloningMemoCache is enabled, instead of treating the
// cache as copy-on-write, like we do with fibers, we share the same
// cache instance across all render attempts, even if the component
// is interrupted before it commits.
//
// If an update is interrupted, either because it suspended or
// because of another update, we can reuse the memoized computations
// from the previous attempt. We can do this because the React
// Compiler performs atomic writes to the memo cache, i.e. it will
// not record the inputs to a memoization without also recording its
// output.
//
// This gives us a form of "resuming" within components and hooks.
//
// This only works when updating a component that already mounted.
// It has no impact during initial render, because the memo cache is
// stored on the fiber, and since we have not implemented resuming
// for fibers, it's always a fresh memo cache, anyway.
//
// However, this alone is pretty useful — it happens whenever you
// update the UI with fresh data after a mutation/action, which is
// extremely common in a Suspense-driven (e.g. RSC or Relay) app.
data: // Clone the memo cache before each render (copy-on-write)
currentMemoCache.data.map(function (array) {
return array.slice();
}),
index: 0
Expand Down Expand Up @@ -26452,7 +26475,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
return root;
}

var ReactVersion = '19.0.0-canary-4c1bc958';
var ReactVersion = '19.0.0-canary-852c4872';

/*
* The `'' + value` pattern (used in perf-sensitive code) throws for Symbol
Expand Down

0 comments on commit cc4c9de

Please sign in to comment.