Michał explains that React 18 makes rendering interruptible and lets developers enable concurrent features for specific components. The `startTransition` and `useTransition` APIs mark updates as lower priority, such as rendering search results while keeping text input responsive. `useDeferredValue` can let the UI keep using an older value while a new one is prepared.
React v18.0 & React Native 0.68
Speakers
Mike, Callstack co-founder and senior React Native developer, discusses React 18 and React Native 0.68 with senior developer Ola and head of technology Michał Piszczek on the React Native Show podcast.
The hosts say React 18 adds streaming server-side rendering, with Suspense allowing parts of a page to load without blocking one another. The new `useId` hook helps keep IDs consistent during hydration when content streams in different orders. Automatic batching groups state updates made in callbacks, reducing renders, though the hosts note it could affect applications that relied on previous edge cases.
React Native 0.68 lets teams opt in to the new architecture, easing gradual adoption while libraries catch up. Fabric provides a new renderer, and TurboModules are another part of the architecture. The hosts mention React Native Screens and Reanimated as libraries that can work with it, while cautioning that not all popular libraries are ready.
React 18 is not compatible with React Native 0.68. The hosts explain that React Native includes its own renderer, so using React 18 in the dependency tree could mean development runs React 18 while production still uses React 17. React Native 0.68 also upgrades Gradle and the Android Gradle Plugin to version 7, requires JDK 11, and can automatically download the needed NDK.
Takeaways
- Use transitions to keep urgent interactions, such as search input, responsive while lower-priority results render.
- Automatic batching can reduce renders, but check code that depends on separate state updates.
- Treat React Native’s new architecture as an opt-in migration and verify that essential libraries support it.
- Do not pair React 18 with React Native 0.68; the production renderer remains on React 17.
- Plan Android builds around JDK 11 when upgrading to React Native 0.68.
Mentioned in this talk
Search inside this talk
What was claimed 17
- role atMike is co-founder at Callstack Team
“I'm Mike, co-founder of Callstack.”
YouTube Unverified1 source· Talk
- foundedMike founded Callstack Teamco-founder
“I'm Mike, co-founder of Callstack.”
YouTube Unverified1 source· Talk
- role atMiho Pishawa is head of technology for React Native at Callstack Team
“our head of technology, Michał Piszczek”
YouTube Verified4 sources· Talk
- role atOla is senior React Native developer at Callstack Team
“Ola, who is also a senior React Native developer at Callstack”
YouTube Unverified1 source· Talk
- featureReact: Concurrent React makes rendering interruptible and enables prioritizing updates
“now rendering is interruptible”
YouTube Unverified1 source· Talk
- featureReact: StartTransition and useTransition mark updates as lower priority
“They allow us as developers to tell React that some updates are lower priority.”
YouTube Unverified1 source· Talk
- featureReact: Streaming server-side rendering
“React 18 also introduced streaming server-side rendering”
YouTube Unverified1 source· Talk
- featureReact: Suspense can coordinate components during streaming server renderingSuspense can coordinate components during streaming server rendering
“now we're going to have this in server-side rendering as well”
YouTube Unverified1 source· Talk
- featureReact: Automatic state batching for callbacks beyond event handlers
“now we have automatic state batching for all callbacks”
YouTube Unverified1 source· Talk
- metricReact Native: 0.68
“With React Native 0.68”
YouTube Unverified1 source· Talk
- featureReact Native: Version 0.68 allows opting in to the new architecture
“With React Native 0.68, we're now able to opt in to the new architecture”
YouTube Unverified1 source· Talk
- integrates withReact Native integrates with Fabric
“It's time to add Fabric and integrate with Yoga.”
14:51inExtending React Native To The Next PlatformYouTube Verified2 sources· Talk
- integrates withReact Native integrates with TurboModules
“There are also TurboModules, which were released a few months earlier.”
YouTube Unverified1 source· Talk
- featureFabric: New React Native renderer allowing synchronous rendering of UI components
“a new renderer for React Native, allowing synchronous rendering”
YouTube Unverified1 source· Talk
- featureReact Native: React 18 is not compatible with React Native 0.68
“React 18 is not yet compatible with React Native 0.68.”
YouTube Unverified1 source· Talk
- featureReact Native: Android builds require JDK 11 instead of JDK 8 in version 0.68
“JDK 11 is required for building Android instead of JDK 8.”
YouTube Unverified1 source· Talk
- featureGradle: Updated to version 7 for React Native 0.68
“they were upgraded to version 7”
YouTube Unverified1 source· Talk
