React: Concurrent Rendering

GITHUB
Concurrent rendering is a way of scheduling rendering work.
The developer tells React which updates are more important and which are less important.

Since React runs on JavaScript, there is only one main thread.

Imagine a kid building a Lego city.

While building it, his sister falls down. He pauses building the Lego city (lower priority), helps his sister (higher priority), and then resumes building the city.

React example
Consider two state updates
  1. State update for the text typed in the input box
  2. State update for the computed results based on the input
For a smooth user experience:
The text the user types must appear immediately
The computed results can appear with a slight delay

So we tell React:
Treat updates that affect the input value as high priority
Treat updates that render derived or expensive results as low priority

If React is busy rendering less important work and a high-priority update arrives, React can pause or abandon the low-priority rendering, update the input immediately, and then resume the less important work later.

What useTransition is NOT doing:

It does not make code async
It does not run code on another thread
It does not speed up computations
It does not affect network calls
It only affects rendering priority.

Example:
const [text,setText] = useState("");
const [query,setQuery] = useState("");

const [isPending, startTransition] = useTransition();

const items = useMemo(() => {
    return Array.from({ length: 20000 }, (_, i) => `Item ${i} - ${Math.random()}`);
}, []);

const filtered = useMemo(() => {
    let result = items;
    for (let i = 0; i < 400; i++) {
        result = result.filter((x) => x.includes(query));
    }
    return result;
}, [items, query])

return (
<>
<div>
    {isPending ? "Filtering..." : `Results: ${filtered.length}`}
</div>


<input type="text" value={text}
onChange={(e) => {
    const val= e.target.value;
    setText(val); //urgent
    startTransition(() => {
        setQuery(val); //non-urgent
    })
}}
/>
<ul>
    {filtered.slice(0, 200).map((x) => (
        <li key={x}>{x}</li>
    ))}
</ul>
</>
)

Summary:
startTransition(() => {
    setQuery(data);
});

You are explicitly telling React:
  • This update can be deferred
  • This update can be interrupted
  • This update can be dropped if something newer comes in
  • React then schedules that update at a lower priority.








Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more