My-Weekly-ToDo-List/.opencode/skills/react-best-practices/rules/rerender-dependencies.md
mARTin d92a8c7210 feat: add task actions (notes/delete) and refine animation logic
- Added 'onDelete' and 'onNotes' support to TaskItem.
- Implemented hover actions (Delete and Notes icons) for tasks.
- Added Notes Modal for editing task markdown content.
- Simplified navigation animation to remove blank flash (single-phase slide-in).
- Fixed syntax error in updateTask function.
- Updated styles for modal and task actions.
2026-02-01 12:25:53 +01:00

824 B

title impact impactDescription tags
Narrow Effect Dependencies LOW minimizes effect re-runs rerender, useEffect, dependencies, optimization

Narrow Effect Dependencies

Specify primitive dependencies instead of objects to minimize effect re-runs.

Incorrect (re-runs on any user field change):

useEffect(() => {
  console.log(user.id)
}, [user])

Correct (re-runs only when id changes):

useEffect(() => {
  console.log(user.id)
}, [user.id])

For derived state, compute outside effect:

// Incorrect: runs on width=767, 766, 765...
useEffect(() => {
  if (width < 768) {
    enableMobileMode()
  }
}, [width])

// Correct: runs only on boolean transition
const isMobile = width < 768
useEffect(() => {
  if (isMobile) {
    enableMobileMode()
  }
}, [isMobile])