--- title: "useDeferredValue in React 18" url: "https://www.bekk.christmas/post/2021/22/usedeferredvalue-in-react-18" authors: ["Joakim Sjøhaug"] published: "2021-12-22" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["React"] keywords: ["react", "react18", "useDeferredValue"] --- # useDeferredValue in React 18 With React 18, a new hook is available which can slow down our UI on purpose 🤯 Why may we need such a hook? 🤔 ## In short useDeferredValue lets React intentionally let a value lag behind so parts of the UI can stay responsive when rendering is slow. It can make interactions like searching in large tables feel smoother, and unlike debouncing it only introduces lag when the render actually takes time. - **For:** Frontend developers using React 18 - **Good to know beforehand:** Basic React knowledge _AI-generated_ ## ⏲ useDeferredValue `useDeferredValue` is a new hook that is part of the [concurrent mode patterns](https://reactjs.org/docs/concurrent-mode-patterns.html) being introduced in React 18. The hook exists such that we can introduce an inconsistency in the UI, **intentionally.** By default React guarantees that the UI is rendered consistent, always. This means that whatever React is told to render, React will guarantee that the components will reflect the same data that is passed to them. In most cases this works really well and gives a great user experience, however, there may be cases where an inconsistency can give a better user experience and here `useDeferredValue` come in handy. As mentioned `useDeferredValue` exists such that we can create an inconsistency in the UI. The hook takes two parameters, a value to defer, and an optional config object. Currently the config object is used to tell the maximum time react can defer a value. ```tsx const [searchText, setSearchText] = useState(""); const searchTextDeferred = useDeferredValue(searchText); ``` The block above show a simple example where `useDeferredValue` is used to create a deferred version of the search text. ## 🤔 How does it differentiate from debouncing? If you have been in touch with `debouncing`, you may think that `useDeferredValue` and `debouncing `are the same. In one way, they are doing the same - _making it possible to delay a value_. However, there is one major difference between the two techniques. In React 18, `useDeferredValue` will only make a value "lag behind" if the rendering takes a while. On the other hand, a `debounce` method will always introduce a lag, it does not matter how fast the computer is. ## ✨An example To give a short demonstration of the `useDeferredValue` hook, we have implemented a [simple web application](https://usedeferredvalue-example.netlify.app/) to view and search for players in Fantasy Premier League ⚽️ > To see the effect of the useDeferredValue hook on your machine, [throttle your CPU](https://umaar.com/dev-tips/88-cpu-throttling/) while looking at the example application 🐌 The web application fetches all players from the Fantasy Premier League API and displays them in one **big** simple table along with a search field 🤓 There is only one problem. Looking at the `gif` below, we can see how typing the name of a player in the search field causes stutter. ![Text field without a deferred search text](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/a6a21e6a2934ac02f6f88856c7f6c905065061f9-756x154.gif) If you, like me, have created large tables with the possibility to search for a value, you would probably have thought about introducing the `debounce` method now, but wait! Changing our implementation to use the new `useDeferredValue` hook on the value of the search field - typing a player’s name suddenly feels more responsive. ![Text field with a deferred search text](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/dd32b7adb4d3b454543d5d242fb1f56b10f0d656-756x154.gif) It’s worth noticing that using `useDeferredValue` comes with a cost - we are slowing the results with a lag. For most users the lag would be unnoticeable and most important, for users with a slower computer the experience would be better. ## 👩🏼💻 The Implementation If you want to have a look at our example implementation using the `useDeferredValue` hook - it is available [here](https://github.com/joakimsjo/useDeferredValue-example)🎅🏻 Thanks for reading - and happy holidays! 🎄🎁 ## Relevant resources recommended by the author - [Example code](https://github.com/joakimsjo/useDeferredValue-example)