© 2022 airSlate Inc. All rights reserved.
Concurrent React 18.
“I might do it later”

© 2022 airSlate Inc. All rights reserved.
1. Understand what is the main bottleneck in the world of high-performance frontend apps.
2. See the way how React solves this issue
3. Understand that scheduling and prioritization are extremely important for responsive UX
4. Take a look at React architecture under the hood
5. Understand how our declarative react code turns into actions
6. Learn some practical scheduling tricks
7. See how react “workLoop” works
8. Understand how react concurrent features work
Purpose

© 2022 airSlate Inc. All rights reserved.
The Problem

© 2022 airSlate Inc. All rights reserved.

© 2022 airSlate Inc. All rights reserved.
Long Task = Unresponsive App = Bad UX = Sad user

© 2022 airSlate Inc. All rights reserved.
Problem to solve
We have:
long taking cpu tasks, plenty
of user events, browser
network events, user
interface updates (style
recalculation, layout, paint).
We want to
achieve:
>= 60 fps, responsive UI/UX
How?

© 2022 airSlate Inc. All rights reserved.
Answear
Task Splitting Batching
Prioritization Scheduling

© 2022 airSlate Inc. All rights reserved.
Welcome, React Fiber.

© 2022 airSlate Inc. All rights reserved.
React Fiber is a main and central entity in React. It is an object which represents our react
components and associated with them dom nodes, and has all the information about what
should react do with it.
● Can split work into chunks
● Prioritizes and batch units of work
React Fiber

© 2022 airSlate Inc. All rights reserved.
● Stack reconciliation
● Blocking of the main thread for layout/animations
● Impossible to split work into chunks to fit in render frames
● Impossible to pause
● Impossible to react on user events rapidly
Before React Fiber

© 2022 airSlate Inc. All rights reserved.
Fiber Interface

© 2022 airSlate Inc. All rights reserved.
React Fiber Tree

© 2022 airSlate Inc. All rights reserved.

© 2022 airSlate Inc. All rights reserved.

© 2022 airSlate Inc. All rights reserved.
Double buffering is a term used to describe a device with two buffers. For example,
with graphics, double buffering can show one image or frame while a separate frame is
being buffered to be shown next.
Double buffering

© 2022 airSlate Inc. All rights reserved.
State update
React working cycle
Reconciliation
creating workInProgress
tree
Commit Mark workInProgress
tree as a current

© 2022 airSlate Inc. All rights reserved.
Interruptible Not interruptible onCommitRoot
run unmount effects
run mount effects
performUnitOfWork commitRoot
add changes
to the DOM
component
function call
beginWork
create/update DOM
nodes in memory
completeWork

© 2022 airSlate Inc. All rights reserved.
workLoopSync
Event
update
{ lane, action };
scheduleUpdate
Update using setState

© 2022 airSlate Inc. All rights reserved.
workLoopConcurrent
Event
update
{ lane, action };
scheduleUpdate
Update using startTransition

© 2022 airSlate Inc. All rights reserved.
Concurrency

© 2022 airSlate Inc. All rights reserved.
time
1 processing unit
3 processing units
tasks

© 2022 airSlate Inc. All rights reserved.
Scheduler

© 2022 airSlate Inc. All rights reserved.
setTimeout zero, schedules a task to the next event loop tick with a delay of about 4
ms. There is a hack with MessageChannel api which is much faster.
setTimeout(fn, 0) vs MassageChannel

© 2022 airSlate Inc. All rights reserved.

© 2022 airSlate Inc. All rights reserved.
Recursive setTimeout vs MessageChannel
benchmark results
Machine
Runs
avg results
recursive setTimeout
recursive MessageChannel
Macbook Pro, 2,6 GHz 6-Core Intel Core i7
1000
4975 ms
14ms

© 2022 airSlate Inc. All rights reserved.

© 2022 airSlate Inc. All rights reserved.
Better JS scheduling with
navigator.scheduling.isInputPending()
The isInputPending() API is the first to use the concept of interrupts for user inputs on the
web, and allows for JavaScript to be able to check for input without yielding to the browser.

© 2022 airSlate Inc. All rights reserved.

© 2022 airSlate Inc. All rights reserved.
Scheduler task

© 2022 airSlate Inc. All rights reserved.
What is React Lane?
Lane is a 32-bit representation of a task at reconcile time, and the actual code
for Lane is as follows.

© 2022 airSlate Inc. All rights reserved.
Why does React use Lanes in form of bitmasks?
● Faster
● Less memory consumption
● Lanes can express many distinct task threads with a single, 32-bit data type.
● Absolute priority value over relative “Expired Time” approach

© 2022 airSlate Inc. All rights reserved.
The model for handling priorities in React 16 is Expiration Time, which uses a length of time to describe
the priority of a task.
React 17, on the other hand, uses the Lane model to handle task priorities, which is able to cover more
boundary conditions by assigning different priorities to a bit and manipulating the priorities through 31-
bit bitwise operations. In short: a binary number is used to represent the priority of a task
React 16 vs React 17

© 2022 airSlate Inc. All rights reserved.
We need to use it in case if we want to separate some parts of updates on UI.
Usually split into urgent and lightweight ones VS long taking and less important.
useDefferedValue, useTransition

© 2022 airSlate Inc. All rights reserved.
Conclusions

© 2022 airSlate Inc. All rights reserved.
Thank you!