Modal in a list
Hi i'd like to ask for best practice for these kind of implementation
lets say i have a CRUD feature that the list could go on to hundreds
each row have their own delete button and when clicked would show up Delete Modal
i have 2 idea about how to implement these modal
1. put modal inside each mapped items, so if theres 100+ row then there's gonna be 100+ delete modal, ofc i'd put it inside a lazy load/dynamic imports
or
2. I just have 1 modal, then when button clicked mutate a global state to open modal and pass the data that i need inside
if performance is what im looking for, which way i need to implement ? thanks!
or if you have any suggestion how to implement these better please let me know
6 Replies
personally i'm a fan of the 1 modal for 100 buttons approach using something like zustand to manage the state
I've gone for the second approach, and it most certainly much more performant. Even if lazy-loading the 100+ modal components. IMO it makes for cleaner code with less callback hell as well but tha's probably very subjective
I had this problem in my app. I would say you should default to having a modal per item until it becomes a problem because this will allow you to cleanly play any in / out animations. If it IS a problem however, (2) will definitely perform better
in practice the animation problem ONLY matters for the out animation because if you do things the way react wants you to your modal CAN fade in, but it cant fade out because it doesnt exist anymore
if that makes sense
its subtle, but i did just want to point it out
and if you dont care about the animations just go for (2)
I would go even further instead of having a delete button appear billion times in a row I would have a way of selecting one or many and have a contextual tool bar at the top with actions where you can delete multiple at a time.
Having lots of the the same button with the same text technically do something different or that goes somewhere different is bad accessibility unless you have custom aria labels being explicit to make a distinction between each button.
I got for second option and just use state to select.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View