Skip to content

Commit

Permalink
useFormState: Emit comment to mark whether state matches (#27307)
Browse files Browse the repository at this point in the history
A planned feature of useFormState is that if the page load is the result
of an MPA-style form submission — i.e. a form was submitted before it
was hydrated, using Server Actions — the state of the hook should
transfer to the next page.

I haven't implemented that part yet, but as a prerequisite, we need some
way for Fizz to indicate whether a useFormState hook was rendered using
the "postback" state. That way we can do all state matching logic on the
server without having to replicate it on the client, too.

The approach here is to emit a comment node for each useFormState hook.
We use one of two comment types: `<!--F-->` for a normal useFormState
hook, and `<!--F!-->` for a hook that was rendered using the postback
state. React will read these markers during hydration. This is similar
to how we encode Suspense boundaries.

Again, the actual matching algorithm is not yet implemented — for now,
the "not matching" marker is always emitted.

We can optimize this further by not emitting any markers for a render
that is not the result of a form postback, which I'll do in subsequent
PRs.

DiffTrain build for commit 8b26f07.
  • Loading branch information
acdlite committed Sep 7, 2023
1 parent d6a6e06 commit e19570a
Show file tree
Hide file tree
Showing 7 changed files with 9 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23994,7 +23994,7 @@ function createFiberRoot(
return root;
}

var ReactVersion = "18.3.0-canary-3566de59e-20230907";
var ReactVersion = "18.3.0-canary-8b26f07a8-20230907";

// Might add PROFILE later.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8617,7 +8617,7 @@ var devToolsConfig$jscomp$inline_1027 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-3566de59e-20230907",
version: "18.3.0-canary-8b26f07a8-20230907",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1226 = {
Expand Down Expand Up @@ -8648,7 +8648,7 @@ var internals$jscomp$inline_1226 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-3566de59e-20230907"
reconcilerVersion: "18.3.0-canary-8b26f07a8-20230907"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1227 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9043,7 +9043,7 @@ var devToolsConfig$jscomp$inline_1069 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-3566de59e-20230907",
version: "18.3.0-canary-8b26f07a8-20230907",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1267 = {
Expand Down Expand Up @@ -9074,7 +9074,7 @@ var internals$jscomp$inline_1267 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-3566de59e-20230907"
reconcilerVersion: "18.3.0-canary-8b26f07a8-20230907"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1268 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ if (
}
"use strict";

var ReactVersion = "18.3.0-canary-3566de59e-20230907";
var ReactVersion = "18.3.0-canary-8b26f07a8-20230907";

// ATTENTION
// When adding new symbols to this file,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -616,4 +616,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-3566de59e-20230907";
exports.version = "18.3.0-canary-8b26f07a8-20230907";
Original file line number Diff line number Diff line change
Expand Up @@ -619,7 +619,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-3566de59e-20230907";
exports.version = "18.3.0-canary-8b26f07a8-20230907";

/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
3566de59e2046e7e8478462375aaa71716f1095b
8b26f07a883bb341c20283c0099bf5ee6f87bd1f

0 comments on commit e19570a

Please sign in to comment.