Skip to content

ENG-1642 Discourse context overlay gets re-triggered every hover in a query block when view is render#989

Open
maparent wants to merge 2 commits intomainfrom
eng-1642-discourse-context-overlay-gets-re-triggered-every-hover-in-a
Open

ENG-1642 Discourse context overlay gets re-triggered every hover in a query block when view is render#989
maparent wants to merge 2 commits intomainfrom
eng-1642-discourse-context-overlay-gets-re-triggered-every-hover-in-a

Conversation

@maparent
Copy link
Copy Markdown
Collaborator

@maparent maparent commented Apr 30, 2026

https://linear.app/discourse-graphs/issue/ENG-1642/discourse-context-overlay-gets-re-triggered-every-hover-in-a-query

https://www.loom.com/share/b8b7fcfe79334491946a95b2f0530103

Diagnostic: The RenderRoamBlockString inside CellRender seems to use useEffects to clear and re-render its contents. So when React asks CellRender to recreate the virtual DOM, in particular on every mouseEnter/mouseLeave to the resultsTable, the effects re-run, and the content is re-rendered from scratch. The solution provided by Claude was to apply React.memo on the CellRender,ResultRow,ResultTable stack, so these are not re-rendered when the props are the same. We had to make sure each prop was wrapped in either useMemo or useCallback.

Note: This induced a lot of whitespace changes. The only effective changes are introducing React.memo on those three components.


Open in Devin Review

Summary by CodeRabbit

  • Refactor
    • Optimized results table component rendering for improved performance and responsiveness.

@linear-code
Copy link
Copy Markdown

linear-code Bot commented Apr 30, 2026

@supabase
Copy link
Copy Markdown

supabase Bot commented Apr 30, 2026

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 4 additional findings.

Open in Devin Review

@maparent maparent requested a review from mdroidian May 1, 2026 01:18
@mdroidian
Copy link
Copy Markdown
Member

@coderabbitai full review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 1, 2026

✅ Actions performed

Full review triggered.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 1, 2026

📝 Walkthrough

Walkthrough

Memoization optimization applied to ResultsTable.tsx. Three React components—CellRender, ResultRow, and ResultsTable—are wrapped with memo() to prevent unnecessary re-renders. CellRender is no longer exported; internal render logic remains unchanged.

Changes

Component Memoization

Layer / File(s) Summary
Import Updates
apps/roam/src/components/results-view/ResultsTable.tsx
memo is added to the React import statement.
Component Wrapping
apps/roam/src/components/results-view/ResultsTable.tsx
CellRender and ResultRow are wrapped with memo(), and displayName is set on both. ResultsTable default export is wrapped with memo().
Export Changes
apps/roam/src/components/results-view/ResultsTable.tsx
Named export of CellRender is removed; it becomes an internal memoized constant. Default export changes from ResultsTable to memo(ResultsTable).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title directly describes the bug being fixed (discourse context overlay re-triggering on hover) and aligns with the PR's objective to prevent unnecessary re-renders by memoizing components.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get your free trial and get 200 agent minutes per Slack user (a $50 value).


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
Review rate limit: 0/1 reviews remaining, refill in 60 minutes.

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

@mdroidian
Copy link
Copy Markdown
Member

@coderabbitai full review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 3, 2026

✅ Actions performed

Full review triggered.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
apps/roam/src/components/results-view/ResultsTable.tsx (1)

164-175: ⚡ Quick win

Add explicit return types to the new memoized component functions.

Both newly changed component callbacks are missing explicit return types. Please annotate them (e.g., : JSX.Element) to match repo TS rules.

Suggested patch
+type CellRenderProps = { content: string; uid: string };
 const CellRender = memo(
-  ({ content, uid }: { content: string; uid: string }) => {
+  ({ content, uid }: CellRenderProps): JSX.Element => {
     const isPage = !!getPageTitleByPageUid(uid);
     const displayString = isPage ? `[[${content}]]` : content;

     return (
       <span className="roamjs-query-link-cell">
         <RenderRoamBlockString string={displayString} />
       </span>
     );
   },
 );
@@
 const ResultRow = memo(
   ({
@@
-  }: ResultRowProps) => {
+  }: ResultRowProps): JSX.Element => {

As per coding guidelines, "Use explicit return types for functions in TypeScript".

Also applies to: 190-421

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/roam/src/components/results-view/ResultsTable.tsx` around lines 164 -
175, The memoized component callbacks are missing explicit return types; update
the CellRender memo callback (and the other memoized callback in the same file)
to annotate their function signatures with an explicit return type like ":
JSX.Element" (e.g., change "({ content, uid }: { content: string; uid: string })
=> { ... }" to "({ content, uid }: { content: string; uid: string }):
JSX.Element => { ... }"); ensure React/JSX types are available in scope if
needed and keep the memo wrapper (CellRender) unchanged otherwise.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@apps/roam/src/components/results-view/ResultsTable.tsx`:
- Around line 164-175: The memoized component callbacks are missing explicit
return types; update the CellRender memo callback (and the other memoized
callback in the same file) to annotate their function signatures with an
explicit return type like ": JSX.Element" (e.g., change "({ content, uid }: {
content: string; uid: string }) => { ... }" to "({ content, uid }: { content:
string; uid: string }): JSX.Element => { ... }"); ensure React/JSX types are
available in scope if needed and keep the memo wrapper (CellRender) unchanged
otherwise.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 33b3ed15-5a98-4915-84b9-e9065866fd3a

📥 Commits

Reviewing files that changed from the base of the PR and between 82749a3 and b0f4cf6.

📒 Files selected for processing (1)
  • apps/roam/src/components/results-view/ResultsTable.tsx

Copy link
Copy Markdown
Collaborator Author

maparent commented May 5, 2026

@mdroidian Just checking: I think you wanted me to look into why embeddings were not affected, correct? Or did you intend to do it as part of review?

@mdroidian
Copy link
Copy Markdown
Member

@mdroidian Just checking: I think you wanted me to look into why embeddings were not affected, correct? Or did you intend to do it as part of review?

I can take a look. Memoizing ResultRow and especially all of ResultsTable seems like overkill when View Type > embed doesn't have this same problem. I think it's worth investigating to see if we can identify a more focused fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants