Understanding the practical utility of useCallback

[uno-sw]

I'm currently exploring the Flutter Hooks package and I am trying to understand the practical utility of the useCallback hook. I'd appreciate some insights or clarifications on my understanding.

Context

In the React ecosystem, useCallback is often utilized alongside React.memo for optimizing performance. It helps in avoiding unnecessary re-renders by retaining the callback function's instance, ensuring that the comparison of props remains consistent even across different renders.

Concern

In the Flutter ecosystem, there isn't a direct equivalent of React.memo. Although we can use const constructors to minimize rebuilds, function objects can’t be constant. This implies that any widget receiving a function object as a property can’t be made const, thus undermining the potential benefits of useCallback.

Question

Is my understanding correct that useCallback might not offer significant benefits in Flutter, given the absence of a memoization mechanism akin to React.memo? I am eager to understand if there are specific scenarios or use cases where useCallback proves beneficial in Flutter, that I might not be considering. Thanks.

[rrousselGit]

You're right. The value is small.
I only added it because some folks asked for it, and it's an official one. It's there for parity

[uno-sw]

Thank you for your response.
I'm curious to know if there are any plans to mark it as deprecated, or perhaps add additional information to the docs to inform users about its limited utility in Flutter. I’m more than happy to contribute to this if needed.

[rrousselGit]

There's no such plan. It's doing what it's supposed to do, even if the use is limited. It can be useful sometimes, such as when using useMemoized to cache a widget – which does not rely on const

[uno-sw]

I appreciate your feedback. I hadn't considered the use case of utilizing useMemoized to cache a widget. To better understand this, I've crafted a proof-of-concept code:

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

  @override
  Widget build(BuildContext context) {
    final count = useState(1); 
    
    return Column(
      children: [
        TextButton(
          onPressed: () => count.value++,
          child: Text('Multiplier: ${count.value}'),
        ),
        InnerWidget(multiplier: count.value),
      ],
    );
  }
}

class InnerWidget extends HookWidget {
  const InnerWidget({super.key, this.multiplier = 2});
  
  final int multiplier;
  
  @override
  Widget build(BuildContext context) {
    final count = useState(0);
    
    final handleButtonPressed = useCallback((int value) {
      count.value += value * multiplier;
    }, [multiplier]);
    
    final heavyButtonA = useMemoized(() {
      return HeavyButtonA(setValue: handleButtonPressed);
    }, [handleButtonPressed]);
    
    final heavyButtonB = useMemoized(() {
      return HeavyButtonB(setValue: handleButtonPressed);
    }, [handleButtonPressed]);
    
    return Column(
      children: [
        Text('${count.value}'),
        heavyButtonA,
        heavyButtonB,
      ],
    );
  }
}

class HeavyButtonA extends StatelessWidget {
  const HeavyButtonA({super.key, required this.setValue});
  
  final ValueSetter<int> setValue;
  
  @override
  Widget build(BuildContext context) {
    print('HeavyButtonA rebuilds');
    return TextButton(
      onPressed: () => setValue(1),
      child: const Text('Heavy button A'),
    );
  }
}

class HeavyButtonB extends StatelessWidget {
  const HeavyButtonB({required this.setValue});
  
  final ValueSetter<int> setValue;
  
  @override
  Widget build(BuildContext context) {
    print('HeavyButtonB rebuilds');
    return TextButton(
      onPressed: () => setValue(10),
      child: const Text('Heavy button B'),
    );
  }
}

In this example, useCallback and useMemoized are used together to optimize performance. The "heavy" buttons are rebuilt only when the multiplier changes. However, they are not rebuilt when the counter changes as a result of pressing the "heavy" buttons, thanks to the caching effect facilitated by useMemoized. This serves as an excellent demonstration of how these hooks can be beneficial in certain scenarios. I hope this example helps others in understanding these nuances.

[westito]

I'm interested in this too. Is there any advantage to using 'useCallback' instead of local functions? It seems useCallback is more complex and has overhead.

int calculate(int value) => value + value;

vs.

final calculate = useCallback((int value) => value + value);

[benthillerkus]

Not necessarily an advantage, but there's a difference to which objects are being captured in the closure.
With useCallback you'll have the environment as of the point useCallback was initially called, with a local function you'll have the current environment.