Concurrent Features - GRIM-Technologies/react-training.adv GitHub Wiki
In the component called Concurrent.jsx we see an implementation of a photo filtering feature. The general responsibility it has is the following:
- Fetch photos
- Render the photos
- Filter which photos are shown based on:
- Filter term changing
- Photo data updating
The experience of using this feature is very poor, the number of photos that we're loading is just huge! Let's say that we can't change that. Let's explore what we can do in this example to improve the UX of handling this large dataset.
After an API call to fetch photos is completed, we try to render the entire response. Each item in the response contains a URL to an image. If we try to render all of those at the same time, the browser will either freeze or stall for some time, whether the image exists or not.
In this situation, we may benefit from the <img> attributes own HTML API to ensure that only image sources that are in the vicinity of the viewport are actually fetched.
When the app sets new state, after fetching data and after receiving new filtering terms, the component re-renders the photos. This blocks the entire UI until that render is completed, meaning we can not type in new text in the filter text input.
Using useTransition, we can prevent the blocking of the UI and allow the state update to be interrupted in favour of more important state updates.
Implement the hook in order to improve the UX for filtering this list of photos.