Add displayName to React components for DevTools visibility

[masenf]

Type of change

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

Description

This PR adds displayName properties to all compiled React components and contexts, improving visibility in React DevTools. Without explicit display names, DevTools shows generic labels like Context.Provider, Anonymous, or Component for every instance in the tree, making it difficult to debug component hierarchies.

Changes:

1. Context template (context_template): Added displayName assignments for:

   • Built-in contexts: ColorModeContext, UploadFilesContext, DispatchContext, EventLoopContext
   • State contexts: Named as StateContext(python.state.name) to identify which Python state they carry
   • ClientSide wrapper: Now a named function component with display name reflecting the wrapped component

2. Page template (page_template): Every page compiles to a component named Component, so the route is now carried in its displayName (e.g., Component(about), Component(test/[dynamic])) to distinguish pages in DevTools

3. Memo components (_render_memo_component): Added displayName assignment to exported memoized components, using either:

   • The Python function name for @rx.memo decorated components
   • The wrapped Python class name for auto-memoized components (instead of the hash-suffixed tag)

4. MemoComponentDefinition: Added optional display_name field to carry the name React DevTools should show

5. Dynamic imports: Updated ClientSide() calls to pass the component name as a second argument, enabling the wrapper to set an appropriate display name

6. Theme context (react-theme.js): Added displayName to the theme context

Test coverage

• Added 5 new unit tests in test_compiler.py covering context display names, page display names, and the ClientSide wrapper naming
• Added 3 new unit tests in test_memo.py covering memo display names, custom wrappers, and string escaping
• Added 1 new unit test in test_memoize_plugin.py covering auto-memo display names
• All existing tests pass

Checklist

• Tests pass with adequate coverage
• uv run ruff check . and uv run ruff format . clean
• uv run pyright reflex tests passes
• pyi_hashes.json updated
• News fragment added

https://claude.ai/code/session_01W4Psp6qZsEpbuRePuRVkYX

[codspeed-hq]

Merging this PR will not alter performance

✅ 27 untouched benchmarks
⏩ 8 skipped benchmarks¹

---

_{Comparing claude/displayname-context-memo-vjfh3a (ed896ee) with main (894cb95)}

Footnotes

1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[greptile-apps]

Greptile Summary

The PR adds explicit React DevTools names to generated pages, contexts, client-only wrappers, and memoized components.

• Propagates page routes and Python component names into safely serialized displayName assignments.
• Names built-in, state, and theme contexts.
• Preserves legacy ClientSide(component) calls while naming generated NoSSR wrappers.
• Adds focused compiler and memoization tests plus release notes.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
packages/reflex-base/src/reflex_base/compiler/templates.py	Generates display names for contexts, pages, client-side wrappers, and memo components while preserving module-scope page bindings.
packages/reflex-base/src/reflex_base/components/component.py	Passes safely serialized NoSSR component names into generated ClientSide wrappers.
packages/reflex-base/src/reflex_base/components/memo.py	Carries optional DevTools display names through memo definitions and labels auto-memoized components by Python class.
reflex/compiler/compiler.py	Propagates page routes into both page-compilation paths for route-specific DevTools labels.
reflex/compiler/utils.py	Resolves memo display names with the existing export name as a fallback.
packages/reflex-components-plotly/src/reflex_components_plotly/plotly.py	Supplies safely serialized Plotly component names to client-only wrappers.
packages/reflex-base/src/reflex_base/.templates/web/utils/react-theme.js	Assigns an explicit DevTools name to ThemeContext.
tests/units/compiler/test_compiler.py	Covers generated context, page, route, export-shape, and ClientSide naming output.
tests/units/compiler/test_memoize_plugin.py	Verifies auto-memoized components use their wrapped Python class names.
tests/units/components/test_memo.py	Verifies memo display-name propagation, custom-wrapper output, and string escaping.

_{Reviews (6): Last reviewed commit: "Merge branch 'main' into claude/displayn..." | Re-trigger Greptile}

[cubic-dev-ai]

All reported issues were addressed across 12 files

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[FarhanAliRaza]

Reviewed by running it, not just reading it

I checked this PR out and exercised it in a real app under examples/ — three routes (/, /about, /blog/[slug]), a root state plus a substate, an @rx.memo component, auto-memoized components, and rx.plotly for the ClientSide path. I then read the live React fiber tree, so the names below are what React DevTools actually resolves, not what the template emits.

Verified working

• Pages: Component(index), Component(about), Component(blog/[slug]), Component(404), all present under WithComponentProps. This is the exact failure mode the new docstring warns about, and it holds in dev and in a production reflex export build that I served and loaded.
• Contexts: ColorModeContext, DispatchContext, EventLoopContext, ThemeContext, and one StateContext(...) per state, substates and internal states included. Every context still unnamed in the tree comes from react-router or Radix, not from Reflex.
• Memos: memo(NamedWidget) for @rx.memo; memo(Div), memo(Button), memo(Plotly), memo(ErrorBoundary) for auto-memos. The hash-suffixed tags no longer surface.
• Client-only: ClientSide(Plot), and the lazily loaded plotly component still mounts and renders.
• Regressions: event round-trip works, the dynamic route arg resolves, the production build succeeds, the prod route module loads with no ReferenceError, and the display-name strings survive minification. No console errors or warnings on any page. ruff, pyright, and the 280 tests in the three touched test files pass.

Why changes are requested

Nothing here breaks the feature. The blocking item is (1): page_template is a shipped symbol in reflex-base, and the new parameter is required, so an out-of-tree compiler plugin that calls it raises TypeError. Items (2) and (3) are consistency cleanups worth folding into the same pass.

One informational note, no change needed: the index page reads Component(index) and the error page reads Component(404), because the value passed is the internal route key rather than the URL. That matches get_page_path, so it is self-consistent — just be aware the label is not always the URL.