Stress testing

[Sarfraz-droid]

Puck seems to lag on stress test. Are there any solutions to resolve such issue??

Example - On adding multiple lists. dnd starts lagging.

Screen.Recording.2024-08-11.at.10.40.07.PM.mov

[Sarfraz-droid]

@chrisvxd Tried fixing this. here's a workaround I implemented. Used react-virtualized-auto-sizer and conditional rendering to optimize the component renders.

Screen.Recording.2024-08-12.at.2.47.06.PM.mov

[chrisvxd]

Sorry for delay @Sarfraz-droid. It's unusual to see Puck lagging that much, but it might be environment related.

Two related tickets:

1. New drag-and-drop engine #556 - this will gut almost all of the dnd functionality, so there's no point in looking at this until that's done
2. Improve rendering performance #644 - a catch-all for various rendering issues, which would likely cover this.

I'm going to close this in favour of #644.

[Sarfraz-droid]

Hey, I was working inside puck and I found the underlying issue. Main issue is. On every drag, the entire page rerenders. Because it's currently using a nested architecture. I shifted it to storing objects in a global store. And rendering only the changed elements using zustand & useSyncExternalStore hook.

Could be something to consider but would require an entire state overhaul

Performance got improved by a lot! I guess using profiler puck had around 1500 rerenders on drag. It got reduced by 150.

[b-barry]

Hello @Sarfraz-droid ,

Could you share your implementation for the global store ?