mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-02-13 10:29:31 +01:00
Kaj Kowalski
5bfd762e55
- Update tsconfig to ES2024 target and bundler moduleResolution - Add dynamic imports for chart.js and recharts (bundle optimization) - Consolidate 17 useState into useReducer in sessions page - Fix 18 .js extension imports across lib files - Add type declarations for @rapideditor/country-coder - Fix platform user types (PlatformUserRole enum) - Fix Calendar component prop types - Centralize next-auth type augmentation - Add force-dynamic to all API routes (prevent build-time prerender) - Fix Prisma JSON null handling with Prisma.DbNull - Fix various type mismatches (SessionMessage, ImportRecord, etc.) - Export ButtonProps from button component - Update next-themes import path - Replace JSX.Element with React.ReactElement - Remove obsolete debug scripts and pnpm lockfile - Downgrade eslint to v8 for next compatibility
728 B
728 B
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Subscribe to Derived State | MEDIUM | reduces re-render frequency | rerender, derived-state, media-query, optimization |
Subscribe to Derived State
Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
Incorrect (re-renders on every pixel change):
function Sidebar() {
const width = useWindowWidth() // updates continuously
const isMobile = width < 768
return <nav className={isMobile ? 'mobile' : 'desktop'} />
}
Correct (re-renders only when boolean changes):
function Sidebar() {
const isMobile = useMediaQuery('(max-width: 767px)')
return <nav className={isMobile ? 'mobile' : 'desktop'} />
}