diff --git a/app/javascript/mastodon/components/status/attachments.tsx b/app/javascript/mastodon/components/status/attachments.tsx
index b36f77dc8d0..7747698b930 100644
--- a/app/javascript/mastodon/components/status/attachments.tsx
+++ b/app/javascript/mastodon/components/status/attachments.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense, useCallback, useState } from 'react';
+import { lazy, Suspense, useCallback } from 'react';
 
 import { openModal } from '@/mastodon/actions/modal';
 import type { DeployPictureInPictureCallback } from '@/mastodon/actions/picture_in_picture';
@@ -6,6 +6,7 @@ import { deployPictureInPicture } from '@/mastodon/actions/picture_in_picture';
 import { CollectionPreviewCard } from '@/mastodon/features/collections/components/collection_preview_card';
 import Card from '@/mastodon/features/status/components/card';
 import { useExpandedStatus } from '@/mastodon/hooks/useStatus';
+import { useToggle } from '@/mastodon/hooks/useToggle';
 import { displayMedia } from '@/mastodon/initial_state';
 import type {
   MediaAttachment,
@@ -130,7 +131,7 @@ const MediaAttachments: React.FC<{
     selectPictureInPicture(state, statusId),
   );
 
-  const [showMedia, setShowMedia] = useState(
+  const [showMedia, { onToggle: handleToggleMediaVisibility }] = useToggle(
     () =>
       mediaFilters.length === 0 &&
       ((displayMedia !== 'hide_all' && !sensitive) ||
@@ -138,9 +139,6 @@ const MediaAttachments: React.FC<{
   );
 
   const dispatch = useAppDispatch();
-  const handleToggleMediaVisibility = useCallback(() => {
-    setShowMedia((prev) => !prev);
-  }, []);
   const handleOpenMedia = useCallback(
     (index: number) => {
       dispatch(
diff --git a/app/javascript/mastodon/hooks/useToggle.ts b/app/javascript/mastodon/hooks/useToggle.ts
new file mode 100644
index 00000000000..5e4110058ff
--- /dev/null
+++ b/app/javascript/mastodon/hooks/useToggle.ts
@@ -0,0 +1,16 @@
+import { useCallback, useState } from 'react';
+
+export function useToggle(initialValue: boolean | (() => boolean) = false) {
+  const [value, setValue] = useState(initialValue);
+  const onTrue = useCallback(() => {
+    setValue(true);
+  }, []);
+  const onFalse = useCallback(() => {
+    setValue(false);
+  }, []);
+  const onToggle = useCallback(() => {
+    setValue((prevValue) => !prevValue);
+  }, []);
+
+  return [value, { setValue, onTrue, onFalse, onToggle }] as const;
+}