ESLint errors in UI components (react-refresh/only-export-components, react-hooks/purity) #2

New issue

Closed

opened 2026-05-11 06:04:46 +00:00 by Mark · 0 comments

Mark commented

2026-05-11 06:04:46 +00:00

Owner

Description

Running npm run lint produces 8 errors across UI components:

Errors (7 × react-refresh/only-export-components)

Files that export both components and non-component values (variants, constants):

badge.tsx (line 46)
button-group.tsx (line 82)
button.tsx (line 62)
form.tsx (line 159)
navigation-menu.tsx (line 167)
sidebar.tsx (line 725)
toggle.tsx (line 45)

Error (1 × react-hooks/purity)

sidebar.tsx (line 611): Math.random() called inside useMemo during render — impure function in render path.

Suggested Fix

Use a new file to share constants/functions vs. components for the react-refresh issues
Replace Math.random() in the sidebar Skeleton component with a stable seed or deterministic approach

## Description Running `npm run lint` produces 8 errors across UI components: ### Errors (7 × react-refresh/only-export-components) Files that export both components and non-component values (variants, constants): - `badge.tsx` (line 46) - `button-group.tsx` (line 82) - `button.tsx` (line 62) - `form.tsx` (line 159) - `navigation-menu.tsx` (line 167) - `sidebar.tsx` (line 725) - `toggle.tsx` (line 45) ### Error (1 × react-hooks/purity) - `sidebar.tsx` (line 611): `Math.random()` called inside `useMemo` during render — impure function in render path. ## Suggested Fix 1. Use a new file to share constants/functions vs. components for the react-refresh issues 2. Replace `Math.random()` in the sidebar Skeleton component with a stable seed or deterministic approach