Im not very familiar with the d3 library, but I've been playing around with this family tree repo on react which utilizes the tree visualization and customizes it to work with family trees, and it works great for a dataset of less than 1000 members, but anything above that it immediately starts to have performance problems. It starts to freeze the browser and in most cases it crashes, and im sure its from rendering because i moved all the calculations and dataset building to a web worker and made sure that it only crashes when it gets to the svg rendering functions. I read that if i switch to canvas it works better but i want the tree to be interactable like clocking on each family member node to view more details (and also I'm not sure how to switch it to canvas). I also want the entire tree to be visible at once so I didn't try using UI virtualization (not even sure if its possible in this case) Are there any UI react optimization hacks I can try to get this working?

This is the family-tree code after I made so modifications to it (Yeah I know its messy this was supposed to be a 3 day project not 3 months) Any input is appreciated :)

Im expecting the library to render the entire family tree even with a bit of async load times, I havent tried any implementations but read through some options, I added webworkers but those cant interact with the DOM so theyre only good for the calculations, I read that using a canvas tree from d3 helps but I couldnt find a good documentation for it and im not sure how I need to change the code to switch.