[基礎知識]flutter_hooks/useCallback関数

flutter_hooks/useCallback関数(詳細は、pub.dev 参照)についての説明です。

1.定義

特定の関数をメモ化する

コンポーネントが再ビルドされた際にも
同じ関数インスタンス保持する
ことで、
 ・不必要再生成避け
  (パフォーマンス最適化を図ります。)

(定義)flutter_hooks/useCallback関数:
T useCallback<T extends Function>( 
  //1.メモ化する関数
  T callback, 
  //2.キー(依存配列)
  //  この値変更時のみ、上記1は再生成される
  [ List<Object?> keys = const <Object>[] ]
)

キーのリストに基づいて、リビルド間で関数をキャッシュします。

2.使用例

(main.dart)
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:test04/widgets/usecallback_hooks_example.dart';
void main() {
  runApp(
    const ProviderScope(
      child: MaterialApp(
        home: Usecallbackhooksexample()
      )
    )
  );
}
(usecallback_hooks_example.dart)
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class Usecallbackhooksexample extends HookWidget {
  const Usecallbackhooksexample({super.key});

  @override
  Widget build(BuildContext context) {
    int count = useState(0).value;

    //この increment関数は、count変更時のみ再生成されます
    final increment = useCallback(() => count++, [count]);

    return Scaffold(
      appBar: AppBar(
        title: const Text('useCallback Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count: $count'),
            ElevatedButton(
              onPressed: increment,
              child: const Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}
useCallback のメリット:
・不要な再生成を避ける:
 useCallback は、依存配列 keys 内の値が変更されない限り、callback 関数のインスタンスを再生成しません。これにより、特に参照比較が必要な場合(例えば、React.memo や shouldComponentUpdate を使用する場合)に、不必要な再レンダリングを防ぐことができます。
・メモリ効率:
 関数のインスタンスが保持されるため、メモリ使用量の削減にもつながります。
 

3.注意点

正しい依存配列の設定

useCallback を使用する際は、keys依存配列)に全ての依存関係正確設定することが重要です。
(依存関係を見落とすと、期待しない時に関数が再生成されることがあり、バグの原因になります。)

コメントを残す