fluent-state

Fluent-State provides a simple yet powerful solution for local state management in React applications, emphasizing a reactive and immutable approach. This library offers a tiny footprint of approximately 2.4kb, utilizing a proxy-based React hook to manage deeply nested, reactive state with built-in effects, eliminating the need for complex reducers or boilerplate code.

Why Choose Fluent-State?

Fluent-State aims to replace traditional hooks like useState, useReducer, and useEffect by providing a unified, fluent API. Key benefits include:

• An intuitive getter/setter API that feels like plain JavaScript.
• Efficient and immutable updates processed internally.
• Automatic dependency tracking, requiring no manual management.
• Natural handling of deeply nested objects and arrays, simplifying state management.
• Avoidance of magic or overly complex APIs while maintaining performance.

Key Features

• Fluent API: Utilize getter/setter functions like state.user.name("Alice") to manipulate state.
• Immutable Updates: Updates are processed without modifying the original state, ensuring React compatibility.
• Auto-tracked Effects: Effects are managed automatically with minimal setup.
• Reactive Computed State: Use the compute function to derive values that update responsively to changes.
• Lightweight: With a bundle size around 2kb, it remains unobtrusive in applications.
• TypeScript Support: Enjoy full TypeScript compatibility with precise typings.

Example Usage

Here’s an example of how easy it is to manage state using Fluent-State:

import { useFluentState } from "fluent-state";

function Counter() {
  const [state, effect] = useFluentState({ count: 0 });

  effect(() => {
    console.log("Count changed:", state.count());
  });

  return (
    <> 
      <p>Count: {state.count()}</p>
      <button onClick={() => state.count((c) => c + 1)}>Increment</button>
    </>
  );
}

Additional Features

• Computed State: The compute function enables the creation of derived state that updates automatically based on watched dependencies, streamlining common React patterns.
• Robust Nested State Management: Easily manage complex states with nested objects and arrays while tracking changes efficiently.

Roadmap and Community

Future enhancements include plugins for persistence and devtools integration to improve development experience. Community contributions are highly encouraged as the project continues to evolve, enhancing its robustness and features further.

For more detailed examples and interactive demos, explore the live demo on CodeSandbox or view the live demo on StackBlitz.

Fluent-State stands out as a modern approach to state management in React, promoting simplicity, efficiency, and the inherent power of reactivity.