Repository: supabase/supabase
File: apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx (TypeScript)

Code before:
  const { data, isError, isLoading, isSuccess, error } = useOrgProjectsInfiniteQuery(
    { slug },
    { enabled: currentBillingCycleSelected }
  )
  const projects = useMemo(() => data?.pages.flatMap((page) => page.projects), [data?.pages]) || []

  const relevantProjects = useMemo(() => {
    return isSuccess
      ? projects
          .filter((project) => {
            // We do want to show branches that are exceeding the 8 GB limit, as people could have persistent or very long-living branches
            const isBranchExceedingFreeQuota =
              project.is_branch && project.databases.some((db) => (db.disk_volume_size_gb ?? 8) > 8)

            const isActiveProject = project.status !== PROJECT_STATUS.INACTIVE

            const isHostedOnAws = project.databases.every((db) => db.cloud_provider === 'AWS')

            return (
              (!project.is_branch || isBranchExceedingFreeQuota) && isActiveProject && isHostedOnAws
            )
          })
          .filter((it) => it.ref === projectRef || !projectRef)
      : []
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSuccess, projectRef])

  const hasProjectsExceedingDiskSize = useMemo(() => {
    return relevantProjects.some((it) =>
      it.databases.some(
        (db) => db.type === 'READ_REPLICA' || (db.disk_volume_size_gb && db.disk_volume_size_gb > 8)
      )
    )
  }, [relevantProjects])

  const gp3UsageInPeriod = usage?.usages.find(
    (it) => it.metric === PricingMetric.DISK_SIZE_GB_HOURS_GP3
  )
  const io2UsageInPeriod = usage?.usages.find(
    (it) => it.metric === PricingMetric.DISK_SIZE_GB_HOURS_IO2
  )

  return (
    <div id={attribute.anchor} className="scroll-my-12">
      <SectionContent section={attribute}>
        {isLoading && (
          <div className="space-y-2">
            <ShimmeringLoader />
            <ShimmeringLoader className="w-3/4" />
            <ShimmeringLoader className="w-1/2" />
          </div>

Review comment (suggestion):
Should `projects` also be in this array?
```suggestion
  }, [isSuccess, projects, projectRef])
```

Code after:
  const { data, isError, isLoading, isSuccess, error } = useOrgProjectsInfiniteQuery(
    { slug },
    { enabled: currentBillingCycleSelected }
  )
  const projects = useMemo(() => data?.pages.flatMap((page) => page.projects) || [], [data?.pages])

  const relevantProjects = useMemo(() => {
    return isSuccess
      ? projects
          .filter((project) => {
            // We do want to show branches that are exceeding the 8 GB limit, as people could have persistent or very long-living branches
            const isBranchExceedingFreeQuota =
              project.is_branch && project.databases.some((db) => (db.disk_volume_size_gb ?? 8) > 8)

            const isActiveProject = project.status !== PROJECT_STATUS.INACTIVE

            const isHostedOnAws = project.databases.every((db) => db.cloud_provider === 'AWS')

            return (
              (!project.is_branch || isBranchExceedingFreeQuota) && isActiveProject && isHostedOnAws
            )
          })
          .filter((it) => it.ref === projectRef || !projectRef)
      : []
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSuccess, projects, projectRef])

  const hasProjectsExceedingDiskSize = useMemo(() => {
    return relevantProjects.some((it) =>
      it.databases.some(
        (db) => db.type === 'READ_REPLICA' || (db.disk_volume_size_gb && db.disk_volume_size_gb > 8)
      )
    )
  }, [relevantProjects])

  const gp3UsageInPeriod = usage?.usages.find(
    (it) => it.metric === PricingMetric.DISK_SIZE_GB_HOURS_GP3
  )
  const io2UsageInPeriod = usage?.usages.find(
    (it) => it.metric === PricingMetric.DISK_SIZE_GB_HOURS_IO2
  )

  return (
    <div id={attribute.anchor} className="scroll-my-12">
      <SectionContent section={attribute}>
        {isLoading && (
          <div className="space-y-2">
            <ShimmeringLoader />
            <ShimmeringLoader className="w-3/4" />
            <ShimmeringLoader className="w-1/2" />
          </div>