A light state management with React syntax.

By using Reactter you get:


  • Use familiarized syntax such as UseState, UseEffect, UseContext, Custom hooks and more.
  • Create custom hooks to reuse functionality.
  • Reduce significantly boilerplate code.
  • Improve code readability.
  • Unidirectional data flow.
  • An easy way to share global information in the application.



class AppContext extends ReactterContext {
    // You can create the state here and add it to dependencies in 
    // constructor with listenHooks() */
    final username = UseState<String>("");


    // We recommend to give the context to the state this way:
    // With this, you no longer need to put it in listenHooks()
    // which is cleaner */
    late final firstName = UseState<String>("Leo", context: this);
    late final lastName = UseState<String>("León", context: this);

You can also create any other classes and set an UseState prop to share the state.

class Global {
  static final currentUser = UseState<User?>(null);

But if you want reactive widgets you need to use ReactterContext or pass this prop to a ReactterContext.

See Custom Hooks for an example.




      userName.value = firstName + lastName;

    }, [firstName, lastName]);


It should be used inside a ReactterContext constructor.

UseProvider and UseContext

    contexts: [
            () => AppContext(),
            init: true,
    builder: (context, _) {
        final appContext1 = context.of<AppContext>();

        final appContext2 = context.of<AppContext>((ctx) => [ctx.userName]);

        final appContext3 = context.ofStatic<AppContext>();

        return Text(appContext1.username.value);

Reading values

As you can see, in the example above, you can read the value from context in three different ways:

  1. context.of<AnyContext>(): Get all the states listeners of context.
  2. context.of<AnyContext>((ctx) => [ctx.anyState]): Get the listener of an specific state to rebuild, you can use as many you need.
  3. context.ofStatic<AppContext>(): Read all the states, but no rebuild when change.


class AppContext extends ReactterContext {

    late final userName =
        UseAsyncState<String>("Init state", fillUsername, context: this);

    Future<String> fillUsername() async {
        final userFromApi = await getUserName();

        return userFromApi;

    // You should use anyAsyncState.resolve() to resolve the state


You can execute resolve() wherever you want.



    standby: (value) => Text("Standby: ${value}"),

    loading: () => const CircularProgressIndicator(),

    done: (value) => Text(value),

    error: (error) => const Text("Unhandled exception: ${error}"),

<AnyAsyncState>.when receives four functions an always return a widget to handle the view depending from the status of the state:

  • standby: When the state has the initial value.
  • loading: When the request for the state is retrieving the value.
  • done: When the request is done.
  • error: If any errors happens in the request.

Custom hooks

mixin UseCart on ReactterHook {
    late final cart = UseState<Cart?>(null, context: this);

    addProductToCart(Product product) {
        final oldProducts = cart.value.products;

        cart.value = cart.value?
            .copyWith(products: [...oldProducts, product]);

You can use it like this:

class UserContext extends ReactterContext with UseCart {
  final user = Global.currentUser;

  UserContext() {
    UseEffect(() {
      cart.value = api.getUserCart(user.value?.id ?? 0);
    }, [user]);

We recommend to use mixins for create hooks due the ease of injecting variables, but any class that extends from ReactterHook can be a Custom hook.

Lifecycle methods on ReactterContext:

awake() {}

willMount() {}

didMount() {}

willUnmount() {}

All the ReacterContext has this lifecycle methods:

  • awake: Executes when the instance starts building.
  • willMount: Executes before the dependency widget will mount in the tree.
  • didMount: Executes after the dependency widget did mount in the tree.
  • willUnmount: Executes when the widget removes from the tree.


We are working in a documentation page aswell creating Youtube tutorials.

We want keeping adding features for Reactter, those are some we have in mind order by priority:


  • Tests
    • Make Reactter easy to test.
  • Creates
    • Have the option for create same instances from a context with different ids, usefull for lists of widgets where each widget goint to have his own state.
  • Lazy UseContext
    • Don’t initialize a context until you will need it.
  • Child widget optional for render
    • Save a child which won’t re-render when the state change.
  • ReactterComponent
    • A StatelessWidget who going to expose a ReactterContext state for all the widget, without needing to write context.of<T>(), just state.someProp.
  • Equatable
    • For remove the prop alwaysUpdate in state when you are working with Objects or List.

ReactterComponents (new package)

  • Buttons (Almost ready for release)
  • App Bars
  • Bottom Bars
  • Snackbars
  • Drawers
  • Floating actions
  • Modals
  • Inputs


Reactter has just left development status, you can use it in production with small applications but with caution, we are working to make it more testable and consider all possible situations of state management. The API could changes in the future due the Roadmap.


If you want to contribute don’t hesitate to create an issue or pull-request in Reactter repository.

You can:

  • Add a new custom hook.
  • Add a new widget.
  • Add examples.
  • Report bugs.
  • Report situations difficult to implement.
  • Report an unclear error.
  • Report unclear documentation.
  • Write articles or make videos teaching how to use Reactter.

Any idea is welcome!


Copyright (c) 2022 2devs.io


View Github