๐๐ฎ๐๐ฎ๐ฆ๐ฐ๐ฟ๐ถ๐ฝ๐ ๐ฃ๐ฟ๐ผ๐ ๐ ๐๐ผ๐ฟ ๐๐ฎ๐๐ฎ ๐๐ฟ๐ถ๐ฑ๐
You move a lot of data. You use big grids. Some clients need 400k rows and 5k columns. Most people use event systems to update data. You create handlers for:
- Cell edits
- Range fills
- Copy and paste
- Row grouping This leads to too many handlers. One feature adds one event. One edge case adds one handler.
Make the data source reactive. Wrap your source in a Proxy. The grid reads data through the get trap. The grid writes data through the set trap. The grid sees normal objects. You control how reads and writes happen.
The grid does not need to know your store architecture. Your data lives in:
- Plain arrays
- Maps
- Remote caches
- Local databases The grid reads a property. The proxy routes it to your real data model.
This pattern is a bridge. The row object becomes an adapter. You stop treating every event as a data pipeline. Use events for:
- Validation
- Analytics
- Permissions Use proxies for data sync.
Follow these rules:
- Do not create proxies in render loops.
- Keep proxy identity stable.
- Avoid mixing logic in events and setters.
- Watch performance with large datasets.
This changes how you think about data flow. The component does not own the flow. The object looks simple. The object is smart inside.
Source: https://dev.to/revolist/javascript-proxy-one-more-way-to-use-it-i-wish-id-known-3-years-ago-40lk