Skip to content

Commit

Permalink
Only emit useFormState if postback state is passed
Browse files Browse the repository at this point in the history
This is an optimization where useFormState will only emit extra comment
markers if a form state is passed at the root. If no state is passed, we
don't need to emit anything because none of the hooks will match.
  • Loading branch information
acdlite committed Sep 14, 2023
1 parent 54c2f2a commit d0f822d
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 9 deletions.
15 changes: 10 additions & 5 deletions packages/react-reconciler/src/ReactFiberHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -2015,13 +2015,18 @@ function mountFormState<S, P>(
): [S, (P) => void] {
let initialState = initialStateProp;
if (getIsHydrating()) {
const isMatching = tryToClaimNextHydratableFormMarkerInstance(
currentlyRenderingFiber,
);
const root: FiberRoot = (getWorkInProgressRoot(): any);
const ssrFormState = root.formState;
if (ssrFormState !== null && isMatching) {
initialState = ssrFormState[0];
// If a formState option was passed to the root, there are form state
// markers that we need to hydrate. These indicate whether the form state
// matches this hook instance.
if (ssrFormState !== null) {
const isMatching = tryToClaimNextHydratableFormMarkerInstance(
currentlyRenderingFiber,
);
if (isMatching) {
initialState = ssrFormState[0];
}
}
}
const initialStateThenable: Thenable<S> = {
Expand Down
7 changes: 3 additions & 4 deletions packages/react-server/src/ReactFizzServer.js
Original file line number Diff line number Diff line change
Expand Up @@ -1193,11 +1193,10 @@ function finishFunctionComponent(
formStateMatchingIndex: number,
) {
let didEmitFormStateMarkers = false;
if (formStateCount !== 0) {
if (formStateCount !== 0 && request.formState !== null) {
// For each useFormState hook, emit a marker that indicates whether we
// rendered using the form state passed at the root.
// TODO: As an optimization, Fizz should only emit these markers if form
// state is passed at the root.
// rendered using the form state passed at the root. We only emit these
// markers if form state is passed at the root.
const segment = task.blockedSegment;
if (segment === null) {
// Implies we're in reumable mode.
Expand Down

0 comments on commit d0f822d

Please sign in to comment.