perf(issues): Move annotated text useProjects into subcomponent (#59246)

static/app/components/events/meta/annotatedText/annotatedTextValue.tsx

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 
 import {Tooltip} from 'sentry/components/tooltip';
-import {Organization, Project} from 'sentry/types';
+import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
 
 import {Redaction} from './redaction';
 import {getTooltipText} from './utils';
@@ -10,11 +12,31 @@ import {ValueElement} from './valueElement';
 type Props = {
   value: React.ReactNode;
   meta?: Record<any, any>;
-  organization?: Organization;
-  project?: Project;
 };
 
-export function AnnotatedTextValue({value, meta, organization, project}: Props) {
+function RemovedAnnotatedTextValue({value, meta}: Required<Props>) {
+  const organization = useOrganization();
+  const location = useLocation();
+  const projectId = location.query.project;
+  const {projects} = useProjects();
+  const currentProject = projects.find(project => project.id === projectId);
+
+  return (
+    <Tooltip
+      title={getTooltipText({
+        rule_id: meta.rem[0][0],
+        remark: meta.rem[0][1],
+        organization,
+        project: currentProject,
+      })}
+      isHoverable
+    >
+      <ValueElement value={value} meta={meta} />
+    </Tooltip>
+  );
+}
+
+export function AnnotatedTextValue({value, meta}: Props) {
   if (meta?.chunks?.length && meta.chunks.length > 1) {
     return (
       <ChunksSpan>
@@ -38,19 +60,7 @@ export function AnnotatedTextValue({value, meta, organization, project}: Props)
   }
 
   if (meta?.rem?.length) {
-    return (
-      <Tooltip
-        title={getTooltipText({
-          rule_id: meta.rem[0][0],
-          remark: meta.rem[0][1],
-          organization,
-          project,
-        })}
-        isHoverable
-      >
-        <ValueElement value={value} meta={meta} />
-      </Tooltip>
-    );
+    return <RemovedAnnotatedTextValue value={value} meta={meta} />;
   }
 
   return <ValueElement value={value} meta={meta} />;

static/app/components/events/meta/annotatedText/index.tsx

@@ -1,7 +1,3 @@
-import {useLocation} from 'sentry/utils/useLocation';
-import useOrganization from 'sentry/utils/useOrganization';
-import useProjects from 'sentry/utils/useProjects';
-
 import {AnnotatedTextErrors} from './annotatedTextErrors';
 import {AnnotatedTextValue} from './annotatedTextValue';
 
@@ -12,20 +8,9 @@ type Props = {
 };
 
 export function AnnotatedText({value, meta, className, ...props}: Props) {
-  const organization = useOrganization();
-  const location = useLocation();
-  const projectId = location.query.project;
-  const {projects} = useProjects();
-  const currentProject = projects.find(project => project.id === projectId);
-
   return (
     <span className={className} {...props}>
-      <AnnotatedTextValue
-        value={value}
-        meta={meta}
-        project={currentProject}
-        organization={organization}
-      />
+      <AnnotatedTextValue value={value} meta={meta} />
       <AnnotatedTextErrors errors={meta?.err} />
     </span>
   );