OptiFlow (Zero-Latency CRUD Engine)

A lightweight data-fetching package with auto-caching, deduplication, and a "Zero-Latency" Optimistic CRUD Engine.

Installation

npm install optiflow react

Usage in React (Zero-Latency CRUD)

The useCrud hook automatically handles Optimistic UI Updates. When you create, update, or delete an item, the UI updates instantly (0ms delay). If the backend API fails, the engine automatically rolls back the UI to its previous state and shows an error toast.

import React from 'react';
import { useCrud } from 'optiflow';

function TodoApp() {
  // 1. Fetch initial data
  const { data, isLoading, createData, updateData, deleteData } = useCrud(
    'todos', 
    () => fetch('/api/todos').then(res => res.json())
  );

  // 2. Create (Optimistic Update)
  const handleAdd = () => {
    const newTodo = { title: "New Task", completed: false };
    
    // UI updates INSTANTLY, API call happens in the background
    createData(
      newTodo, 
      (item) => fetch('/api/todos', { method: 'POST', body: JSON.stringify(item) }).then(r => r.json())
    );
  };

  // 3. Update (Optimistic Update)
  const handleToggle = (todo) => {
    updateData(
      todo.id || todo._id, 
      { completed: !todo.completed }, 
      (updated) => fetch(`/api/todos/${todo.id || todo._id}`, { method: 'PUT', body: JSON.stringify(updated) }).then(r => r.json())
    );
  };

  // 4. Delete (Optimistic Update)
  const handleDelete = (id) => {
    deleteData(
      id, 
      (id) => fetch(`/api/todos/${id}`, { method: 'DELETE' })
    );
  };

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <button onClick={handleAdd}>Add Todo</button>
      <ul>
        {data?.map(todo => (
          <li key={todo.id || todo._id}>
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.title}</span>
            <button onClick={() => handleToggle(todo)}>Toggle</button>
            <button onClick={() => handleDelete(todo.id || todo._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

Features

• Zero-Latency UI: Frontend doesn't wait for the backend to complete CRUD operations.
• Auto-Rollback: Automatically undoes the UI change if the backend fails.
• Built-in Error Toasts: Shows a non-intrusive toast notification on failure.
• Framework Agnostic Core: The core logic is separate, allowing easy integration with Vanilla JS or other frameworks.