Browse Source

fix(profiling): alternative import type (#44507)

~Alternative to https://github.com/getsentry/sentry/pull/44506, benefits
of this approach is that we only re-import once and the state is
synchronously propagated to the children.~

Why did I forget useMemo exists, I do not know, but we should use it
here instead.
Jonas 2 years ago
parent
commit
947b46539e

+ 7 - 5
static/app/utils/profiling/profile/utils.tsx

@@ -98,12 +98,14 @@ export function memoizeByReference<Arguments, Value>(
   };
 }
 
-export function memoizeVariadicByReference<Arguments, Value>(
-  fn: (...args: ReadonlyArray<Arguments>) => Value
-): (...t: ReadonlyArray<Arguments>) => Value {
-  let cache: Cache<ReadonlyArray<Arguments>, Value> | null = null;
+type Arguments<F extends Function> = F extends (...args: infer A) => any ? A : never;
 
-  return function memoizeByReferenceCallback(...args: ReadonlyArray<Arguments>) {
+export function memoizeVariadicByReference<T extends (...args) => V, V = ReturnType<T>>(
+  fn: T
+): (...t: Arguments<T>) => V {
+  let cache: Cache<Arguments<T>, V> | null = null;
+
+  return function memoizeByReferenceCallback(...args: Arguments<T>): V {
     // If this is the first run then eval the fn and cache the result
     if (!cache) {
       cache = {args, value: fn(...args)};

+ 4 - 7
static/app/views/profiling/profileGroupProvider.tsx

@@ -1,4 +1,4 @@
-import {createContext, useContext, useEffect, useState} from 'react';
+import {createContext, useContext, useMemo} from 'react';
 
 import {importProfile, ProfileGroup} from 'sentry/utils/profiling/profile/importProfile';
 
@@ -32,14 +32,11 @@ interface ProfileGroupProviderProps {
 }
 
 export function ProfileGroupProvider(props: ProfileGroupProviderProps) {
-  const [profileGroup, setProfileGroup] = useState<ProfileGroup>(LoadingGroup);
-
-  useEffect(() => {
+  const profileGroup = useMemo(() => {
     if (!props.input) {
-      return;
+      return LoadingGroup;
     }
-
-    setProfileGroup(importProfile(props.input, props.traceID, props.type));
+    return importProfile(props.input, props.traceID, props.type);
   }, [props.input, props.traceID, props.type]);
 
   return (