diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx index bea62ceed2c3..9010632ab9d9 100644 --- a/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx +++ b/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx @@ -1,5 +1,5 @@ import type {ReactEventHandler} from 'react'; -import {useState} from 'react'; +import {useMemo, useState} from 'react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; @@ -72,7 +72,11 @@ export function Screenshot({ onDelete(screenshotAttachmentId); } - const AttachmentComponent = getImageAttachmentRenderer(screenshot) ?? ImageViewer; + const AttachmentComponent = useMemo( + () => getImageAttachmentRenderer(screenshot) ?? ImageViewer, + // eslint-disable-next-line react-hooks/exhaustive-deps + [screenshot.mimetype] + ); const downloadUrl = `/api/0/projects/${organization.slug}/${projectSlug}/events/${eventId}/attachments/${screenshot.id}/`; return ( diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx index 94cbd86fad47..c3db486cfd6f 100644 --- a/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx +++ b/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx @@ -1,5 +1,5 @@ import type {ComponentProps} from 'react'; -import {Fragment, useState} from 'react'; +import {Fragment, useMemo, useState} from 'react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; @@ -97,8 +97,11 @@ export function ScreenshotModal({ }; } - const AttachmentComponent = - getImageAttachmentRenderer(currentEventAttachment) ?? ImageViewer; + const AttachmentComponent = useMemo( + () => getImageAttachmentRenderer(currentEventAttachment) ?? ImageViewer, + // eslint-disable-next-line react-hooks/exhaustive-deps + [currentEventAttachment.mimetype] + ); return (