⇠ chan.dev/ lessons/ reactholiday / 2021

#24: Show pending state for useDeferredValue, 2021

When we show deferred values, it’s important to communicate to users that the view is “stale”.

We can accomplish this by comparing our current state with the deferred state.

let isStale = deferredSearchTerm !== searchTerm

When these values don’t match, the view is stale. And we can update the UI to communicate that visually. In this illustration, I change the opacity of the content while stale.

GIF showing a piece of UI with an input and several thousand paragrah tags that mirror that input. The p tags lag behind the input because they useDeferredValue. While they are out of sync, the opacity is reduced significantly. They then return to full opacity once they've caught up to the input.

Dive into today’s code here.

This is our last lesson of the series!
I’m excited to send you the video recap tomorrow.

🐦 chantastic

⬅️ back