N/A Hey welcome back to Code with Beto In today's video I wanna do a deep dive into React Native 83 It was announced yesterday by the React Native core team and it comes with so many great features developer experience improvements and new dev tools features This React Native version is a special release as well because it now comes with React Native 19.2 features like the new activity and use effect event APIs So in today's video I want to show you how you can use them when to use them and explore all the new features that now will be possible to use in 83 so that you are ready for 2026 If that sounds fun let's get started Before we dive deeper into the blog post I want to talk to you a little bit about the courses and resources that we offer at codewithbeto.dev for beginners mid-level engineers and senior engineers I'm pretty sure you'll find it helpful not only because everything we cover with the React Native course we cover many things not only the basics but also integrations with payments in-app purchases how to design a beautiful application how to make it work across platforms routing deep linking backend submissions automations with CICD pipelines and all that good stuff But I want to talk to you guys about the resources that we are offering here at codewithbeto.dev and one of my favorite examples and the one that I've been working the most is the AI Tattoo application pro members at copypetadev get access to all these projects not only courses the access by the way is lifetime so you get access forever and you get access to the latest and greatest projects that we are doing experiments and production ready applications also i'm proud to share that this is actually a real application with real users that are paying us it's making 49 per month and don't believe me believe these amazing engineers and react native community members that have been kind enough to publish tweets about my work about the things that i do they truly believe that the work that i do is top tier so i'm pretty confident that all my resources will help you i'm going to leave the link in description now let's go back to the video now there are multiple ways to test react native 83 N/A if you are not using expo you can just upgrade directly but if you are using expo you can also try it by upgrading to the latest canary version and if you want to just do a quick test like me you can create a new project using the canary template so in this case by running create expo app with the template blank type script which is the one that i like to use because it comes um very simple just to test react native 83 it it comes just with an apptsx file and then you pass the add canary this will create the project with 80 k55 and using react native 83 so i already created a project actually and i have it here open just to show you this template it's very simple only comes with these dependencies four dependencies expo 55 canary react 19.2 and react native 83 which is the good stuff that we have access now with react native 83 in case you are living under a rock some researchers N/A recently discovered a critical security vulnerability in react server components this does not directly affect react native stuff but if you are using any of these dependencies you need to upgrade immediately what you need to do is just upgrade expo router and just just expo if you are using experimental react server components and react server functions okay just a quick fyi now let's jump into activity this is actually one of the new apis N/A available with react 19.2 this is a simple pokedex application that is hitting just the pokey api and showing some pokemons but i want to mention some of the latest apis from react that we can use in react native which is really nice we can use the use api this api guys it's really cool because it allows you to pass a promise and then it will return the data directly okay look at that that's the loading state and after a moment we get some pokemons and i'm using activity here and i'm going to show you the link i'm going to show you the code in a moment but i want to mention that you know you can now just use use and pass a promise you can pass context not only a fetch function for example this is just a simple fetch function with a delay of two seconds so that we can see the skeleton this means that in one line of code we can get the data directly and pass it to the flat list and render it but how the heck are we looking at the skeleton so let me show you this is the pokemon list and i have it wrapped in a suspense that while we are fetching or while we are resolving this promise it's going to render the fallback which is the pokemon skeleton which um and it's what you're seeing on the device at the beginning right there for two seconds now what would happen if i remove this suspense let's comment it out let's refresh the application nothing right because we're resolving the promise so because this component is using use with the fetch function that means that we can wrap it into a suspense which is one of the other newer kind of newer i mean it's pretty old at this point but it's new in react native because now you can use it and you can provide a component fallback that is going to be re-rendered while we are fetching or while we resolve the promise of this component so now what i'm doing here is using the new activity api that also comes with react now activity accepts a mode either visible or hidden some people actually on x having asking me you know this could have been an enum so that you can pass different values like in in this case i would like my my value of the tab to be pokemon or items right but i can only use visible or hidden this means that for these two tabs i have to have two activities and each activity needs to validate if the active tab is in this case items or pokemon then it's going to be visible otherwise hidden now from now on guys if you are on react native 83 i would recommend that you always use activity this is because activity preserves the state of the component when is hidden this means that you You don't need to you won't see like jumping layouts This is what you would usually do And this also works but you know it's more prompt to errors And I think it's not that performance and it doesn't look as clean as a new activity API So you are gonna need to change this in your new projects Now this is gonna be very fast Look at this And we don't have any jumps or anything Now we also have this use effect event N/A but this new effect event is another API that comes from React 19.2 that is now possible to use in React Native 83 It's aiming to solve one of the common patterns when using use effect which is to notify the application about some kind of event from an external system You know that you sometimes have like subscriptions inside the use effect and you're kind of like listening for updates And the problem with this approach is that a change to any value inside such an event will cause the surrounding effect to rerun So in this case they are abstracting the set notification connected passing the theme into a use effect so this is going to take a a function as you can see here and then it's just going to set the state or do anything that you need to do when for example you connect to the web socket in this case or whatever it is that means that we don't need to add the theme i think to the dependencies in this use effect i still need to get used to this api i haven't really used it but keep that in mind if you encounter that you're using you know so many dependencies here just setting state you might need to use a use effect event another N/A big change for react native developers is that we have new features in the dev tools now you are going to be able to view the network request in the dev tools which is really cool here we can see a quick example you now will have a network inspection inspection but this is actually this was already possible with expo and there is actually a note here they are explaining the network calls that they support which is fetch xml http request and image okay with custom networking networking libraries such as expo fetch coming later in case you didn't know expo comes with a fetch function which is actually cooler than the one the fetch function that comes with react native because expo fetch allows you to i mean it supports streaming and all the good stuff apps using expo will continue to see the expo network panel a separate implementation by the expo framework which will log these additional request sources but has slightly reduced features but keep that in mind so let's quickly see this in my application here i have the dev tools i have the export network here let's refresh the application by pressing r i think we should be able to do it maybe command r yes that is going to refresh the application here we have the fetch request so how cool is that you can filter fetch jazz image media or all i like to keep fetch especially if you have many images and yeah so here we have the pokemon you can see the um let me close this you can see the endpoint the request method the payload the preview of the response and the response now let's take a look at the performance tab by the way let's see if i have it here we do have this performance cool let's see what we can do with it so the performance tracing allows you to record a performance session within your application to understand how your javascript code important your javascript code is running and what operations took the most time so in react native we show javascript execution react performance tracks network events and custom user timings rendered in a single performance timeline together with support for web performance apis in 83 this is a powerful feature set providing fine grain visibility into what might be making your react native react native application slow we encourage everyone to try out a performance panel to make it a part of your daily workflow let's take a look let's see if i can get it to work here click the record button or hit um command e to start a new recording okay let's do that i'm going to press the button and it's um i guess just recording the performance of my application so let's go back to my app and then maybe i can just maybe shake um oh and it's frozen there we go let's see if you can see update let me shake and reload the app not sure if this application will have something meaningful to see but let's go back let's stop it and let's see what kind of info we have here oh wow this looks pretty cool huh so here we can see the timeline and you can move around it and see what's going on with the code you can um zoom in here using the trackpad as well and move left and right so if i zoom in here let's see what happened here scheduler we have thread what is this I mean the amount of detail that you can see here it's massive and you can just keep zooming in and see exactly what's going on in your app something really cool is that you can double click and add a label hello hit enter and then it's going to be on the left you can always come back to this specific item this looks very nice look at this so if you select for example this function it's going to take you the time that it took to execute 35 milliseconds so of course this application does not really need to have a performance check because it's just one screen but definitely super cool that you can do this so performance it's a very important thing and definitely i think this deserves a video on its own but make sure to check it out and start exploring just run some tests and see if you can spot anything unusual there is a new desktop N/A application today we're introducing a vastly improved desktop experience with our new bundle desktop application It features the same zero install setup as before faster launch better windowing and improved reliability All right I didn't know that Man I'm testing this on Chrome instead of downloading the application Where's the link Well I don't see the link to download but cool Now there's a new Canary feature guys very important N/A intersection of servers You know the React Native core team and you know Expo and all the React Native community we're always working on bringing web APIs into React Native And now there's a new Canary intersection of server that you API that you can check out And what this allows you you can see here in the video it allows you to detect the intersection between a view between views right So for example you can drag an item inside a box view like you can see here and then you will get events and you can do any logic based on that Next we have experimental Hermes V1 N/A Hermes V1 is the next evolution of Hermes with improvements in the compiler and the virtual machine that significantly boost JavaScript performance This is great This means React Native applications are getting faster and faster N/A They also introduce a new experimental feature that allows you to compile out the legacy architecture on iOS If your app is already in a new architecture you can try to remove the legacy architecture code by installing your pods with this flag Interesting There's another experimental feature debug your pre-compiled binaries on iOS In this release we've implemented the ability to debug your React Native code that is shipped with a pre-compiled binary So in case you didn't know React Native 82 I think introduced pre-compiled React Native This means that when you are building your application you don't need to compile React Native right You still need to compile other libraries that you're using in your project but by pre-compiling or shipping pre-compiled libraries like React Native this makes building the application extremely faster That's why the entire community is working on pre-building modules and libraries so that building React Native applications is fast And you can now debug your pre-compiled binaries in case you are a maintainer or doing some pre-compiling stuff this is going to be useful for you breaking changes okay this is this is N/A cool react native releases are more predictable and easier to upgrade nowadays react native editor is the first release in the history of react native with no user facing breaking changes that is massive and if you're on react native edit true you should be able to upgrade your application just by upgrading the package json or install directly directly edit tree but actually i tried these guys and i think some of the react native reanimated or gesture handler libraries rely on a specific react native version so if you update the version number even though it is compatible the libraries might not like it and you might have some errors so be careful with that that means you might need to upgrade as well some other dependencies to make it work N/A and that's it for this video definitely super excited about the network tab and the performance improvements as well as being able to use the latest react 19.2 apis in react native the code is going to be cleaner i'm going to leave the link to my example in the description remember if you want to become a master in react native check out code with beto check out my ai tattoo application it's definitely the best application i've made in my entire career and i'm super proud of it and i want you to check it out and i want you to leave me a five star review and consider becoming a pro member at codewithbeto.dev thanks for watching and i'll see you in the next one