outsource useeffect

Author: StackOverflowIsBetterThanAnyAI

src/components/quote/Quote.tsx

@@ -4,7 +4,7 @@ import { ContextQuote } from '@/context/ContextQuote'
 import { QuoteType } from '@/types/types'
 import { Skeleton } from '@/components/ui/skeleton'
 import { fetchQuote } from '@/api/fetchQuote'
-import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
+import { useLoadQuote } from '@/hooks/useLoadQuote'
 
 const Quote = () => {
     const contextContentLoaded = useContext(ContextContentLoaded)
@@ -34,16 +34,7 @@ const Quote = () => {
         setIsLoading(false)
     }, [isLoading, setContentLoaded])
 
-    useEffect(() => {
-        const parsedStorageData = getItemFromSessionStorage()
-        setQuote(parsedStorageData?.quote || null)
-
-        if (!parsedStorageData?.quote) {
-            loadQuote()
-        } else {
-            setContentLoaded((prev) => ({ ...prev, quote: true }))
-        }
-    }, [loadQuote, setContentLoaded])
+    useLoadQuote(loadQuote, setContentLoaded, setQuote)
 
     return (
         <section className="w-full max-w-7xl" ref={quoteRef}>

src/hooks/useLoadQuote.ts

@@ -0,0 +1,28 @@
+'use client'
+
+import { Dispatch, SetStateAction, useEffect } from 'react'
+import { QuoteType } from '@/types/types'
+import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
+
+export const useLoadQuote = (
+    loadQuote: () => Promise<void>,
+    setContentLoaded: Dispatch<
+        SetStateAction<{
+            posts: boolean
+            quote: boolean
+            users: boolean
+        }>
+    >,
+    setQuote: Dispatch<SetStateAction<QuoteType | null>>
+) => {
+    useEffect(() => {
+        const parsedStorageData = getItemFromSessionStorage()
+        setQuote(parsedStorageData?.quote || null)
+
+        if (!parsedStorageData?.quote) {
+            loadQuote()
+        } else {
+            setContentLoaded((prev) => ({ ...prev, quote: true }))
+        }
+    }, [loadQuote, setContentLoaded, setQuote])
+}