fix: improve doc app dev rendering#6853
Conversation
WalkthroughThe React app initialization in Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
www/src/app.tsx (1)
17-20: Consider polishing the comment wording.The comment effectively explains the reasoning, but "by the way" is somewhat informal for code documentation.
📝 Suggested revision
/** * We have an SSG setup in production, so we want to hydrate the app. - * In development by the way we just want to render it normally, to avoid hydration mismatches false positives. + * In development, we render normally to avoid false positive hydration mismatch warnings. */
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
www/src/app.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
**/*.{ts,tsx}: Never useanytype (implicit or explicit) in TypeScript code
Preferunknownoveranyand refine the type in TypeScript
Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Do not useastype assertions in TypeScript; the only exception isas constAll imports from
rechartsmust use the public API entry point (e.g.,import { TooltipIndex } from 'recharts'). Imports from internal paths likerecharts/types/*orrecharts/src/*are not allowed and will fail the linter.
Files:
www/src/app.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
www/src/app.tsx
🧠 Learnings (1)
📓 Common learnings
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6659
File: www/src/components/GuideView/Performance/index.tsx:232-250
Timestamp: 2025-11-19T14:08:01.728Z
Learning: In Recharts version 3.4.2, object-as-prop optimizations were introduced to reduce unnecessary re-renders when new object references are passed as props. This affects the recommendation for the `react-perf/jsx-no-new-object-as-prop` ESLint rule.
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to test/component/**/*.spec.tsx : Use React Testing Library for testing component interactions and behavior upon rendering
🧬 Code graph analysis (1)
www/src/app.tsx (3)
www/src/components/color-mode/ColorModeProvider.tsx (1)
ColorModeProvider(7-15)www/src/components/color-mode/defineColorModeStore.ts (1)
defineColorModeStore(55-106)www/src/containers/Root.tsx (1)
Root(5-12)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build, Test, Pack
🔇 Additional comments (3)
www/src/app.tsx (3)
1-1: LGTM! Correct imports for conditional rendering.The addition of
createRootalongsidehydrateRootis appropriate for supporting both SSG hydration (production) and standard client-side rendering (development).
11-15: Good refactor to avoid duplication.Extracting the React tree into a variable is sensible since it's used in both the production and development rendering paths.
21-25: Correct approach for environment-specific rendering.The conditional logic properly addresses the issue described in the PR:
- Production uses
hydrateRootto hydrate pre-rendered SSG content- Development uses
createRootfor standard client-side rendering, avoiding false positive hydration warningsThis aligns with the stated goal of eliminating React warnings encountered during development.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #6853 +/- ##
==========================================
- Coverage 93.90% 93.89% -0.01%
==========================================
Files 531 531
Lines 49429 49432 +3
Branches 5169 5169
==========================================
Hits 46415 46415
- Misses 3007 3010 +3
Partials 7 7 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Description
Enable full client side rendering in non production environments.
Related Issue
#6825
Motivation and Context
Working on the dark mode feature I noticed a bunch of weird react warnings, at the time I thought the app was a simple client side rendered SPA, but then I noticed the
hydrateRootand theprerender.tsxfile.But we are still developing in client side only mode, so.
How Has This Been Tested?
Manually
Screenshots (if appropriate):
Types of changes
Checklist:
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.