kentcdodds / kentcdodds/use-deep-compare-effect
How can I force call useDeepCompareEffect?
- Dominant language
- TypeScript
- Stars
- 1.9k
- Forks
- 88
- PR merge metrics
- No merged PRs in 30d
Description
- `use-deep-compare-effect` version: 1.6.1
- `node` version: 13.14.0
- `npm` version: 6.14.11
Relevant code or config
**ParentFile.jsx**
```javascript
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 (
)
```
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](https://sung.codes/blog/2018/11/08/emulate-forceupdate-with-react-hooks/) 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**?
Contributor guide
Research direction
Start with the ParentFile.jsx example and inspect the useDeepCompareEffect dependency list alongside the A tab's onClick handler. Reproduce the tab switch and determine the expected effect invocation and API-call behavior; done means the requested refresh behavior is clearly established.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100