Add displayName to React components for DevTools visibility

Merged
MA
2mo ago
+308-18

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