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.

Reactter provider some hooks to manage the state and side effects of the application, which are:

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

How it works

Hooks in Reactter are classes that extend ReactterHook and follow a special naming convention with the Use prefix. The ReactterHook 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 ReactterHook inherits from ReactterState this inheritance allows hooks to manage both state and lifecycle methods efficiently.

To manage these aspects, Hooks provide the following:

• Methods inherited from ReactterState (Learn more here):

  • update : A method to notify changes after run a set of instructions.
  • refresh : A method to force to notify changes.
  • * bind : A method to bind an instance to it.
  • * unbind : A method to unbind an instance to it.
  • * dispose : A method to remove all listeners and free resources.

  Note

  * These methods are unnecessary when is declared within a dependency(class registered via the dependecy injection).

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 ReactterHook 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 ReactterHook {
  // This line is REQUIRED!
  final $ = ReactterHook.$register;

  final controller = TextEditingController();

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

  UseTextInput() {
    UseEffect(() {
      controller.addListener(() {
        update(() => _value = controller.text);
      });

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

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 ReactterHook class that allows you to update the state of the hook.

Note

ReactterHook is a class that inherits from ReactterState . It provides a set of methods to manage the state and lifecycle of the hook. Learn more about State methods.

Attention!!

To create a Custom Hook( ReactterHook ), you need to register it by adding the following line:

final $ = ReactterHook.$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.

Using a custom 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 = Reactter.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 ReactterProvider<MyController>(
      () => MyController(),
      builder: (context, myController, child) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("Retrieve Text Input"),
          ),
          body: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ReactterConsumer<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 ReactterHook {
  // This line is REQUIRED!
  final $ = ReactterHook.$register;

  final controller = TextEditingController();

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

  UseTextInput() {
    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 example above, the form captures first and last name inputs, combines them into a full name, and displays the result. MyController uses UseTextInput hook for capturing the first and last name. The fullName state is defined using UseCompute to compute the full name based on the values of firstNameInput and lastNameInput. This ensures the full name is automatically updated whenever either input changes.