[Proposal] Migrate State Management to Zustand for Performance Optimization

[Leoocast]

Hi, I found some problems, let me know if I'm missing another ones:

1. Unstable Function References

Functions returned from custom hooks (handleFileSelect, startSharing, stopSharing, etc.) are recreated on every render since they're not wrapped in useCallback. This causes unnecessary re-renders in child components receiving these as props.

2. Granularity of State Updates

The hooks use multiple useState calls that update in sequence:

setIsTransporting(true)
setIsCompleted(false)
setTransferProgress(null)
setTransferMetadata(null)

3. High-Frequency Progress Updates

The transfer-progress event updates state via a 50ms interval (20 updates/second).
Every component using useSender() re-renders on each update, even those not displaying progress.

4. Prop Drilling

State and callbacks flow through multiple layers (Sender → SharingActiveCard → children),
creating coupling and making selective optimization difficult.

---

I'm happy to implement a refactor. I have experience with this pattern from building Lofi Valley Engine, which uses a headless architecture with Zustand for state management.

If you want, you can enter here: https://dev.lofivalley.com/crops_farm and press the x20 button and try plant crops (press I to open inventory and drag the seeds to the toolbar), you will see that don't matter the time, when you watered the crops, the tooltip updates very well and no performance issues.

Let me know your thoughts!

[tonyantony300]

Hi @Leoocast ,

Thank you for your suggestions.

Yes, these changes along with state management are relevant and will improve maintainability in the long run. Looking forward to adding them. Please proceed. You can join our discord here: https://discord.gg/5tXSNv6zyC