From 8cbdc6019f6c6da8202ae6a333f3734fba777f70 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 12 Jan 2023 09:41:11 -0600
Subject: [PATCH] AccountGallery: fix crash in React 18 Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1318

---
 app/soapbox/features/account-gallery/index.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/account-gallery/index.tsx b/app/soapbox/features/account-gallery/index.tsx
index b27d1b117..1e8dc77f2 100644
--- a/app/soapbox/features/account-gallery/index.tsx
+++ b/app/soapbox/features/account-gallery/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
@@ -66,10 +66,7 @@ const AccountGallery = () => {
   const hasMore = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.hasMore);
 
   const [width, setWidth] = useState(323);
-
-  const handleRef = (c: HTMLDivElement) => {
-    if (c) setWidth(c.offsetWidth);
-  };
+  const node = useRef<HTMLDivElement>(null);
 
   const handleScrollToBottom = () => {
     if (hasMore) {
@@ -99,6 +96,12 @@ const AccountGallery = () => {
     }
   };
 
+  useLayoutEffect(() => {
+    if (node.current) {
+      setWidth(node.current.offsetWidth);
+    }
+  }, [node.current]);
+
   useEffect(() => {
     if (accountId && accountId !== -1) {
       dispatch(fetchAccount(accountId));
@@ -140,7 +143,7 @@ const AccountGallery = () => {
 
   return (
     <Column label={`@${accountUsername}`} transparent withHeader={false}>
-      <div role='feed' className='account-gallery__container' ref={handleRef}>
+      <div role='feed' className='account-gallery__container' ref={node}>
         {attachments.map((attachment, index) => attachment === null ? (
           <LoadMoreMedia key={'more:' + attachments.get(index + 1)?.id} maxId={index > 0 ? (attachments.get(index - 1)?.id || null) : null} onLoadMore={handleLoadMore} />
         ) : (