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

useTransition

Add Answer

Zohaib Khan answered on November 12, 2022 Popularity 9/10 Helpfulness 2/10

answer useTransition

related useTransition example

related useTransition hook

useTransition

Comment

//useTransition is used to make some code/function run later
// For example if you want to do 2 functions when a user clicks a button
// but you want 1 function to run immediately and 1 function to run later 
// to increase performance you can use useTransition.
// consider following code below

import { useState, useTransition } from "react";

function App() {
  // useTransition returns two thing 
  // i - first is a boolean value
  // 	 which shows if the code has completed or not 
  // ii - second is a function in which you can pass your function
  //      which you want to run later or set to low priority
  const [isPending, startTransition] = useTransition()
  const [input, setInput] = useState('');
  const [list, setList] = useState([]);
  const LIST_SIZE = 20000;

  const handleChange = (e) => {
    setInput(e.target.value);
    startTransition(() => {
      // As you can seee LIST_SIZE is quite big and it's make react
      // lags due to the for loop below, so what we have done is that
      // we pass the for loop to useTransition by doing this react knows
      // that this code is of low priority and react first renders your input 
      // value and then it's start a second render which will run the forLoop
      const l = []
      for (let i = 0; i < LIST_SIZE; i++) {
        l.push(e.target.value);
      }
      setList(l);
    })
  }

  return (
    <div className="App">
      <input type="text" value={input} onChange={handleChange}/>
      <ul>
    // Here we have use isPendind boolean to update the UI
    // if react is still running the for loop
        {isPending ? "Loading..." : list.map((item, index) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
    </div>
  );
}

// NOTE !!!!!
// You should not misuse the useTransition because it increases the number 
// of render react make 

export default App;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Nov 17 2022

Zohaib Khan

0 Answers Avg Quality 2/10

Closely Related Answers

useTransition example

Comment

function App() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);
  
  function handleClick() {
    startTransition(() => {
      setCount(c => c + 1);
    })
  }

  return (
    <div>
      {isPending && <Spinner />}
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: reactjs.org

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 12 2022

Dizzy Dingo

0 Answers Avg Quality 2/10

useTransition hook

Comment

const [isPending, startTransition] = useTransition()

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: react.dev

Tags: hook javascript

Link to this answer
Share Copy Link

Contributed on Oct 01 2023

Comfortable Chicken

0 Answers Avg Quality 2/10

useTransition

Contents

More Related Answers

useTransition

Closely Related Answers

useTransition example

useTransition hook

Grepper

Documentation

Social

Legal

Contact

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