@trap_stevo/tidesync

🌊 TideSync – The Future of Real-Time State Management

Command the flow of real-time data like never before.
TideSync obliterates state inconsistencies, delivering instantaneous, fine-grained reactivity with WebSocket-driven precision. Built for speed, scalability, and dynamic event synchronization, it powers live dashboards, multiplayer experiences, chat systems, and beyond.

🌟 Zero unnecessary re-renders
🌟 State exists only when needed – no wasted memory
🌟 Effortless state derivation – eliminate unnecessary useEffects
🌟 Auto-reconnects with intelligent event recovery

💥 TideSync doesn’t just manage state – it unleashes it.

---

🚀 Features

✅ Real-time, WebSocket-driven state updates – No polling, just instant synchronization.
✅ Fine-grained subscriptions – Only affected components re-render.
✅ Derived state support – Eliminates useEffect overhead.
✅ Lazy-loaded state – If it’s not used, it doesn’t exist.
✅ Auto-reconnection & event persistence – Even unstable connections stay functional.
✅ Blazing-fast event handling – Built for high-performance apps.

---

🛆 Installation

npm install @trap_stevo/tidesync

---

🛠 Usage

1️⃣ Wrap Your App with TideSyncProvider

import { TideSyncProvider } from "@trap_stevo/tidesync";

function App() {
    return (
        <TideSyncProvider tideURL="ws://localhost:8080">
            <MainComponent />
        </TideSyncProvider>
    );
}

---

2️⃣ Instantly Sync State Across Components with useTideSyncState

import { useTideSyncState } from "@trap_stevo/tidesync";

const Counter = () => {
    const [count, setCount] = useTideSyncState("count", 0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};

🔥 State updates are broadcasted in real-time across all components!

---

3️⃣ Optimize Performance with useTideDerivedState

import { useTideSyncState, useTideDerivedState } from "@trap_stevo/tidesync";

const ComputedComponent = () => {
    const [count] = useTideSyncState("count", 0);
    const doubled = useTideDerivedState("doubled", () => count * 2);

    return <p>Doubled Count: {doubled}</p>;
};

🔥 No re-renders, no extra computations – just pure speed.

---

4️⃣ Advanced Usage – Custom Event Names & Configuration

<TideSyncProvider
    tideURL="ws://localhost:8080"
    socketName="LiveSync"
    eventNames={{
        count: "update_count",
        users: "sync_users"
    }}
    maxReconnectionAttempts={Infinity}
    reconnectionAttempts={5}
    maxReconnectDelay={10000}
>
    <App />
</TideSyncProvider>

🔥 Tailor TideSync to your application’s needs.

---

💡 Best Practices

• Use Derived State for Computations: Instead of using useEffect for calculations, prefer useTideDerivedState.
• Minimize Broadcasts: Only broadcast state updates when necessary by setting broadcast = false.
• Use Event Mapping for Organized Data: Assign custom event names to keep your WebSocket events structured.
• Handle Reconnection Smartly: Set maxReconnectionAttempts appropriately to maintain a stable experience.

---

🔎 Troubleshooting

State Not Updating Across Components?

Ensure you’re using useTideSyncState within a TideSyncProvider and the WebSocket connection is active.

Experiencing Delays in Updates?

Check your network stability and confirm that the eventNames mapping aligns correctly with the WebSocket events.

WebSocket Keeps Disconnecting?

Increase maxReconnectionAttempts or adjust maxReconnectDelay in TideSyncProvider.

---

🌊 TideSync – The Ultimate Real-Time State Manager!

Eliminate state inconsistencies. Command real-time data like never before.
🌟 Fast. 🌟 Scalable. 🌟 Unstoppable.