| function TodoList({ todos, filter }) { | |
| const [newTodo, setNewTodo] = useState(''); | |
| // ✅ This is fine if getFilteredTodos() is not slow. | |
| const visibleTodos = getFilteredTodos(todos, filter); | |
| // ... | |
| } | |
| import { useMemo, useState } from 'react'; | |
| function TodoList({ todos, filter }) { | |
| const [newTodo, setNewTodo] = useState(''); | |
| const visibleTodos = useMemo(() => { | |
| // ✅ Does not re-run unless todos or filter change | |
| return getFilteredTodos(todos, filter); | |
| }, [todos, filter]); | |
| // ... | |
| } | |
| import { useMemo, useState } from 'react'; | |
| function TodoList({ todos, filter }) { | |
| const [newTodo, setNewTodo] = useState(''); | |
| // ✅ Does not re-run getFilteredTodos() unless todos or filter change | |
| const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]); | |
| // ... | |
| } |