Skip to content

[perf] Replace static inline styles in RelatedSuggestions with CSS classes#107

Open
github-actions[bot] wants to merge 1 commit intomainfrom
perf/related-suggestions-css-classes-ff0f4b7fca7cd28f
Open

[perf] Replace static inline styles in RelatedSuggestions with CSS classes#107
github-actions[bot] wants to merge 1 commit intomainfrom
perf/related-suggestions-css-classes-ff0f4b7fca7cd28f

Conversation

@github-actions
Copy link
Copy Markdown

Summary

Replaces 2 static style=\{\{}} objects on Text components in RelatedSuggestions.tsx with CSS module classes.


Tier

Tier 2 — Render & API Performance (inline style=\{\{}} elimination)


Baseline

RelatedSuggestions.tsx rendered two Text components with static inline style objects:

// Line 110 — suggestion title
(Text style=\{\{ fontWeight: 600 }}){suggestion.title}(/Text)

// Lines 115–119 — suggestion reason
(Text style=\{\{ fontStyle: 'italic', color: 'var(--fgColor-muted)' }})
  {suggestion.reason}
(/Text)

Both objects are static (their values never change based on props or state). Static inline style objects create a new object reference on every render, forcing React to diff the style prop even though nothing changed, and the browser to re-evaluate computed styles unnecessarily.


Fix

Added two CSS classes to the .relatedSuggestion* section in ChallengeSandbox.module.css:

.suggestionTitle {
  font-weight: var(--base-text-weight-semibold);
}

.suggestionReason {
  font-style: italic;
  color: var(--fgColor-muted);
}

Updated RelatedSuggestions.tsx to use className instead:

(Text className={styles.suggestionTitle}){suggestion.title}(/Text)
(Text className={styles.suggestionReason}){suggestion.reason}(/Text)
```

No visual difference — the rendered output is identical.

---

## Result

- 2 static `style=\{\{}}` objects removed from the render hot path
- Styles are now browser-cached as part of the CSS module (computed once, referenced by class name)
- Consistent with the project-wide pattern of using CSS modules over inline styles

---

## Verification

```
Test Files  3 failed | 60 passed (63)    same 3 pre-existing failures (github/client.test.ts)
      Tests  10 failed | 1025 passed (1035)    no new failures

All 1025 passing tests continue to pass. The 10 pre-existing failures are unrelated (GitHub auth mock issues in client.test.ts).

Generated by Daily Performance Improver

Replace two static inline style objects on Text components in
RelatedSuggestions.tsx with CSS module classes:

- style={{ fontWeight: 600 }} → .suggestionTitle class
- style={{ fontStyle: 'italic', color: 'var(--fgColor-muted)' }} → .suggestionReason class

Static style objects passed to JSX create new object references on every
render, causing extra style recalculation work in the browser. Moving them
to CSS classes allows the browser to cache the computed styles.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions
Copy link
Copy Markdown
Author

Pull request created: #107

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants