Sign up
View stargazers12Sign up

refactor(web): ComposerControlsBar renders without a memo() wrapper#23093

merged1
main
refactor/split3-chatview-controls-bar
opened21h agobyJJulius Marminge
1 files changed
View on GitHubTwo-way sync enabledPR last imported 21h ago

ComposerControlsBar was wrapped in memo() in #23058. apps/web compiles with the React Compiler and has no manual memo anywhere else, so the wrapper is the odd one out.

This drops it. The compiler already caches the <ComposerControlsBar …/> element in ChatComposer: every prop passed is either a cached value or a stable callback, so when the props are unchanged the parent hands React the same element and the subtree bails out, just as memo did. No parent change was needed.

Renders (total committed fibers, Codex model, server thread, median of 3):

Interactionwith memowithout memo
Type 20 chars167154
Type 20 chars with an image attached122122
Open the slash menu444431
Traits Medium <-> High281281

ComposerControlsBar, ComposerModelPicker and TraitsPicker render 0 times while typing in both columns. The small drops are sidebar tooltip noise, not this change.

Tested:

  • apps/web typecheck, lint on the touched file.
  • React Compiler coverage test for ComposerControlsBar.tsx and ChatComposer.tsx: 0 bailouts.
  • Hands-on in a dev build: model picker opens with its list, the runtime mode combobox lists its 4 modes, traits flip between Medium and High, typing with an image attached.

🤖 Generated with Claude Code

Checks

All checks passed

Added 1 commit

  • refactor(web): ComposerControlsBar drops its memo() wrapper4d5d85a
CcoderabbitaiBot21h ago
Synced from GitHub

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Path: .coderabbit.config.ts
  • Review profile: CHILL
  • Plan: Team
  • Run ID: fe91787b-e339-4a54-a571-f88f3a3c583c
📥 Commits

Reviewing files that changed from the base of the PR and between beec3c8b30cecbd61383339cde42374282d1dee3 and 4d5d85a12e0d632a56dacb4849a956d4ec1d87b8.

📒 Files selected for processing: 1
  • apps/web/src/components/chat/ComposerControlsBar.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 4 remain after this review.

📝 Walkthrough

ComposerControlsBar is now exported as a regular function instead of a memoized component. Its props and rendered behavior remain unchanged.

Changes: Composer controls

Layer / File(s)Summary
Remove component memoization
apps/web/src/components/chat/ComposerControlsBar.tsx		The component is now a regular exported function. The React memo import and wrapper are removed.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Refactor

Merge Risk: ⚪ Minimal · up to 4d5d8

The component export change preserves behavior and is ready to merge.

Pre-merge checks: Passed 4
Check nameStatusExplanation
Title checkPassedThe title clearly and concisely identifies the main change: removing the memo() wrapper from ComposerControlsBar.
Description checkPassedThe description clearly explains the rationale, implementation, performance observations, and focused verification. It does not use the template headings or explicitly document scope approval, but it …
Linked Issues checkPassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes checkPassedCheck skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description clearly explains the rationale, implementation, performance observations, and focused verification. It does not use the template headings or explicitly document scope approval, but it is otherwise sufficiently complete and specific.

✨ Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

MmacroscopeappBot21h ago
Synced from GitHub

Approvability

Verdict: Approved at 4d5d85a

Macroscope's review found this PR approvable — This one-file refactor removes redundant manual memoization from a React Compiler-enabled component without changing its props, rendered controls, or event behavior. The caller retains compiler-backed element caching, keeping the change limited to render optimization.

You can add or adjust custom eligibility rules. Learn more.