Optimize React rendering with memoization and pre-filtered lists

[Copilot]

Problem

React app recreated all handlers on every render and performed conditional filtering during map iteration, causing unnecessary re-renders and wasted cycles.

Changes

Memoization

• Wrapped all event handlers in useCallback with minimal dependencies
• handleEdit now uses functional state update to eliminate todos dependency
• Added useMemo for filtered todos list

Rendering Optimization

Before: Conditional check per item during render

{todos.map((item) => (
  (showFinished || !item.completed) &&
  <div key={item.id}>...</div>
))}

After: Pre-filtered list

const filteredTodos = useMemo(() => {
  return showFinished ? todos : todos.filter(item => !item.completed)
}, [todos, showFinished])

{filteredTodos.map((item) => <div key={item.id}>...</div>)}

State Updates

Changed all setTodos calls to functional updates (prevTodos => ...) to prevent stale closures and reduce useCallback dependencies.

Cleanup

• Removed unused React import from Navbar
• Added .gitignore for node_modules/dist

Original prompt

Identify and suggest improvements to slow or inefficient code.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
tasklet	Ready	Preview, Comment	Jan 25, 2026 4:57pm