This Wednesday Wisdom deck goes into the world of React Concurrent Mode. Dive deep into its cutting-edge features, understand the tangible benefits it brings to your applications, and gain insights into its versatile real-world use cases. Wednesday is a leading Product Engineering Agency. We have worked with over 50 Global Brands. Due to our product thinking expertise, Wednesday has been the agency of choice for fast-growing startups. Over 10% of India's Unicorns are our customers. We are known for our expertise in: 1. Data Engineering: Using DataOps principles, we build data pipelines that are cost-effective and performant and allow you to make strategic decisions. 2. Applied AI: We use large language models and your proprietary data to build data-centric intelligent apps for your customers. 3. App Development & Modernization: We use our expertise in strategy, product development & design to build web, mobile, TV & IoT Apps. We offer our expertise via the following services: - Launch: Idea from napkin sketch to product market fit. - Amplify: Engineering & design for companies with product market fit. - Control: Fast-paced, tight-deadline projects suited for enterprises. - Catalyse: Staff Augmentation If you want to explore an opportunity to work with Wednesday, send your resume to careers@wednesday.is.

1. Concurrent React
wednesday.is
Presented by:Aditya Doshi

2. 2
Content
What we’ll be covering
What exactly react concurrent mode is
How it works behind the scenes
Code Examples
React new features, apis to run concurrent mode

3. 3
Concurrent Mode
The what and the why?
Concurrent mode is a set of new features that help React app stay responsive and
gracefully adjust to the user’s device capabilities and network speed.
Concurrent react can work on multiple tasks at a time, and switch between them
according to priority.

4. 4
Use cases
Concurrent react can partially render a tree without committing the result
Example
React can start rendering an update & if it hit’s a component that hasn’t finished loading for
instance, react can wait for it to complete before it continues & it doesn’t immediately has
to show a fallback or a spinner.

5. 5
Thread
The what and the why?
Concurrent react does not block the main thread.
So today when react updates a component, it’s going to do all of the work in a single
uninterruptible block on the main thread.
User events fire in the main thread, so the issue is, when react is rendering an update & in
the meantime user tries to type into the input, it would not be able to process until the re-
render is completed.
But in concurrent react, it’s going to pause the current render, it’s going to switch to
complete the user blocking task & then resume afterwards on the original rendering part.
Also referred to time slicing - ability to split work into chunks and spread it’s execution of
time.

6. 6
Comparing with code splitting
Code splitting usage & a limitation
Usage: Instead of sending all of the code for the initial payload, we send down what’s
needed for the first screen & we defer the rest to later, maybe with lazy loading, navigation.
Limitation: If the view hasn’t finished loading, what do you display to the user? Maybe a
spinner, placeholder.

7. 7
Concurrent react is not blocking
You can render large amount of work without blocking user inputs or other high priority
tasks on the main thread.

8. 8
startTransitionAPI
Lets you mark updates inside the provided callback as transitions.
Updates in a transition will not show a fallback for re-suspended content, allowing the user
to continue interacting while rendering the update.

9. wednesday.is
useTransition hook
useTransition hook provides access to two variables - startTransition &
isPending
It is a function which will tell react which render are less important, isPending is a boolean that
tells us weather our list is pending to be rendered or not

10. 10
Suspense for data fetching
It allows to show a placeholder while waiting for a code split part of our application.
Asimilar way to work as transition but here it works anything using promises.
To work with suspense, we need to wrap promises with a function wrapPromise which
returns different values based on what suspense is expecting on each step of the process.

11. 11
Key Takeaways
What we learned
How concurrent mode works
Thread execution
Code splitting
Code examples

12. Thank you
for your time
wednesday.is