Following up on our introduction to act18 and the automatic batching feature, today we’re going to talk about useDeferredValue.

What’s the use?

lets you defer updating the less important parts of the screen

Allows users to delay screen updates to low-priority parts.

In human terms, if some rendering is performance-intensive, such as there is real-time calculation and feedback, we can use this Hook to reduce the priority of the calculation, so that the whole application does not get stuck.

Most of the scenarios are likely to be user feedback. For example, Baidu input box, the user may input very fast, I believe we have an experience, is when we use the input method, in the middle of the selection of which word it, pinyin or input fragments have been searched.

In fact, many input fragments of information in the intermediate state are useless, which not only wastes service resources, but also causes other rendering tasks to stall due to the real-time update of React application and the single-threaded nature of JS. Let’s use useDeferredValue to avoid this problem.

Speaking up

I’ll stick with the previous code project

import React, {useState, useEffect} from 'react'; const List = (props) => { const [list, setList] = useState([]); const [count, setCount] = useState(0); useEffect(() => { setCount(count => count + 1); setTimeout(() => { setList([ {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, ]); }, 500); }, [props.text]); Return [< p > {' I was triggered + count + 'times'} < / p >, < ul > {list. The map (item = > < li > Hello: value: {item. The name} {item. Value} < / li >)} < / ul >]}. Export default function App() {const [text, setText] = useState(" meow "); const handleChange = (e) => { setText(e.target.value); }; return ( <div className="App"> <input value={text} onChange={handleChange}/> <List text={text}/> </div> ); };Copy the code

This is how we write our code. When the value of the input box changes, we use setTimeout to simulate the time-consuming operation of requesting data from the back end or doing a lot of calculations. UseEffect is triggered whenever the contents of the input field change, and we use count to count.

\

Every time we make an input or a change, it triggers an update, so let’s change that.

We just need to modify the external component so that the Text variable passed in to the List is a deferred update value.

Careful students can be found, huh? ! It doesn’t seem to make any difference. In fact, React will try to use lower latency when the network and device allow it. Isn’t that very nice?

The difference with anti-shake

It is estimated that many students will think when they see the author’s scene at the beginning, is this anti-shake? At the beginning deliberately sold a mystery, did not mention the concept of anti – shake. There is a big difference with anti-shake here, so no matter how fast the machine, the network situation, will always be in the user to stop the input between the fixed execution. For simplicity, we use the following ahooks useDebounce.

import React, {useState, useEffect, useDeferredValue} from 'react'; import {useDebounce} from 'ahooks'; const List = (props) => { const [list, setList] = useState([]); const [count, setCount] = useState(0); useEffect(() => { setCount(count => count + 1); setTimeout(() => { setList([ {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, {name: props.text, value: Math.random()}, ]); }, 500); }, [props.text]); Return [< p > {' I was triggered + count + 'times'} < / p >, < ul > {list. The map (item = > < li > Hello: value: {item. The name} {item. Value} < / li >)} < / ul >]}. Export default function App() {const [text, setText] = useState(" meow "); const deferredText = useDeferredValue(text, {timeoutMs: 1000}); const debouncedValue = useDebounce(text, { wait: 1000 }); const handleChange = (e) => { setText(e.target.value); }; return ( <div className="App"> <input value={text} onChange={handleChange}/> <List text={deferredText}/> <List text={debouncedValue}/> </div> ); };Copy the code

If you like, you can follow it. If you want to talk to me in more depth, you can search the official number: Meow Dad’s Small workshop