Popular posts

Accessibility is super important. I like navigating with keys only.

However, in React, you will most likely not use something like this in production.

The custom hook's useEffect doesn't have a dependency array, meaning it will run after every re-render of the component. If you put a console.log into the useEffect inside your hook, you'll see that initially, it runs 10 times. After adding 10 tasks, it ran 67 times! The other thing is that you don't need that hook - it's just wrapping around useRef anyway.

Because you know you want to re-focus on the listHeadingRef after the user clicks delete, you can just put that code into your deleteTask function.

function deleteTask(id) { const remainingTasks = tasks.filter((task) => id !== task.id); setTasks(remainingTasks); listHeadingRef.current.focus(); }

This will save you from the constantly re-running hook, and you can remove the entire useEffect, making your code easier to understand and change.

Hope this was helpful.