Hooks
Hooks are special functions that allow a component to connect to the lifecycle of a widget.
We have two hooks:
- useAtomState: Subscribes to the Atom and rebuilds the Widget when the state changes.
- useAtomEffect: Subscribes to one or more Atoms and triggers a callback when they change. This does not affect the Widget’s state. It is great for executing code like Snackbar or Navigator.
Pay attention to the mixin that enables Hooks!!!
For StatelessWidget, add the HookMixin mixin.
For StatefulWidget, add the HookStateMixin mixin to the State.
Hooks will only be available after adding the mixin correctly.
Example:
class CounterPage extends StatelessWidget with HookMixin {
const CounterPage({super.key});
// Atom effect
void callSnackBar(int state) {
if (state > 5) {
final snackBar = SnackBar(content: Text('Max $state'));
Asuka.showSnackBar(snackBar);
}
}
Widget build(BuildContext context) {
// Listen to atom
final state = useAtomState(counterState);
// Listen and call function
useAtomEffect(
(get) => get(counterState),
effect: callSnackBar,
);
...
Hooks manage the lifecycle automatically, so there is no need to worry about memory "releases" like "dispose". A dream come true!
NOTE
ASP uses the hook_state package, therefore, the other hooks are
available.
Unlike flutter_hook, which is excellent but invasive, we use hook_state that doesn’t require changing widgets. Just add a mixin and you’re ready to go.