[Flutter]flutter_hooks useMemoized() 효과 확인해보기

고랭지참치·2024년 6월 12일
0

Flutter

목록 보기
9/24
post-thumbnail

Flutter_hooks의 useMemoized() 메소드는 리액트의 그것과 동일하게 복잡한 연산을 가진 메소드의 결과값을 캐싱하여 빠른 출력을 도와준다.

실제로

성능 검증 준비

  static List<int> numberList = List.generate(100000220, (index) => Random().nextInt(1123100));
  • 1억개 아이템을 갖는 흉악한 리스트를 만든다.
    final Function sortMemo = useMemoized(
      () {
        return () {
          final DateTime startTime = DateTime.now();
          numberList.sort();
          numberList.map((e) => e * e * e).toList();
          final DateTime endTime = DateTime.now();
          logger.d('sort time: ${endTime.difference(startTime).inMilliseconds}ms');
        };
      },
      [numberList],
    );
  • 해당 리스트를 Sorting시키고 아이템 마다 3제곱하여 다시 리스트로 만드는 일과 걸린 시간을 확인하는 useMemoized함수를 만든다.

결과

  • 첫 useMemoized함수 실행시에는 26초 걸리던 시간
  • 이후 15초대(거의 반)으로 줄어들었다.
  • 캐싱 효과는 확실한 것 같음!

API 뜯어보기

[useMemoized] will immediately call [valueBuilder] on first call and store its result.
Later, when the [HookWidget] rebuilds, the call to [useMemoized] will return the previously created instance without calling [valueBuilder].

useMemoized 구현부를 보면 위와 같은 주석이 적혀져있다.
useMemoized는 첫번째 호출됐을떄 결과값을 저장해놓은 후 HooksConsumer위젯과 같은 클래스가 다시 빌드됐을때, valueBuilder를 다시 호출하지 않고 이전값을 반환한다고 한다.


또한 useCallBack hooks에 대한 주석을 보면 아래와 같은 설명도 있다.

This is syntax sugar for [useMemoized], so that instead of:

useCallBackd은 useMemoized에서 key를 전달하는 과정을 생략하여 더 사용하기 쉽게 만든 버젼이라고 이해할 수 있다.

profile
소프트웨어 엔지니어 / Flutter 개발자

0개의 댓글