RtHook

Tip

This documentation assumes you’ve already read the hooks. It’s recommended read that first if you’re new in Reactter.

RtHook is a class that provides a way to create a custom hook.

Syntax

abstract class RtHook with RtState<RtHook> {
  static get $register => HookBindingZone<RtHook>();
  HookBindingZone<RtHook> get $;
  void initHook()
  void update([Function()? fnUpdate])
}

Properties & Methods

• $register: A static getter to allow access to HookBindingZone . It’s responsible for registering a RtHook and attaching collected states to it.

• $: A required getter to access the HookBindingZone instance. It must be defined has a final property on first line of the class for registering the hook and attach the states below it, like this:

  final $ = RtHook.$register;

• initHook : Called when the hook is initialized. Useful for setting up state dependencies or performing side effects when the hook is first created.

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).

Usage

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.