What is React Concurrent Mode: A Walkthrough
- 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