upd: caching data

Deskripsi:
- update caching pada fitur utama -yg fitur divisi belom

components/home/divisionHome.tsx

@@ -3,8 +3,9 @@ import { apiGetDataHome } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
+import { useQuery } from "@tanstack/react-query";
 import { router } from "expo-router";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Dimensions, Pressable, View } from "react-native";
 import { ICarouselInstance } from "react-native-reanimated-carousel";
 import Skeleton from "../skeleton";
@@ -21,45 +22,31 @@ export default function DivisionHome({ refreshing }: { refreshing: boolean }) {
    const { colors } = useTheme();
    const ref = React.useRef<ICarouselInstance>(null)
    const width = Dimensions.get("window").width
-   const [data, setData] = useState<Props[]>([])
-   const [loading, setLoading] = useState(true)
    const arrSkeleton = Array.from({ length: 2 }, (_, index) => index)
 
-   async function handleData(loading: boolean) {
-      try {
-         setLoading(loading)
+   // TanStack Query for Division data
+   const { data: homeDivisions = [], isLoading } = useQuery({
+      queryKey: ['homeData', 'division'],
+      queryFn: async () => {
          const hasil = await decryptToken(String(token?.current))
          const response = await apiGetDataHome({ cat: "division", user: hasil })
-         setData(response.data)
-      } catch (error) {
-         console.error(error)
-      } finally {
-         setLoading(false)
-      }
-   }
-
-   useEffect(() => {
-      if (refreshing)
-         handleData(false)
-   }, [refreshing]);
-
-   useEffect(() => {
-      handleData(true)
-   }, []);
-
-
+         return response.data as Props[]
+      },
+      enabled: !!token?.current,
+      staleTime: 0,
+   })
 
    return (
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mb10]}>Divisi Teraktif</Text>
          {
-            loading ?
+            isLoading ?
                arrSkeleton.map((item, index) => (
                   <Skeleton key={index} width={100} height={80} borderRadius={10} widthType="percent" />
                ))
                :
-               data.length > 0 ?
-                  data.map((item, index) => (
+               homeDivisions.length > 0 ?
+                  homeDivisions.map((item, index) => (
                      <Pressable style={[Styles.wrapPaper, Styles.mb05, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]} key={index} onPress={() => { router.push(`/division/${item.id}`) }}>
                         <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
                            <View>