Custom API Hook

Exercise

Setup

1. Clone the PhotoFavorite repository from https://github.com/andrekovac/PhotoFavorite if not done yet.
2. Run git switch 04-custom-hook-for-api-call to switch to the 04-custom-hook-for-api-call branch, in fact this state: https://github.com/andrekovac/PhotoFavorite/tree/04-custom-hook-for-api-call

• You'll notice a small difference to the result of the previous task: The PhotosScreen now contains a PhotoList component which fetches the photos and renders the list.

Task

The current state of the app contains a custom hook.

1. Observe the diff where the custom hook useDataApi was added: https://github.com/andrekovac/PhotoFavorite/commit/49d8855131aaf1ea45e759d0cdedec03dad58d9c

   • How does this custom hook generalize API calls.

• How is it assured that a new fetch will take place whenever the url provided to the useDataApi hook changes? What is the crucial line number in useDataApi.ts?

2. Observe the file https://github.com/andrekovac/PhotoFavorite/blob/04-custom-hook-for-api-call/src/hooks/useDataApi.ts

Solution

Question: What is the crucial line number in useDataApi.ts?

Answer: 34