Performance: Performance

[rishabh0510rishabh]

Problem Statement

The current implementation of the code editing environment in src/components/Editor/ experiences performance degradation when handling medium-to-large code snippets. As the line count increases, users experience noticeable input lag (latency between keystroke and character appearance) and high CPU usage. This breaks the flow of the developer experience and makes the platform difficult to use for complex examples.

Current Behavior / Limitation

• Unnecessary Re-renders: Typing a single character currently triggers a reconciliation cycle for the entire Editor and Preview tree.
• Main Thread Blocking: The Preview.jsx component attempts to re-compile or re-render the output immediately upon state change, causing UI stutter.
• Lack of Memoization: Sub-components within the Editor do not implement React.memo, leading to wasted render cycles even when their specific props have not changed.

Expected Improvement

• Responsive Input: Typing should remain fluid (target: <16ms response time) regardless of the code snippet size (up to reasonable limits, e.g., 2000+ lines).
• Efficient Rendering: The Preview component should only update when necessary (potentially throttled or debounced) and should not block the editor's typing performance.
• Reduced CPU Load: Idle CPU usage should be minimal, and active typing should not spike the processor unnecessarily.

Proposed Approach

This is an Advanced task focused on React performance optimization.

1. Profiling:

   • Use the React DevTools Profiler to identify exactly which components are re-rendering unnecessarily during typing.

2. Memoization (src/components/Editor/CodeEditor.jsx):

   • Wrap the editor component and its heavy sub-components using React.memo.
   • Ensure that event handlers passed as props are stable (use useCallback) to prevent breaking memoization.

3. Optimization of Preview (src/components/Editor/Preview.jsx):

   • Implement debouncing on the code state passed to the Preview component. The preview should not attempt to update on every single keystroke, but rather after the user has paused typing (e.g., 300-500ms delay).
   • Investigate useDeferredValue (if using React 18+) to prioritize editor input over preview rendering.

4. Virtualization (Investigation):

   • If a raw textarea or a custom mapping of lines is used, integrate a virtualization library (like react-window or react-virtualized) to only render lines currently in the viewport.
   • Note: If Monaco Editor is already in use, verify that its internal virtualization is not being broken by an external container's CSS (e.g., ensure the container has a fixed height).

[github-actions]

Thank you for raising this issue!

We'll review it as soon as possible. We truly appreciate your contributions! ✨

Meanwhile make sure you've visited the README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md before creating a PR for this. Also, please do NOT create a PR until this issue has been assigned to you. 😊

[ANU-2524]

Go ahead !