Skip to content

fix: resolve hydration mismatches in ThemeToggle and FileUpload components#1155

Open
compiler041 wants to merge 1 commit into
magic-peach:mainfrom
compiler041:main
Open

fix: resolve hydration mismatches in ThemeToggle and FileUpload components#1155
compiler041 wants to merge 1 commit into
magic-peach:mainfrom
compiler041:main

Conversation

@compiler041
Copy link
Copy Markdown

Summary

Fixes hydration mismatch errors caused by theme-dependent rendering and
browser extension attribute injection.

Closes #[paste issue number here]

Changes

src/components/ThemeToggle.tsx

  • Added mounted state initialized to false
  • Added useEffect to set mounted = true after hydration
  • Renders a neutral disabled placeholder button during SSR to ensure
    server and client HTML match exactly
  • Placeholder icon uses opacity-0 to prevent layout shift

src/components/FileUpload.tsx

  • Added suppressHydrationWarning to the DropZone inner div
  • Prevents false positive hydration errors from browser extensions
    injecting fdprocessedid attributes

Root Cause

useTheme() returns theme state that depends on localStorage, which
is unavailable during SSR. This causes the server to render with a
default theme while the client renders with the stored preference.

Testing

  • No hydration errors in console on fresh load
  • Theme toggle works correctly after hydration
  • File upload drop zone functions normally
  • Tested with and without form-autofill extensions

@vercel
Copy link
Copy Markdown

vercel Bot commented May 25, 2026

@compiler041 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown
Contributor

⚠️ PR Format Issues — @compiler041

Please fix the following before your PR can be reviewed:

  • ⚠️ No linked issue found. Add Closes #<issue-number> to your PR description.

Push new commits after fixing — this comment will update automatically.

📖 CONTRIBUTING.md

@github-actions
Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @compiler041!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions github-actions Bot added level:beginner Beginner level - 20 pts type:bug Bug fix type:design UI/UX design type:testing Testing labels May 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

level:beginner Beginner level - 20 pts type:bug Bug fix type:design UI/UX design type:testing Testing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant