Why my trigger runs each time though the data is the same?

[alamenai]

Hi Swr Team,

I have a component called Tabs that contains three tabs.

When the user clicks on the Tab analytics, I want to display the data that comes from API.

The problem is when the user clicks each time on that Tab though no state is changed, it fetches the data again.

CODE

"use client"

import { solarAnalyticsApiUrl, standardApiHeader } from "@/constants/urls"
import { fetcher } from "@/utils/fetcher"
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react"
import { Table } from "lucide-react"
import { Map } from "lucide-react"
import dynamic from "next/dynamic"
import { useParams, useSearchParams } from "next/navigation"
import { HTMLAttributes, useCallback, useEffect, useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import useSWRMutation from "swr/mutation"

import { RootState } from "@/redux/store"

import { initSelectedRoofs, Roof } from "../state/slice"
import { Analytics } from "./analytics"
import { CustomInstallationParamsForm } from "./form"
import { CustomInstallationImage } from "./image"
import { Stats } from "./stats"

export const Tabs = ({ image, roofs }: { roofs: Roof[]; image: string }) => {
  const selectedRoofs: Roof[] = useSelector((state: RootState) => state.customInstallation.selectedRoofs)

  const [data, setData] = useState<any>()

  const dispatch = useDispatch()

  const searchParams = useSearchParams()

  const params = useParams()

  const electricity = searchParams.get("electricity")

  const slp = searchParams.get("slp")

  const wp = searchParams.get("wp")

  const url = `${solarAnalyticsApiUrl}?address_id=${params.id}&slp_type=${slp}&annual_energy_consumption=${electricity}&wp=${wp}`

  const { trigger, isMutating } = useSWRMutation(url, (url) =>
    fetcher(url, standardApiHeader, "PUT", {
      panel_placement: selectedRoofs.map((roof) => {
        return {
          roof_id: roof.roof_id,
          additionalPanels:
            roof.additionalPanels !== undefined ? roof.additionalPanels : roof.default_additional_panels,
        }
      }),
    })
  )

// I want to run this one only if there's a change in selectedRoofs.

// Though there's no change in slectedRoofs, it fetches the data again.

// I tried the useCallback  but it does not work.

  const getData = () => {
    trigger().then((data) => {
      setData(data)
    })
  }

  useEffect(() => {
    dispatch(initSelectedRoofs(roofs))
  }, [])

  return (
    <TabGroup>
      <TabList className='flex gap-x-4'>
        <Tab icon={Map}>Modulansicht</Tab>
        <Tab icon={Table}>Statistiken</Tab>
        <Tab icon={Table} onClick={getData}>
          Analytics
        </Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <div className='flex gap-16 mt-8'>
            <CustomInstallationImage image={image} />
            <CustomInstallationParamsForm roofs={roofs} />
          </div>
        </TabPanel>
        <TabPanel>
          <div className='overflow-y-auto max-h-full'>
            <Stats />
          </div>
        </TabPanel>
        <TabPanel>
          <div className='overflow-y-auto max-h-full'>
            <Analytics data={data} isMutating={isMutating} />
          </div>
        </TabPanel>
      </TabPanels>
    </TabGroup>
  )
}