Breaking News: Grepper is joining You.com. Read the official announcement!

useDeferredValue hook

Said HR answered on August 21, 2022 Popularity 9/10 Helpfulness 4/10

answer useDeferredValue hook

related usedeferredvalue

useDeferredValue hook

Comment

function App() {
  const [name, setName] = useState("")
  const deferredName = useDeferredValue(name)
  const list = useMemo(() => {
    return largeList.filter(item => item.name.includes(deferredName))
  }, [deferredName])

  function handleChange(e) {
    setName(e.target.value)
  }

  return <>
    <input type="text" value={name} onChange={handleChange} />
    {list.map(item => <ListComponent key={item.id} item={item} />)}
  </>
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: blog.webdevsimplified.com

Tags: hook javascript

Link to this answer
Share Copy Link

Contributed on Aug 21 2022

Said HR

0 Answers Avg Quality 2/10

Closely Related Answers

usedeferredvalue

Comment

// imagine you have a value (let's called this variable input)
// and whenever this input changes you want to do something like run a function
// which does something like it fetches some data from the server
// when the input changes ( let's call this function onChange )

// but what happens if the input is changing very fast or rapidly?????

// Your code will become slow because your input is changing constantly 
// and after every change you are making a fetch request which is bad in this case

// So what you can do you can import useDeferredValue hook from React
// What this hook does is that it set's the defered value only when the input
// had stopped changing 
// It waits for some time looking if input is still changing if yes it will wait
// till the input stops changing and then it will run your code in this case
// fetchs the data from the server

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 17 2022

Zohaib Khan

0 Answers Avg Quality 2/10

useDeferredValue hook

Contents

More Related Answers

useDeferredValue hook

Closely Related Answers

usedeferredvalue

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.