- 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.
824 B
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])