useEffect: Mastering useEffect and useState with Flutter Hooks

useEffect :

Flutter’s useEffect hook revolutionizes state management by enabling efficient handling of side effects within functional components.

With this, Flutter developers can seamlessly integrate asynchronous operations, perform data fetching, and manage subscriptions without cluttering the UI code.

This powerful hook optimizes app performance, enhances reactivity, and streamlines the development process.

Dive into the world of Flutter useEffect to harness the full potential of reactive programming and simplify complex state management in your applications.

We have implemented useEffect using flutter hooks and tried to replace the usage of init state and dispose in this part of the tutorial these two components are part  of lifecycle of widget.

In this part of the tutorial we will try to update the counter automatically with the help of Timer where we will replace the initialization and dispose phase of the controllers with hooks.

useEffect is called on every build call i..e, only once and if there are any keys specified in the constructor which are updated then the useEffect can be called multiple times based on changes.

This component accepts a function and returns a function usually subscribes to a stream and disposes it once finished.

Go through the previous blog for basic related to flutter hooks detailed explanation with video tutorial.

useEffect Video Tutorial :

Watch the following video tutorial for a more comprehensive step-by-step guide.

pubspec.yaml:

Incorporate the Flutter Hooks dependency to utilize the powerful concepts of useEffect and useState within your Flutter application

.Make sure to include the latest version numbers to prevent any potential conflicts and ensure a smooth integration process.

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.3

main.dart :

In this example we will try to skip init and dispose blocks and useEffect to initialize and dispose the timer once its used.This will be much efficient in memory leaks handling.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class _HomeState extends State<Home> {
  late Timer _timer;
  int _count = 0;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(seconds: 1), (abc) {
      setState(() {
        _count = abc.tick;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "$_count",
        style: TextStyle(fontSize: 50.0),
      ),
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }
}

class HooK extends HookWidget {
  HooK({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _count = useState(0);

    useEffect(() {
      final timer = Timer.periodic(Duration(seconds: 1), (timer) {
        _count.value = timer.tick;
      });
      return timer.cancel;
    }, []);

    return Center(
      child: Text(
        "${_count.value}",
        style: TextStyle(fontSize: 50.0),
      ),
    );
  }
}

If you have any questions, feel free to drop them in the comments below. If you enjoyed this tutorial, show us some love by liking and sharing for more exciting updates