138 likes
·
1.2K reads
19 comments
Learned something new
fsdf
Not adding the mention in reply example.com
Test comment example2.com
exam$ple.com
Pretty interesting! Thanks for your contribution to DebuggingFeb. :)
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.
Thank you so much for your reply. I will try it out. :) I still have to learn a lot about react, but for this article, accessibility was the main point.
It's super important, especially for people learning React, to understand when they need to use certain mechanisms of React and when the same mechanisms are not just useless but even decremental in performance.
So I thought I'd give you some ideas on how you could write better React code, regardless of accessibility.
Thanks for reading my useless code review. 😄
Ákos Kőműves Oh no, please don't get me wrong! I appreciate your comment so much ! Only because I know I am not that good at React I wanted the blog post to be about the accessibility issue rather than the code itself, that's all. I already implemented the delete function you posted and checked with dev tools and console.log. Thank you so much for helping me making my code better. :)
No worries Julia Undeutsch, and thanks for the follow-up. :) I rarely comment on blog posts, but you put much effort into this, so I thought I chime in with something useful. :)
Nice to see other developers working on accessibility. I've started writing here for the same reason.
That's nice to hear, Massimo.
i read your blog and it's amazing . I wanted some help , how did you add table of contents to your blog.
You can checkout this guide: support.hashnode.com/en/articles/6541597-h…
When you are going to publish your post, a panel appear with several settings, like adding SEO, Thumbnail, url, as well as automatically adding a table of content
Very well documented
Thank you :)
Great article Julia! That's an excellent example of making proper use of useRef 👍