React v18.0 & React Native 0.68
Subtitles
Show
[Music] hello everybody i'm mike cyril with co-founder kohlstag and before we move to our react native show podcast i have a quick announcement to say that might be something that is interesting to you today i'm looking for the best react native developers to join my team besides working on high-end software used by millions we also contribute to open source projects such as react native paper react native testing library or repack and so you will have an opportunity to develop your skills and knowledge within these projects as well as move your own ideas into life by taking part in our r d program we are a great team full of react native crazy people about this technology and we can't wait to share our knowledge and experience with you and so if this sounds like something exciting don't wait anymore and join us it's great to be part of such a team check out the link and below and apply and i'm hoping to see you soon in our call stack office or maybe remotely depending on your location bye bye hello everyone welcome to the react native show podcast today we have a new formula for you uh me i'm okay i'm a senior react native developer at call stack with me is ola who is also senior native developer at callstack and our head of technology uh miho pishawa we're gonna meet maybe in this setup maybe someone else will join uh to discuss the latest and greatest in react and react native news and today we have two huge topics ahead of us uh we have react 18 and we have react native 0.
68 which has some impressive new things inside it uh shall we start guys yeah yeah so just for our listeners we are looking at two blog posts from react website and from react native website and we are
68 which has some impressive new things inside it uh shall we start guys yeah yeah so just for our listeners we are looking at two blog posts from react website and from react native website and we are
gonna just discuss what we're seeing there uh me how do you want to start do you want to start with react 18 um okay so let's um let's start with uh what's what's new uh or uh or what's what's announced with the uh with the blog post that uh react core team um released uh recently and uh i think that the most important thing to start with is the uh concurrent react so they changed the uh the naming from concurrent mode to um to concurrent react or concurrent features because uh now now we can turn them on uh on the component basis so the the strict uh strict mode component is is still there but we can introduce them uh not only in the uh in the root level uh but also for for specific specific components and concurrency in react 18 is the is the base for uh all of the uh all of the improvements and and possibilities for for react as a as a library and as a framework for building user interfaces yeah so before the historical background is that before react was used to be uh linear right uh one thing happens another thing happens and you can like compare it to like procedure almost and right now you can start some update and then opt out of it you can stop it you can pause it and you can uh start it again so that's basically concurrent react in a nutshell correct so so now the rendering is interruptable in other words but it's also it's also kind of auto magical right because this this feature is aimed at kind of like power users of react because like if you're just writing your basic app you don't even
need to concern yourself with the concurrency it's done in the background yes although you can use it uh as a power user and yeah and this is um common theme in this uh release of react that most of the features here are not aimed at regular developers those are aimed at library maintainers to get use of this new features so we will discuss some low-level apis how to leverage this new concurrency but at the same time they say uh authors of this blog post they say you shouldn't really do that you should wait for a mature framework like remix like next.
js to incorporate those as like you said behind the scenes mechanisms yeah it's like in the first sentence about in their blog post they say that the most important addition is something we hope you never have to think about concurrency right so that is that like you right it's kind of the theme of this whole uh this version of react i feel that it's a lot of features that are are kind of in the background uh okay so uh so we've talked some something on the concurrency but uh what what does it enables uh what's what's possible with with concurrent mode concurrent react that wouldn't be possible otherwise do you have do you have examples in mind i hope you can answer your own question yeah i'm thinking about the transition api okay yeah so uh uh wukash mentioned that there is for for power users uh there are ways to uh to play with the um with concurrency in react with different levels of uh events that can interrupt
js to incorporate those as like you said behind the scenes mechanisms yeah it's like in the first sentence about in their blog post they say that the most important addition is something we hope you never have to think about concurrency right so that is that like you right it's kind of the theme of this whole uh this version of react i feel that it's a lot of features that are are kind of in the background uh okay so uh so we've talked some something on the concurrency but uh what what does it enables uh what's what's possible with with concurrent mode concurrent react that wouldn't be possible otherwise do you have do you have examples in mind i hope you can answer your own question yeah i'm thinking about the transition api okay yeah so uh uh wukash mentioned that there is for for power users uh there are ways to uh to play with the um with concurrency in react with different levels of uh events that can interrupt
rendering and uh and one way i think that the only way uh to um to do it right now is transition api or transitions and react 18 introduced new hooks and a new apis called start transition and use transition that allow us as developers to tell react that some update is uh less important priority right so so whenever we uh as an example when we have a search input and a list of results and the updating the uh the tax input state is is high priority so we want to we want to update it as fast as possible but the uh the list can be rendered uh a bit a bit later like we we don't need to uh yeah and you want to be able to stop rendering of this list if the inputs change so you want to render the new list so that you wrap set state as uh text input and you wrap start use transition as rendering the whole filtered list another api that is used in concurrent react uh area is use deferred value which tells react that you can render the ui before i finish calculation on this particular value you can just use the old one i don't care about it so that's another low level api that you should probably not use in your application but we encourage you to try yeah that depends because if you're building like some robust application like maybe an e-commerce store or maybe something really that that that is big these features are going to be super useful because we're not building any more like uh to-do apps that are just you know 50 lines of code we're building really huge web applications with react.
js today we can and we do so it's some really useful stuff okay uh
js today we can and we do so it's some really useful stuff okay uh
what about the server rendering what's uh what's what's new here there is nothing new here that's the point that's the point uh i was reading this this blog post when it came out and i was talking about it on other podcasts as well and there is nothing new the statement here is that uh yes we are working on it we know that you are waiting for it and we will be introducing some new features in minor updates uh but right now there is nothing new but i know that react uh sorry the next next.
js framework back in fall in their conference they mentioned something that they can already use uh server components from react that they're working closely with react team to to enable that in next.
js so i don't know the state of status of that but as of now as they say this is not production ready this is not production yet okay but react 18 also introduced uh streaming server side uh rendering right so so so we're not not advised to use the render to html string or whatever the api is called but now we render to stream or to pipeable stream and and this is huge for for the server side rendered apps because it also affects the and with uh with concurrency and that's this uh this new uh server rendering pipeline is built on um we now don't have predictability in terms which parts of the of the ui are going to be streamed to our clients sooner than later and because of that react introduced another new hook called use id uh so that so that the hydration works in uh in concurrent environments so so this is uh i think this is another
js framework back in fall in their conference they mentioned something that they can already use uh server components from react that they're working closely with react team to to enable that in next.
js so i don't know the state of status of that but as of now as they say this is not production ready this is not production yet okay but react 18 also introduced uh streaming server side uh rendering right so so so we're not not advised to use the render to html string or whatever the api is called but now we render to stream or to pipeable stream and and this is huge for for the server side rendered apps because it also affects the and with uh with concurrency and that's this uh this new uh server rendering pipeline is built on um we now don't have predictability in terms which parts of the of the ui are going to be streamed to our clients sooner than later and because of that react introduced another new hook called use id uh so that so that the hydration works in uh in concurrent environments so so this is uh i think this is another
great um great audition to to react uh because uh it can now decide uh which part of the of of your ui is more important to serve to be served uh first and and this will be streamed first as well and this com combined with with suspense i was i was going to say if i if i can interject like suspense is my favorite part of react 18 and i i highly recommend watching a talk at react conf 2021.
uh it's uh by a girl from netflix and it's called streaming server rendering with suspense and she just she she shows how at netflix they use uh they use suspense to um to load all the components and to have them like not uh block one another and it it looks it looks great and yeah and and now and now we're gonna have this in server side rendering as well so this is great and i think the last thing i would like to uh sorry can i just give it a shout out to netflix i love you guys your app is amazing it works so good and i'm so glad that it's built in react native and react or react native i don't know but uh it's so much better than the any other apps uh yeah it's like it's regular bounds better than any other app like hbo prime anything they suck to that yes yeah i wonder if they use react native i wonder if we have to if we have to bleep that out but uh yeah so so the last thing i would like to just have a quick shout out uh is the automatic batching because we've heard about it definitely we have years and we have actually uh batched the um state updates in um and even handlers by default for uh for a few years already and now we can have and now we have uh automatic state patching for uh for all of the
uh it's uh by a girl from netflix and it's called streaming server rendering with suspense and she just she she shows how at netflix they use uh they use suspense to um to load all the components and to have them like not uh block one another and it it looks it looks great and yeah and and now and now we're gonna have this in server side rendering as well so this is great and i think the last thing i would like to uh sorry can i just give it a shout out to netflix i love you guys your app is amazing it works so good and i'm so glad that it's built in react native and react or react native i don't know but uh it's so much better than the any other apps uh yeah it's like it's regular bounds better than any other app like hbo prime anything they suck to that yes yeah i wonder if they use react native i wonder if we have to if we have to bleep that out but uh yeah so so the last thing i would like to just have a quick shout out uh is the automatic batching because we've heard about it definitely we have years and we have actually uh batched the um state updates in um and even handlers by default for uh for a few years already and now we can have and now we have uh automatic state patching for uh for all of the
um callbacks like so yeah again i feel like this needs some explanation and state batching is it used to be when i did set state after set state not in even handlers it would cause two or more updates right now when i wrapped it uh when i wrap it in some function it will go as one update too yeah so that we renders by default which is great thank you for improving performance yeah yeah it's like a game changer and performance wise right it's it's gonna be really visible like it's gonna cost some bugs as well right definitely definitely especially in the applications that relied on the edge cases from previous system but actually this is something this is hot take i don't know if it's true but i think they say some somewhere in this blog post that you can adapt those features income incrementally so that you can opt out of the new behavior for for some parts of your application if you don't want to break the existing edge cases oh yeah yeah and this is also the case for the new architecture in react native 68 such a great bridge yes still not stable which is still not 1.
0 and probably never be and it doesn't have to be uh just pretty stable it gets uh more stable every day and and there is and it just hit a huge huge milestone uh and uh and this milestone is uh we are now able to with the new reactive 6 0.
68 we're able to opt in to the new uh architecture something that we've been waiting for i think three years or even more uh 20
0 and probably never be and it doesn't have to be uh just pretty stable it gets uh more stable every day and and there is and it just hit a huge huge milestone uh and uh and this milestone is uh we are now able to with the new reactive 6 0.
68 we're able to opt in to the new uh architecture something that we've been waiting for i think three years or even more uh 20
um 2018 is was the first time i've heard about um rewriting the uh the render the the the core idea of uh asynchronous uh communication through the bridge so uh so yeah so that's like four years four years in development and i love that they actually did make it uh as an opt-in because um i i remember when angler decided that it that team behind angular decided that it sucked and they created angular 2 and it kind of killed the whole community i i feel and here in react native they also could have said okay this is like a breaking change you either decide to go with it or not but they're doing it with an opt-in flag well it would comfortably adopt the new architecture and i feel that it was necessary and even more so in our mobile environment so that you have a production application in stores and with new architecture you have to choose if you are using the old one or if you are using the new one so and if you are using the new one uh please be aware not every library is prepared to handle your application so there are few libraries uh like react native screens reanimated that you can use in with new architecture but some other ones also popular ones are not ready yet so we'll have this transition period when we can use old one a new one uh react in react native and you have to choose carefully which one to use uh i think it's uh worth to mention that uh react native core team learned and learned this process of incremental adoption and working um side by side with with the community on adoption with uh with react so
prior to um to to uh releasing the the the architecture they created created a working group uh for react native where they uh consulted their plans uh how the rollout would go uh they consulted ideas um tested they're still consulting right because you're saying that they consulted but it's like it's like a work program yeah it's it's still uh it's still an ongoing thing uh but we're we're past a a very important milestone and this milestone is uh as we are now now able to use fabric which is a very specific part of the new architecture which is a new renderer for for react native uh and this way we can we can have a uh synchronous rendering uh of of the ui uh components that we're using uh and i think it's worth to mention as well that fabric is not the only uh part of the architecture there's also turbo modules which were released a few months earlier to be fair fabric was was there for for a few months already in the in the open source in the repository there was just no documentation on on how to use it and uh and how to how to prepare all of the uh apps that are using react native for yeah definitely like there is this talk from uh for our from our react native eu conference uh 2021 when joshua from facebook is uh explaining hi how they adopted new architecture in facebook application already and so it was in a master branch available for everyone to see and to play with it but without any documentation it was so hard and even with the documentation the documentation is so extensive and so in detail that
uh i honestly uh i haven't got around to reading it yet it scares me it scares the out of me oh yeah it's the documentation is not too bad it's actually pretty insightful uh in terms of fabric at least the turbo models are way way more um there is there's just just more content on on this in the uh in their the official docs but with what i found uh um pretty enlightening with uh with the fabric documentation that we have right now is uh is the way how uh concurrent react features and and uh and and concurrent rendering uh of of react enables uh certain certain powers that that fabric can have so so there is this great interrupt between the react and react native but uh react 18 is not yet uh compatible with react 068 yeah i was going to say that you're happy about concremo but we can't use it in react native just yet yeah i wasn't exactly i need to be honest this is a funny funny thing because uh if you if you're um if you look at the uh of the react native comets you will see once in a while something called react sync with a date or something and what's happening is that react native repository has its own copy of react renderer and react core team is someone from react core uh usually is responsible for uh for managing uh synchronization between the react native render and uh and react core and and the funny thing about this is that
uh this this is what uh this this vendored react uh render or react version will be used in production apps uh regardless of which react you have in your packing json dependency tree so uh please don't uh don't use react 18 with react native 68 because you will end up with react 18 in development mode but in the release mode in production uh you'll still still have react 17 so uh please please be patient uh react 18 will be uh compatible with the next version of africa native which is already being cooked we are close to the to the time that we have scheduled for this coffee talk as we call it uh is there anything else new in react native o68 that we should quickly please quickly talk about um i don't know uh there are some uh some specific bugs uh fixed in the developer experience mode let's say and and there is there's a bunch of libraries and tools that were updated like uh regnetfcli or metro but the i think the most important upgrade is uh is gradle and android android grader plugin uh they were upgraded to to version seven and and now um uh jdk 11 is is required for for building android instead of gdk8 so this is uh there's a noticeable change uh and and also uh the uh the android gradle plugin will automatically download the uh ndk uh version that's needed to build react native awesome from this i i struggled with that oh yeah at some point before okay uh thank you mihao thanks ola for joining me for this coffee talk we don't have coffee yet but
for the next episode i'll get you some coffee uh to our listeners uh we were discussing two blog posts from react 18 and from react native o68 uh we'll link them in the episode notes but you can just go to the blogs to respective teams and just look at it yourselves thank you so much for listening and see you next time thanks thank you bye-bye [Music]
Timestamps
Show
Guests
Aleksandra Desmurs-Linczewska
Software Engineer
@
Callstack
Michał Pierzchala
Principal Engineer
@
Callstack
[Music] hello everybody i'm mike cyril with co-founder kohlstag and before we move to our react native show podcast i have a quick announcement to say that might be something that is interesting to you today i'm looking for the best react native developers to join my team besides working on high-end software used by millions we also contribute to open source projects such as react native paper react native testing library or repack and so you will have an opportunity to develop your skills and knowledge within these projects as well as move your own ideas into life by taking part in our r d program we are a great team full of react native crazy people about this technology and we can't wait to share our knowledge and experience with you and so if this sounds like something exciting don't wait anymore and join us it's great to be part of such a team check out the link and below and apply and i'm hoping to see you soon in our call stack office or maybe remotely depending on your location bye bye hello everyone welcome to the react native show podcast today we have a new formula for you uh me i'm okay i'm a senior react native developer at call stack with me is ola who is also senior native developer at callstack and our head of technology uh miho pishawa we're gonna meet maybe in this setup maybe someone else will join uh to discuss the latest and greatest in react and react native news and today we have two huge topics ahead of us uh we have react 18 and we have react native 0.
68 which has some impressive new things inside it uh shall we start guys yeah yeah so just for our listeners we are looking at two blog posts from react website and from react native website and we are
68 which has some impressive new things inside it uh shall we start guys yeah yeah so just for our listeners we are looking at two blog posts from react website and from react native website and we are
gonna just discuss what we're seeing there uh me how do you want to start do you want to start with react 18 um okay so let's um let's start with uh what's what's new uh or uh or what's what's announced with the uh with the blog post that uh react core team um released uh recently and uh i think that the most important thing to start with is the uh concurrent react so they changed the uh the naming from concurrent mode to um to concurrent react or concurrent features because uh now now we can turn them on uh on the component basis so the the strict uh strict mode component is is still there but we can introduce them uh not only in the uh in the root level uh but also for for specific specific components and concurrency in react 18 is the is the base for uh all of the uh all of the improvements and and possibilities for for react as a as a library and as a framework for building user interfaces yeah so before the historical background is that before react was used to be uh linear right uh one thing happens another thing happens and you can like compare it to like procedure almost and right now you can start some update and then opt out of it you can stop it you can pause it and you can uh start it again so that's basically concurrent react in a nutshell correct so so now the rendering is interruptable in other words but it's also it's also kind of auto magical right because this this feature is aimed at kind of like power users of react because like if you're just writing your basic app you don't even
need to concern yourself with the concurrency it's done in the background yes although you can use it uh as a power user and yeah and this is um common theme in this uh release of react that most of the features here are not aimed at regular developers those are aimed at library maintainers to get use of this new features so we will discuss some low-level apis how to leverage this new concurrency but at the same time they say uh authors of this blog post they say you shouldn't really do that you should wait for a mature framework like remix like next.
js to incorporate those as like you said behind the scenes mechanisms yeah it's like in the first sentence about in their blog post they say that the most important addition is something we hope you never have to think about concurrency right so that is that like you right it's kind of the theme of this whole uh this version of react i feel that it's a lot of features that are are kind of in the background uh okay so uh so we've talked some something on the concurrency but uh what what does it enables uh what's what's possible with with concurrent mode concurrent react that wouldn't be possible otherwise do you have do you have examples in mind i hope you can answer your own question yeah i'm thinking about the transition api okay yeah so uh uh wukash mentioned that there is for for power users uh there are ways to uh to play with the um with concurrency in react with different levels of uh events that can interrupt
js to incorporate those as like you said behind the scenes mechanisms yeah it's like in the first sentence about in their blog post they say that the most important addition is something we hope you never have to think about concurrency right so that is that like you right it's kind of the theme of this whole uh this version of react i feel that it's a lot of features that are are kind of in the background uh okay so uh so we've talked some something on the concurrency but uh what what does it enables uh what's what's possible with with concurrent mode concurrent react that wouldn't be possible otherwise do you have do you have examples in mind i hope you can answer your own question yeah i'm thinking about the transition api okay yeah so uh uh wukash mentioned that there is for for power users uh there are ways to uh to play with the um with concurrency in react with different levels of uh events that can interrupt
rendering and uh and one way i think that the only way uh to um to do it right now is transition api or transitions and react 18 introduced new hooks and a new apis called start transition and use transition that allow us as developers to tell react that some update is uh less important priority right so so whenever we uh as an example when we have a search input and a list of results and the updating the uh the tax input state is is high priority so we want to we want to update it as fast as possible but the uh the list can be rendered uh a bit a bit later like we we don't need to uh yeah and you want to be able to stop rendering of this list if the inputs change so you want to render the new list so that you wrap set state as uh text input and you wrap start use transition as rendering the whole filtered list another api that is used in concurrent react uh area is use deferred value which tells react that you can render the ui before i finish calculation on this particular value you can just use the old one i don't care about it so that's another low level api that you should probably not use in your application but we encourage you to try yeah that depends because if you're building like some robust application like maybe an e-commerce store or maybe something really that that that is big these features are going to be super useful because we're not building any more like uh to-do apps that are just you know 50 lines of code we're building really huge web applications with react.
js today we can and we do so it's some really useful stuff okay uh
js today we can and we do so it's some really useful stuff okay uh
what about the server rendering what's uh what's what's new here there is nothing new here that's the point that's the point uh i was reading this this blog post when it came out and i was talking about it on other podcasts as well and there is nothing new the statement here is that uh yes we are working on it we know that you are waiting for it and we will be introducing some new features in minor updates uh but right now there is nothing new but i know that react uh sorry the next next.
js framework back in fall in their conference they mentioned something that they can already use uh server components from react that they're working closely with react team to to enable that in next.
js so i don't know the state of status of that but as of now as they say this is not production ready this is not production yet okay but react 18 also introduced uh streaming server side uh rendering right so so so we're not not advised to use the render to html string or whatever the api is called but now we render to stream or to pipeable stream and and this is huge for for the server side rendered apps because it also affects the and with uh with concurrency and that's this uh this new uh server rendering pipeline is built on um we now don't have predictability in terms which parts of the of the ui are going to be streamed to our clients sooner than later and because of that react introduced another new hook called use id uh so that so that the hydration works in uh in concurrent environments so so this is uh i think this is another
js framework back in fall in their conference they mentioned something that they can already use uh server components from react that they're working closely with react team to to enable that in next.
js so i don't know the state of status of that but as of now as they say this is not production ready this is not production yet okay but react 18 also introduced uh streaming server side uh rendering right so so so we're not not advised to use the render to html string or whatever the api is called but now we render to stream or to pipeable stream and and this is huge for for the server side rendered apps because it also affects the and with uh with concurrency and that's this uh this new uh server rendering pipeline is built on um we now don't have predictability in terms which parts of the of the ui are going to be streamed to our clients sooner than later and because of that react introduced another new hook called use id uh so that so that the hydration works in uh in concurrent environments so so this is uh i think this is another
great um great audition to to react uh because uh it can now decide uh which part of the of of your ui is more important to serve to be served uh first and and this will be streamed first as well and this com combined with with suspense i was i was going to say if i if i can interject like suspense is my favorite part of react 18 and i i highly recommend watching a talk at react conf 2021.
uh it's uh by a girl from netflix and it's called streaming server rendering with suspense and she just she she shows how at netflix they use uh they use suspense to um to load all the components and to have them like not uh block one another and it it looks it looks great and yeah and and now and now we're gonna have this in server side rendering as well so this is great and i think the last thing i would like to uh sorry can i just give it a shout out to netflix i love you guys your app is amazing it works so good and i'm so glad that it's built in react native and react or react native i don't know but uh it's so much better than the any other apps uh yeah it's like it's regular bounds better than any other app like hbo prime anything they suck to that yes yeah i wonder if they use react native i wonder if we have to if we have to bleep that out but uh yeah so so the last thing i would like to just have a quick shout out uh is the automatic batching because we've heard about it definitely we have years and we have actually uh batched the um state updates in um and even handlers by default for uh for a few years already and now we can have and now we have uh automatic state patching for uh for all of the
uh it's uh by a girl from netflix and it's called streaming server rendering with suspense and she just she she shows how at netflix they use uh they use suspense to um to load all the components and to have them like not uh block one another and it it looks it looks great and yeah and and now and now we're gonna have this in server side rendering as well so this is great and i think the last thing i would like to uh sorry can i just give it a shout out to netflix i love you guys your app is amazing it works so good and i'm so glad that it's built in react native and react or react native i don't know but uh it's so much better than the any other apps uh yeah it's like it's regular bounds better than any other app like hbo prime anything they suck to that yes yeah i wonder if they use react native i wonder if we have to if we have to bleep that out but uh yeah so so the last thing i would like to just have a quick shout out uh is the automatic batching because we've heard about it definitely we have years and we have actually uh batched the um state updates in um and even handlers by default for uh for a few years already and now we can have and now we have uh automatic state patching for uh for all of the
um callbacks like so yeah again i feel like this needs some explanation and state batching is it used to be when i did set state after set state not in even handlers it would cause two or more updates right now when i wrapped it uh when i wrap it in some function it will go as one update too yeah so that we renders by default which is great thank you for improving performance yeah yeah it's like a game changer and performance wise right it's it's gonna be really visible like it's gonna cost some bugs as well right definitely definitely especially in the applications that relied on the edge cases from previous system but actually this is something this is hot take i don't know if it's true but i think they say some somewhere in this blog post that you can adapt those features income incrementally so that you can opt out of the new behavior for for some parts of your application if you don't want to break the existing edge cases oh yeah yeah and this is also the case for the new architecture in react native 68 such a great bridge yes still not stable which is still not 1.
0 and probably never be and it doesn't have to be uh just pretty stable it gets uh more stable every day and and there is and it just hit a huge huge milestone uh and uh and this milestone is uh we are now able to with the new reactive 6 0.
68 we're able to opt in to the new uh architecture something that we've been waiting for i think three years or even more uh 20
0 and probably never be and it doesn't have to be uh just pretty stable it gets uh more stable every day and and there is and it just hit a huge huge milestone uh and uh and this milestone is uh we are now able to with the new reactive 6 0.
68 we're able to opt in to the new uh architecture something that we've been waiting for i think three years or even more uh 20
um 2018 is was the first time i've heard about um rewriting the uh the render the the the core idea of uh asynchronous uh communication through the bridge so uh so yeah so that's like four years four years in development and i love that they actually did make it uh as an opt-in because um i i remember when angler decided that it that team behind angular decided that it sucked and they created angular 2 and it kind of killed the whole community i i feel and here in react native they also could have said okay this is like a breaking change you either decide to go with it or not but they're doing it with an opt-in flag well it would comfortably adopt the new architecture and i feel that it was necessary and even more so in our mobile environment so that you have a production application in stores and with new architecture you have to choose if you are using the old one or if you are using the new one so and if you are using the new one uh please be aware not every library is prepared to handle your application so there are few libraries uh like react native screens reanimated that you can use in with new architecture but some other ones also popular ones are not ready yet so we'll have this transition period when we can use old one a new one uh react in react native and you have to choose carefully which one to use uh i think it's uh worth to mention that uh react native core team learned and learned this process of incremental adoption and working um side by side with with the community on adoption with uh with react so
prior to um to to uh releasing the the the architecture they created created a working group uh for react native where they uh consulted their plans uh how the rollout would go uh they consulted ideas um tested they're still consulting right because you're saying that they consulted but it's like it's like a work program yeah it's it's still uh it's still an ongoing thing uh but we're we're past a a very important milestone and this milestone is uh as we are now now able to use fabric which is a very specific part of the new architecture which is a new renderer for for react native uh and this way we can we can have a uh synchronous rendering uh of of the ui uh components that we're using uh and i think it's worth to mention as well that fabric is not the only uh part of the architecture there's also turbo modules which were released a few months earlier to be fair fabric was was there for for a few months already in the in the open source in the repository there was just no documentation on on how to use it and uh and how to how to prepare all of the uh apps that are using react native for yeah definitely like there is this talk from uh for our from our react native eu conference uh 2021 when joshua from facebook is uh explaining hi how they adopted new architecture in facebook application already and so it was in a master branch available for everyone to see and to play with it but without any documentation it was so hard and even with the documentation the documentation is so extensive and so in detail that
uh i honestly uh i haven't got around to reading it yet it scares me it scares the out of me oh yeah it's the documentation is not too bad it's actually pretty insightful uh in terms of fabric at least the turbo models are way way more um there is there's just just more content on on this in the uh in their the official docs but with what i found uh um pretty enlightening with uh with the fabric documentation that we have right now is uh is the way how uh concurrent react features and and uh and and concurrent rendering uh of of react enables uh certain certain powers that that fabric can have so so there is this great interrupt between the react and react native but uh react 18 is not yet uh compatible with react 068 yeah i was going to say that you're happy about concremo but we can't use it in react native just yet yeah i wasn't exactly i need to be honest this is a funny funny thing because uh if you if you're um if you look at the uh of the react native comets you will see once in a while something called react sync with a date or something and what's happening is that react native repository has its own copy of react renderer and react core team is someone from react core uh usually is responsible for uh for managing uh synchronization between the react native render and uh and react core and and the funny thing about this is that
uh this this is what uh this this vendored react uh render or react version will be used in production apps uh regardless of which react you have in your packing json dependency tree so uh please don't uh don't use react 18 with react native 68 because you will end up with react 18 in development mode but in the release mode in production uh you'll still still have react 17 so uh please please be patient uh react 18 will be uh compatible with the next version of africa native which is already being cooked we are close to the to the time that we have scheduled for this coffee talk as we call it uh is there anything else new in react native o68 that we should quickly please quickly talk about um i don't know uh there are some uh some specific bugs uh fixed in the developer experience mode let's say and and there is there's a bunch of libraries and tools that were updated like uh regnetfcli or metro but the i think the most important upgrade is uh is gradle and android android grader plugin uh they were upgraded to to version seven and and now um uh jdk 11 is is required for for building android instead of gdk8 so this is uh there's a noticeable change uh and and also uh the uh the android gradle plugin will automatically download the uh ndk uh version that's needed to build react native awesome from this i i struggled with that oh yeah at some point before okay uh thank you mihao thanks ola for joining me for this coffee talk we don't have coffee yet but
for the next episode i'll get you some coffee uh to our listeners uh we were discussing two blog posts from react 18 and from react native o68 uh we'll link them in the episode notes but you can just go to the blogs to respective teams and just look at it yourselves thank you so much for listening and see you next time thanks thank you bye-bye [Music]
Show Transcript
In the first episode of Coffee Talk Aleksandra Desmurs Linczewska, Łukasz Chludziński, and Michał Pierzchała discuss the React v18 and React Native 0.68.
Resources mentioned in the episode
Launching or scaling an open-source project?
We help teams bring new open-source projects to life and grow them within the React Native space.
Let’s chat
//
Insights
Learn more about
Open Source
Here's everything we published recently on this topic.
//
Open Source
We can help you move
it forward!
At Callstack, we work with companies big and small, pushing React Native everyday.
React Native Development
Hire expert React Native engineers to build, scale, or improve your app, from day one to production.
React Development
Develop high-performance React applications with advanced patterns and scalable architectures.
React Compiler Implementation
Use React Compiler to achieve instant performance benefits in your existing applications.
React Native Trainings
Equip your team with React Native skills through tailored training sessions.
