using-flutter-hooks

Flutter Hooks Latest Version Best Practices Guide (v0.21.x)

Goal

flutter_hooks is a package developed by Remi Rousselet (author of Riverpod and Freezed). Its core philosophy stems from React Hooks. The current latest version is 0.21.3+1.

Hooks primarily exist to solve the verbose boilerplate code brought about by StatefulWidget, and the extreme difficulty of reusing UI Logic across Widgets.

Instructions

1. Core Concept: What are Hooks?

Hooks are tools used to manage "local and ephemeral UI state or side effects".

• Not Suitable For: Global business logic management (this should be handed over to Riverpod or Bloc).
• Suitable For: Any Widget attaching a Controller, animation management, focus tracking, or countdown timers.

Dependency Installation

dependencies:
  flutter_hooks: ^0.21.3
  hooks_riverpod: ^3.3.0 # If you are simultaneously using Riverpod

2. Widget Declaration: Replacing StatefulWidget

To use Hooks, your Widget cannot inherit from a standard StatelessWidget or StatefulWidget; it must instead inherit from HookWidget. (If you are mixing it with Riverpod, inherit from HookConsumerWidget instead).

All Hooks are only allowed to be called at the top level inside the build method. Writing them inside if statements is strictly prohibited.

3. Built-in Hooks Overview and Best Practices

flutter_hooks provides a massive number of practical built-in Hooks. Leveraging them effectively can save hundreds of lines of dispose() and initState().

3.1 State and Caching (State & Caching)

• useState(initialData):
  • Purpose: Manages the simplest local state (essentially wraps ValueNotifier).
  • Usage: final counter = useState(0); counter.value++;
• useMemoized(compute, [keys]):
  • Purpose: Caches the result of an expensive computation, or ensures an object (e.g., a custom class) is instantiated only once during Rebuilds.
  • Usage: final complexObj = useMemoized(() => HeavyObject(), []);
• useCallback(callback, [keys]):
  • Purpose: Caches a function reference. If passed to deep Widgets, it prevents triggering unnecessary refreshes because parent Rebuilds generate a new function memory location.
• useRef(initialValue):
  • Purpose: Holds a mutable object across Rebuild cycles, and changing its value does not trigger a UI refresh (unlike useState). Perfect for storing the width of a previous screen, or a Timer instance for subsequent clearing.