Hooks

Hooks are classes with the ability to use states and manage side effects. They are a fundamental concept in Reactter and are used to encapsulate logic that can be reused across the application.

API

Reactter provides the following hooks:

• UseState
• UseAsyncState
• UseReducer
• UseCompute
• UseEffect
• UseDependency

How it works

Hooks in Reactter are classes that extend RtHook and follow a special naming convention with the Use prefix. The RtHook class is responsible for binding the hook to other hooks and states, and managing the lifecycle of the hook.

Hooks in Reactter are essentially stateful entities because RtHook inherits from RtState this inheritance allows hooks to manage both state and lifecycle methods efficiently.

To manage these aspects, Hooks provide the following:

Properties and methods inherited from RtState

• debugLabel: A string that represents the label of the state object for debugging purposes.
• debugInfo: A map that contains debug information about the state object.

• update : Executes a callback function and notify its observers that the state has changed. When it is invoked, it emits two lifecycle events to signal the state transition:
  • Lifecycle.willUpdate is emitted first, indicating the impending update.
  • Lifecycle.didUpdate is emitted once the update process is complete.
• notify : Forces the state to notify its observers. Unlike update , it emits only the Lifecycle.didUpdate event, as it doesn’t involve any preparatory steps before the notification.
• bind : Establishes a connection between the state and a specific instance. This connection allows the instance to reactively update based on changes to the state. By binding the state, the instance becomes aware of changes to the state and can appropriately reflect those changes in its behavior.
• unbind : Releases the connection between the state and the instance. When unbinding, the instance will no longer receive updates from the state. This can be useful when an instance is no longer actively using the state or when it needs to detach from the state temporarily or permanently.
• dispose : Is responsible for cleaning up the state and any associated observers or resources. Disposing of the state ensures that it is properly released and no longer consumes memory or processing resources unnecessarily.

Note

While the bind , unbind and dispose methods are normally used to manage the lifecycle of a state, Reactter handles this automatically, when the state is declared inside an instance that exists within Reactter’s context via the dependecy injection, so you don’t need to worry about it(Learn more about Binding State to Dependency).

Custom hook

Reactter provides a way to create custom hooks to encapsulate logic that can be reused across the application.

There are several advantages to using custom hooks:

• Reusability: to use the same hook again and again, without the need to write it twice.
• Clean Code: extracting part of code into a hook will provide a cleaner codebase.
• Maintainability: easier to maintain. if you need to change the logic of the hook, you only need to change it once.

Creating a custom hook

To create a custom hook, you need to create a class that extends RtHook and follow the naming convention with the Use prefix.

Here’s an example of a custom hook that manages the state of a text input:

import 'package:reactter/reactter.dart';
import 'package:flutter/widgets.dart';

class UseTextInput extends RtHook {
  // This line is REQUIRED!
  final $ = RtHook.$register;

  final controller = TextEditingController();

  String _value = '';
  String? get value => _value;

  @override
  initHook() {
    UseEffect(() {
      controller.addListener(() {
        update(() => _value = controller.text);
      });

      return controller.dispose;
    }, []);
  }
}

Attention!!

To create a hook, you need to register it by adding the following line:

final $ = RtHook.$register;

It’s important to note that the states and hooks defined above this line are not linked to the hook. To avoid this, it’s recommended to place this line as the first line in the class body.

As shown in the example above, we can utilize other hooks such as UseEffect to monitor changes in the text input’s controller and ensure it is disposed when the hook is destroyed.

The update method is used to set the internal _value to the current text in the controller, which keeps the state synchronized with the input. This methods is a part of the RtHook class that allows you to update the state of the hook.

Using the hook

You can then call that custom hook from anywhere in the code and get access to its shared logic:

• my_controller.dart
• my_custom_form.dart
• use_text_input.dart
• main.dart

import 'package:flutter_reactter/flutter_reactter.dart';
import 'use_text_input.dart';

class MyController {
  final firstNameInput = UseTextInput();
  final lastNameInput = UseTextInput();

  late final fullName = Rt.lazyState(
    () => UseCompute(
      () {
        final firstName = firstNameInput.value;
        final lastName = lastNameInput.value;

        return "$firstName $lastName";
      },
      [firstNameInput, lastNameInput],
    ),
    this,
  );
}

import 'package:flutter/material.dart';
import 'package:flutter_reactter/flutter_reactter.dart';
import 'my_controller.dart';

class MyCustomForm extends StatelessWidget {
  const MyCustomForm({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RtProvider<MyController>(
      () => MyController(),
      builder: (context, myController, child) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("Custom hook example"),
          ),
          body: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                RtConsumer<MyController>(
                  listenStates: (myController) => [myController.fullName],
                  child: const Text(
                    "Full Name:",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  builder: (context, myController, child) {
                    return Row(
                      children: [
                        child!,
                        const SizedBox(width: 4),
                        Text(myController.fullName.value),
                      ],
                    );
                  },
                ),
                const SizedBox(height: 8),
                TextField(
                  decoration: InputDecoration(
                    hintText: "First Name",
                  ),
                  controller: myController.firstNameInput.controller,
                ),
                TextField(
                  decoration: InputDecoration(
                    hintText: "Last Name",
                  ),
                  controller: myController.lastNameInput.controller,
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

import 'package:reactter/reactter.dart';
import 'package:flutter/widgets.dart';

class UseTextInput extends RtHook {
  // This line is REQUIRED!
  final $ = RtHook.$register;

  final controller = TextEditingController();

  String _value = '';
  String? get value => _value;

  @override
  initHook() {
    UseEffect(() {
      controller.addListener(() {
        update(() => _value = controller.text);
      });

      return controller.dispose;
    }, []);
  }
}

import 'package:flutter/material.dart';
import 'my_custom_form.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyCustomForm(),
    );
  }
}

In the previous example, the form captures the input from the name and surname fields, combines them into a full name, and displays the result. The MyController component uses the UseTextInput hook (custom hook created previously) to manage the name and lastname inputs.

The fullName state is defined using UseCompute , which calculates the full name based on the values of firstNameInput and lastNameInput. This ensures that the full name updates automatically whenever either input changes.