mirror of
https://github.com/NicholaiVogel/dashore-incubator.git
synced 2026-03-30 22:38:56 +00:00
Nicholai
827f13a2db
add web-perf and vercel-react-best-practices skills from skills.sh to improve ai assistance for this next.js + cloudflare workers project. - web-perf: core web vitals analysis and performance auditing - vercel-react-best-practices: react/next.js optimization patterns - wrangler: cloudflare workers cli guidance (already existed)
1.0 KiB
1.0 KiB
| title | impact | impactDescription | tags |
|---|---|---|---|
| Use Transitions for Non-Urgent Updates | MEDIUM | maintains UI responsiveness | rerender, transitions, startTransition, performance |
Use Transitions for Non-Urgent Updates
Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.
Incorrect (blocks UI on every scroll):
function ScrollTracker() {
const [scrollY, setScrollY] = useState(0)
useEffect(() => {
const handler = () => setScrollY(window.scrollY)
window.addEventListener('scroll', handler, { passive: true })
return () => window.removeEventListener('scroll', handler)
}, [])
}
Correct (non-blocking updates):
import { startTransition } from 'react'
function ScrollTracker() {
const [scrollY, setScrollY] = useState(0)
useEffect(() => {
const handler = () => {
startTransition(() => setScrollY(window.scrollY))
}
window.addEventListener('scroll', handler, { passive: true })
return () => window.removeEventListener('scroll', handler)
}, [])
}