Hey! I’m Nikhil👋🏻
Engineer @Postman
@niksharma1997
nik72619c
> npx nik72619c
Wait…React is Multi-threaded?
User Experience is Important!
Lets see the problem…
Let’s do the math
Javascript
Style
Layout
Paint
Composite
16ms
Javascript
Style
Layout
Paint
Composite
16ms
WEB WORKERS
“Web workers allow us to do work in parallel using separate threads”
“Web workers allow us to do work in parallel using separate threads”
Worker
“Web workers allow us to do work in parallel using separate threads”
Worker
new worker()
worker.postMessage()
self.addEventListener()
“Web workers allow us to do work in parallel using separate threads”
Worker
new worker()
worker.postMessage()
self.addEventListener()
worker.addEventListener()
self.postMessage()
“Web workers allow us to do work in parallel using separate threads”
Worker
new worker()
worker.postMessage()
self.addEventListener()
worker.addEventListener()
self.postMessage()
worker.terminate()
What about Concurrent mode ?
User event
Render phase
(Uninterruptible)
Commit phase
Next event
User event
Interruptible render phase
Commit phase
(Uninterruptible)
Interleaved events
Isn’t JS single-threaded?
Thread != CPU core
So why don’t we use it?
Message passing is too much effort
How to know when it’s complete?
How to coordinate between workers?
Promises! 🤞
useWorker
https://github.com/alewin/useWorker
COMLINK
https://github.com/GoogleChromeLabs/comlink
Define
Use
When to use
When not to use