Repository navigation
refactor(renderer): use function declarations for React components - #3421
Merged
Merged
Conversation
Enable oxlint's react/function-component-definition rule (named components as function declarations; anonymous components stay arrow functions) and migrate the renderer's component definitions from React.FC arrows to function declarations, moving each prop type onto its parameter and pruning the FC imports whose only use was the definition. React.FC is retained where it types a component value (a prop or a return type), which the rule does not govern. No runtime behavior change: component output, props, and rendering are identical. Verified with pnpm check (format, lint, types), pnpm test (1901 tests, icon snapshots unchanged), and a lint probe confirming an arrow component now fails the check.
|
afonsojramos
approved these changes
Oct 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Enable oxlint's
react/function-component-definitionrule and migrate the renderer's React components to function declarations, so the codebase keeps one enforced component style instead of drifting betweenReact.FCarrows and declarations.Changes
vite.config.mts: enablereact/function-component-definitionwithnamedComponents: 'function-declaration'andunnamedComponents: 'arrow-function'. TheunnamedComponentsoption keeps anonymous inline components — e.g. thecreateWrapperrender wrappers inhooks/*.test.tsx— legal, so they are untouched.src/renderer/**(79 files): convert 83 component definitions fromexport const X: FC<Props> = (props) => ...tofunction X(props: Props), moving each prop type onto its parameter and pruning theFCimports whose only use was the definition.React.FCis retained where it types a component value rather than a definition — the rule does not govern those:routes/Accounts.tsx(getScopeIconreturn type)components/avatars/AvatarWithFallback.tsx,components/filters/TokenSearchInput.tsx,components/metrics/MetricPill.tsx(props)CONTRIBUTING.md: document the convention.No runtime behavior change: component output, props, and rendering are identical.
Verification
pnpm checkpasses;tsc --noEmitexits 0.pnpm test: 188 files / 1901 tests pass, with the icon snapshots unchanged.rg -U 'return;\s*\n\s*<' srcreturns nothing — the expression-body rewrites did not leave the unreachablereturn; <JSX>pattern (theicons/LogoIcon.tsxleadingoxlint-disablecomment is preserved inside the returned expression).pnpm lint:checkfails on it, then removed it and confirmed the check passes again.: FC<Props>annotation was stripped first, since the fixer will not rewrite across an annotation), withtscas the guard.Notes
scripts/visual.shrequires the pinned Playwright Docker image and refuses to run on the host. Relying on the Visual Regression CI job for that.