この記事ではflutter_hooksにおけるuseEffectについて解説していきます。
人気の高いHooksにおいて基礎となるuseEffectを理解することでより実装の幅も広がると思うのでぜひご覧ください。
hooksとは
flutter_hooksとは状態管理をするための一つのオブジェクトで詳しくは下記記事で解説していますのでぜひご覧ください。
FlutterにおけるuseEffectとは
useEffect is called synchronously on every build, unless keys is specified. In which case useEffect is called again only if any value inside keys has changed.
日本語訳
useEffectは、keysが指定されていない限り、ビルドごとに同期的に呼び出される。この場合、useEffectはkeysの中の値が変更された場合にのみ再度呼び出される。
つまり、以下のような理解です
- SatefulWidgetにおけるinitStateのようなもの
- SatefulWidgetのようにコードが長くなく短くシンプルにかける
- useStateやuse〇〇と組み合わせてステートフルなロジックを簡潔に書ける
こちらの記事がuseEffectについてコード付きで簡単に解説されているので英語記事ですが、よかったらご覧ください。
こちらの記事もわかりやすく、こちらはStatefulWidgetとhooksの関係をまとめていたので英語ですが、よかったらご覧ください。
実際のflutter_hooksを使った状態管理
ここからは実際にシンプルなプリントアウトをするだけのアプリを作ってuseEffectについて解説してきます。
fluttterhooksのimport
flutter_hooksをpubspec.yamlに定義する。
バージョンは適宜調整してください。
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.8
flutter_hooks: ^0.20.5HookWidgetの設定
指定のクラスにHookWidgetを設定
class MyHomePage extends HookWidget {useEffetctの定義
実際にuseEffectを定義します。
下記のような書き方がuseEffectの特徴です
useEffect(() {
print('Test');
return;
}, const []);今回は、説明にすごくシンプルで初期起動時にプリントアウトをしているだけのuseEffectになります。
useEffectの副作用
副作用と呼ばれて、関数などを実施することができます。
通常、初回レンダリング（初回起動）や依存リスト（第2引数）内([]内）の値が変更されたときに呼び出されます。
returnの実施タイミング
returnの実施タイミングは以下の2パターンで実施されます。
- useEffectが再実行される直前
- ウィジェットが破棄されるとき
useEffectが再実行される直前
依存リスト内の値が変わった場合、再度useEffectが実行される前にクリーンアップ処理が実行されます。
ウィジェットが破棄されるとき
画面遷移や状態変更でそのウィジェットが破棄されるときにクリーンアップ処理が実行されます。
第2引数（最後の[])
こちらも二つパターンがあります。
- 空の場合
- []の中身の値を指定した場合
- 空の場合
const []は依存リストが空であることを意味します。
[]の中身の値を指定した場合
この場合、初回レンダリング時に一度だけ実行され、その後再実行されません。
- []の中身の値を指定した場合
指定された値が変化したときにuseEffectが再実行されます。
useEffect(() {
print('Test');
return;
}, [someValue]);この場合は、someValueが変化されるたびに再実行されます。
全体コード
こちらが全体のコードになります。
参考程度にご覧いただけると幸いです。
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Test(),
);
}
}
class Test extends HookWidget {
const Test({super.key});
@override
Widget build(BuildContext context) {
useEffect(() {
print('Test');
return;
}, const []);
return Scaffold(
appBar: AppBar(
title: const Text('Test'),
),
body: const Center(
child: Text('Test'),
),
);
}
}最後に
いかがでしょうか。
簡単にuseEffectについて解説いたしましたが、もっと工夫すれば便利で複雑に使用することも可能です。
もっと深く調べたり使用してみてぜひflutterライフに活用してみてください。
ではまた。
コメント