chore: fix rerenders on files

[adithyaakrishna]

Summary

• Fix multiple renderers on the files page

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: Fix multiple rerenders

Testing

• Go to the files page and do alll actions however you used to do on Prod

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[cursor]

PR Summary

Low Risk
Low risk performance-focused refactor: primarily memoization, debounced search input, and ref-based callbacks; main risk is subtle stale-state/behavior regressions in save/delete/navigation flows.

Overview
Reduces unnecessary rerenders on the Files page by memoizing preview/components (e.g., PreviewPanel, file previews, context menus, delete modal) and stabilizing callbacks via refs (e.g., handleSave, handleDelete, context-menu actions) to avoid dependency churn.

Improves list performance by adding debounced search input, caching ResourceRow construction, and refactoring header/search/create configs into memoized objects; also extracts the row context menu into a dedicated FileRowContextMenu component and adjusts initial/route-driven previewMode selection to minimize reactive updates.

^{Written by Cursor Bugbot for commit 3750f6e. This will update automatically on new commits. Configure here.}

[vercel]

@adithyaakrishna is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[greptile-apps]

Greptile Summary

This PR applies a focused set of re-render optimisations to the Files page. The changes fall into four categories: (1) React.memo wrapping for leaf components (IframePreview, ImagePreview, UnsupportedPreview, PreviewPanel, HtmlPreview, SvgPreview, CsvPreview, FilesListContextMenu); (2) a ref-based mutation hook pattern to decouple stable callbacks from frequently-changing values (e.g. updateContentRef, isDirtyRef, deleteTargetFileRef); (3) a 200 ms debounced search with a manual row-identity cache in baseRows to avoid reconstructing all JSX rows on every render; and (4) converting a useEffect-based preview-mode sync to the React-recommended render-time derived-state pattern.\n\nKey observations:\n- The searchConfig object uses a JavaScript get value() getter backed by a ref rather than React state. Because ResourceOptionsBar is memo-wrapped and receives the same stable searchConfig reference, it does not re-render on each keystroke — so the search clear (✕) button appears only after the 200 ms debounce fires rather than immediately, which is a minor UX regression from the previous behaviour.\n- The rows useMemo omits listRename.setEditValue, listRename.submitRename, and listRename.cancelRename from its dependency array; these happen to be stable today, but are formally missing.\n- Neither the old nor the new searchConfig provides onClearAll, so clicking the ✕ clear button has no effect in either version.

Confidence Score: 4/5

Safe to merge; the only notable issue is a minor UX regression (200ms delay on the search clear button) that does not affect data integrity or core functionality.

All P1-critical paths (file creation, editing, saving, deletion, renaming) are unaffected. The memo and ref-based optimisations are correct. The single real regression is the 200ms delay before the search clear button appears, which is cosmetic and bounded in duration. The missing useMemo deps are theoretically unsafe but practically stable today.

apps/sim/app/workspace/[workspaceId]/files/files.tsx — specifically the searchConfig value getter pattern and rows useMemo dependency array

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/files/files.tsx	Major rerender-reduction refactor: debounced search, row-cache memoization, ref-based callbacks, and render-time preview mode logic — search clear button visibility is delayed by the debounce and onClearAll is still missing
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx	Wraps IframePreview, ImagePreview, and UnsupportedPreview in React.memo; introduces updateContentRef pattern in TextEditor to remove updateContent from onSave's dep array — all changes are correct
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx	Wraps PreviewPanel, HtmlPreview, SvgPreview, and CsvPreview in React.memo to avoid unnecessary re-renders when parent re-renders with stable props
apps/sim/app/workspace/[workspaceId]/files/components/files-list-context-menu/files-list-context-menu.tsx	Wraps FilesListContextMenu in React.memo — straightforward optimization with no issues

Sequence Diagram

sequenceDiagram
    participant User
    participant Input as Search Input (DOM)
    participant RSB as ResourceOptionsBar (memo)
    participant Files as Files Component
    participant Ref as searchValueRef
    participant Timer as Debounce Timer

    User->>Input: types character
    Input->>Files: onChange → handleSearchChange(value)
    Files->>Ref: searchValueRef.current = value
    Files->>Timer: clearTimeout + setTimeout 200ms
    Note over RSB: No re-render — searchConfig ref is stable

    Timer-->>Files: 200ms elapsed → setDebouncedSearchTerm(value)
    Files->>Files: re-render triggered
    Files->>RSB: search={searchConfig} (same reference)
    RSB->>Ref: search.value getter → searchValueRef.current
    RSB->>Input: value = current ref value (correct)
    Note over RSB: Clear button (✕) NOW visible (200ms late)

Loading

_{Reviews (1): Last reviewed commit: "chore: fix rerenders on files" | Re-trigger Greptile}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 27, 2026 0:59am