How can I force call useDeepCompareEffect?

• use-deep-compare-effect version: 1.6.1
• node version: 13.14.0
• npm version: 6.14.11

Relevant code or config

ParentFile.jsx

  const params = useParams()
  const useForceUpdate = () => useState()[1]
  const forceUpdate = useForceUpdate()
  const [tripItems, setTripItems] = useState({})
  const [loading, setLoading] = useState(false)
  const [currentTrip, setCurrentTrip] = useState({ trips_locations_items: [] })

  // grab user from state
  const { user } = useSelector(state => state.user)

  useDeepCompareEffect(async () => {
    console.log('useDeepCompareEffect')
    setLoading(true)

    try {
      
      const trip = await findOneByShortUidOrUid({
        short_uid: params.trip_uid,
        user_uid: user.uid,
      })

      setCurrentTrip(oldTrip => ({ ...oldTrip, ...trip }))

      setupGrid()
      setLoading(false)
    } catch (error) {
      
    }
  }, [params, currentTrip])
  
  return (
    <div className={classes.container}>
      {loading && !_.isNil(currentTrip) ? (
        <p>Loading...</p>
      ) : (
        <Tabs>
          
          <TabList
            className={classes.tabsList}>
            <Tab
              onClick={forceUpdate}
              className="react-tabs__tab"
              selectedClassName="react-tabs__tab--selected-custom">
              A
            </Tab>
            <Tab
              className="react-tabs__tab"
              selectedClassName="react-tabs__tab--selected-custom">
              B
            </Tab>
          </TabList>

          <TabPanel>
            <A />
          </TabPanel>
          <TabPanel>
            <B />
          </TabPanel>
        </Tabs>
      )}
    </div>
  )

What you did:

I am using react-tabs to render 2 tabs: A and B.

When I initally load the page, by default, Tab A loads and called useDeepCompareEffect, which calls my API, gets a deeply nested object and adds to local state.

Then I click B, and do some stuff there and at some point I want to go to back to A. However, when I go back to A, I would like to call the API again to get any new changes.

I took a look at the following article about force re-rendering a component but I am not able to do so here (hence the onClick={forceUpdate}).

How can I force call useDeepCompareEffect when I click on A?