do not use react lazy

[adhami3310]

No description provided.

[codspeed-hq]

CodSpeed Performance Report

Merging #6033 will not alter performance

_{Comparing do-not-use-react-lazy (c313c36) with main (bf49c88)}

Summary

✅ 8 untouched

[greptile-apps]

Greptile Overview

Greptile Summary

Replaced React's lazy() with custom async loading in the ClientSide wrapper to handle dynamic imports for NoSSR components. The new implementation uses useEffect to asynchronously load components via import() and updates state when loaded, maintaining the same client-side-only rendering behavior without relying on React's lazy loading API.

Key changes:

• Modified ClientSide function in reflex/compiler/templates.py to await component() call and manually set the loaded component
• Removed React lazy import from NoSSRComponent._get_imports()
• Updated dynamic import generation in both NoSSRComponent and plotly to pass function directly instead of wrapping with lazy()

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-structured and maintain the same functional behavior while replacing React's lazy with a custom implementation. The async loading logic is correct with proper state management, and all instances of React lazy usage have been consistently removed across the codebase
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
reflex/compiler/templates.py	5/5	Updated ClientSide function to manually handle async component loading with useEffect instead of using React's lazy, correctly wrapping the component in a function setter
reflex/components/component.py	5/5	Removed React lazy import and updated dynamic import generation to work with new ClientSide implementation, eliminating lazy() wrapper
reflex/components/plotly/plotly.py	5/5	Updated plotly dynamic import to work with new ClientSide implementation, removing lazy() wrapper

Sequence Diagram

sequenceDiagram
    participant User
    participant ClientSide
    participant Component
    participant DynamicImport

    User->>ClientSide: Render NoSSRComponent
    ClientSide->>ClientSide: useState(null) - Component initially null
    ClientSide->>ClientSide: useEffect() triggered
    ClientSide->>DynamicImport: load() - Call async function
    DynamicImport->>DynamicImport: await component() - Execute import()
    DynamicImport->>Component: Load module
    Component-->>DynamicImport: Return component
    DynamicImport->>ClientSide: setComponent(() => comp)
    ClientSide->>User: Render Component with props and children

Loading

[greptile-apps]

_{3 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}