remove useLayoutEffect

src/components/views/All.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { confirmAlert } from 'react-confirm-alert';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
@@ -163,6 +163,14 @@ const All = () => {
   }, [openMenuCid, handleOutsideClick]);
 
 
+  useEffect(() => {
+    if (postOnHoverRef.current) {
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+
+
   const errorString = useMemo(() => {
     for (const subplebbit of subplebbits) {
       if (subplebbit?.updatingState !== 'failed') {
@@ -457,14 +465,6 @@ const All = () => {
   };
 
 
-  useLayoutEffect(() => {
-    if (postOnHoverRef.current) {
-      const rect = postOnHoverRef.current.getBoundingClientRect();
-      setPostOnHoverHeight(rect.height);
-    }
-  }, [outOfViewCid]);
-
-
   return (
     <>
       <Helmet>

src/components/views/Board.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -171,6 +171,13 @@ const Board = () => {
   }, [openMenuCid, handleOutsideClick]);
 
 
+  useEffect(() => {
+    if (postOnHoverRef.current) {
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+  
 
   const errorString = useMemo(() => {
     if (subplebbit?.state === 'failed') {
@@ -618,13 +625,6 @@ const Board = () => {
   };
 
 
-  useLayoutEffect(() => {
-    if (postOnHoverRef.current) {
-      const rect = postOnHoverRef.current.getBoundingClientRect();
-      setPostOnHoverHeight(rect.height);
-    }
-  }, [outOfViewCid]);
-
   
 
   return (

src/components/views/Subscriptions.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { confirmAlert } from 'react-confirm-alert';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
@@ -162,6 +162,14 @@ const Subscriptions = () => {
   }, [openMenuCid, handleOutsideClick]);
 
 
+  useEffect(() => {
+    if (postOnHoverRef.current) {
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+
+  
   const errorString = useMemo(() => {
     for (const subplebbit of subplebbits) {
       if (subplebbit?.updatingState !== 'failed') {
@@ -459,14 +467,6 @@ const Subscriptions = () => {
   };
 
 
-  useLayoutEffect(() => {
-    if (postOnHoverRef.current) {
-      const rect = postOnHoverRef.current.getBoundingClientRect();
-      setPostOnHoverHeight(rect.height);
-    }
-  }, [outOfViewCid]);
-  
-
   return (
     <>
       <Helmet>

src/components/views/Thread.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -162,6 +162,14 @@ const Thread = () => {
   }, [openMenuCid, handleOutsideClick]);
 
 
+  useEffect(() => {
+    if (postOnHoverRef.current) {
+      const rect = postOnHoverRef.current.getBoundingClientRect();
+      setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+
+  
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
@@ -549,14 +557,6 @@ const Thread = () => {
   };
 
 
-  useLayoutEffect(() => {
-    if (postOnHoverRef.current) {
-      const rect = postOnHoverRef.current.getBoundingClientRect();
-      setPostOnHoverHeight(rect.height);
-    }
-  }, [outOfViewCid]);
-
-
   return (
     <>
       <Helmet>