How debugging for accessibility helped me finally understand useRef

i read your blog and it's amazing . I wanted some help , how did you add table of contents to your blog.

Nice to see other developers working on accessibility. I've started writing here for the same reason.

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.

Pretty interesting! Thanks for your contribution to DebuggingFeb. :)

Learned