fix: virtualization on FileDiffs hydration flow

[ShpetimA]

Description

As described #478 the virtualization step in React Filediffs appears blank on first render

Motivation & Context

Move host-container assignment out of the generic DOM scan and into the real hydration branch only. Empty mounts should leave this.fileContainer unset until the first render() call.

The fix:

Fix.mov

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• Refactoring (non-breaking change)
• New feature (non-breaking change which adds functionality). You must have
  first discussed with the dev team and they should be aware that this PR is
  being opened
• Breaking change (fix or feature that would change existing functionality).
  You must have first discussed with the dev team and they should be aware
  that this PR is being opened
• Documentation update

Checklist

• I have read the
  contributing guidelines
• My code follows the code style of the project (bun run lint)
• My code is formatted properly (bun run format)
• I have updated the documentation accordingly (if applicable)
• I have added tests to cover my changes (if applicable)
• All new and existing tests pass (bun run diffs:test)

How was AI used in generating this PR

AI was used to pinpoint the regression from v1.1.5 - v1.1.6 and reproduce the issue

Related issues

#478

[vercel]

@ShpetimA is attempting to deploy a commit to the Pierre Computer Company Team on Vercel.

A member of the Team first needs to authorize it.

[amadeus]

Ahh thanks for the report, good catch.

Although a couple notes:

1. we need to apply this fix to files as well
2. I think to be safest, see this patch:

diff --git a/packages/diffs/src/components/File.ts b/packages/diffs/src/components/File.ts
index efd8b0f7..25b372c2 100644
--- a/packages/diffs/src/components/File.ts
+++ b/packages/diffs/src/components/File.ts
@@ -334,7 +334,9 @@ export class File<LAnnotation = undefined> {
       this.syncCodeNodeFromPre(this.pre);
       this.pre.removeAttribute('data-dehydrated');
     }
-    this.fileContainer = fileContainer;
+    if (this.pre != null || this.headerElement != null) {
+      this.fileContainer = fileContainer;
+    }
   }
 
   protected hydrationSetup({
diff --git a/packages/diffs/src/components/FileDiff.ts b/packages/diffs/src/components/FileDiff.ts
index 81c31fc2..5162d15d 100644
--- a/packages/diffs/src/components/FileDiff.ts
+++ b/packages/diffs/src/components/FileDiff.ts
@@ -500,7 +500,6 @@ export class FileDiff<LAnnotation = undefined> {
     }
     // Otherwise orchestrate our setup
     else {
-      this.fileContainer = fileContainer;
       this.hydrationSetup({
         fileDiff,
         oldFile,
@@ -571,6 +570,9 @@ export class FileDiff<LAnnotation = undefined> {
       this.syncCodeNodesFromPre(this.pre);
       this.pre.removeAttribute('data-dehydrated');
     }
+    if (this.pre != null || this.headerElement != null) {
+      this.fileContainer = fileContainer;
+    }
   }
 
   protected hydrationSetup({

I tested it with your repro and it appeared to fix the problem but I also think ensure the assignment is happening properly

[ShpetimA]

Updated the pr with the suggested patch now both File.ts and FileDiff are good

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pierrejs-diff-demo	Ready	Preview	Apr 5, 2026 9:06pm
pierrejs-docs	Ready	Preview	Apr 5, 2026 9:06pm

[amadeus]

Thanks for finding the issue, reporting and fixing! 🙏