LoginSignup
2
1

More than 1 year has passed since last update.

useCallbackとuseMemoized(Flutter Hooks)

Last updated at Posted at 2022-02-11

フックに慣れていないので、サクッと勉強第2弾です。
#useCallback
関数インスタンス(値が入った関数)をキャッシュ(再利用の為に保存)。初回の呼び出しで渡された関数をそのまま返して、再レンダリングされた時も初回のレンダリング同様の関数オブジェクトを再利用できます。useMemoizedのシンタックスシュガー(構文を別の記法で記述)であり、関数コンポーネント内で値の再計算を抑制する効果を持っています。

final cachedFunction = useCallback(() {
  print('doSomething');
}, [key]);
T useCallback<T extends Function>(
  T callback,
  List<Object?> keys,
) {
  return useMemoized(() => callback, keys);
}

#useMemoized
複雑なオブジェクトのインスタンスをキャッシュ。変化する値を固定させたり、膨大な計算を軽減させる為に使用。useCallback同様、最初の呼び出しで関数を返したら、その結果を保存してHookWidgetのビルド(再構築)時に保存していたインスタンスを返します。下記の場合、オプション引数(第2引数)のkeysが変更された場合は、valueBuilderがサイド呼ばれ新しいインスタンスが作られます。

final cachedFunction = useMemoized(() => () {
  print('doSomething');
}, [key]);
T useMemoized<T>(
  T Function() valueBuilder, [
  List<Object?> keys = const <Object>[],
]) {
  return use(
    _MemoizedHook(
      valueBuilder,
      keys: keys,
    ),
  );
}

##状態に応じて値を使う時にはuseCallbackやuseMemoizedは便利ですね。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1