Hey, welcome back to code with vetto. In today's video, I want to 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 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 codeto.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 we cover many things. Not only the basics but also integrations with payments, inapp purchases, how to design a beautiful application, how to make it work across platforms, routing, deep linking, backend submissions, automations with CI/CD pipelines and all that good stuff. But I want to talk to you guys uh about the resources that we are offering here at Kobetto. And one of my favorite examples and the one that I've been working the most is the AI tattoo application. Pro members at kipetto.dev dev 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 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 the description. Now, let's go back to the video. Now, there are multiple ways to test React Native 83. If you are not using Expo, you can just upgrade directly, but if you're 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 a template blank TypeScript 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 app.tsx file and then you pass the add canary. This will create the project with 80 uh with the SDK 55 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 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 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 uh just expo if you're using experimental react server components and react server functions. Okay, just an quick FYI. Now, let's jump into activity. This is actually one of the new APIs available with React 19.2. This is a simple Pokedex application that is hitting just the Pokey API in showing some Pokémons. 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, uh, we get some Pokemons. And I'm using activity here. And I'm going to show you the link. Uh, 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. Um, you can pass context, not only a fetch function. For example, this is just a simple fetch function with a delay of 2 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 and it's what you're seeing on the device at the beginning right there for 2 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 uh 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 um and you can provide a component fallback that is going to be rerendered while we are fetching or while we resolve the promise of this component. it. 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 have been asking me you know this could have been an enome so that you can pass different values like in in this case I would like my my value of the tab to be Pokémon 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 Pokémon, then it's going to be visible otherwise hidden. Now, from now on, guys, if you are on React Native Edit, I would recommend that you always use activity. This is because activity preserves the state of the component when it's hidden. This means that 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 going to need to change this in your new projects. Now this is going to be very fast. Look at this. And we don't have any jumps or anything. Now, we also have this use effect event, 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 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 uh such an event will cause the surrounding effect to rerun. So in this case they are abstracting the set notification connected passing the theme uh 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 websocket 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 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 inspector tab 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 uh networking libraries such as expo fetch coming later. In case you didn't know, Expo comes with a fetch function which is actually uh 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. So keep that in mind. So let's quickly see this in my application here. I have the dev tools. I have the expo 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 just image media or all. I like to keep fetch especially if you have many images. Um and yeah. So here we have the Pokemons. 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. when 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 test and see if you can spot anything unusual. There is a new desktop 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. Intersection of servers. you know the React Native core team and you know Expo and all the React Native community were always working on bringing web APIs into React Native and now there's a new Canary intersection of server that you uh 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 and then you will get events >> >> um and you can do any logic based on that. Next we have experimental Hermas v1. Hermas v1 is the next evolution of Hermes with a 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. They also introduce a new experimental feature that allows you to compile out the legacy architecture on iOS. If your app is already in the 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-ompiled binaries on iOS. In this release, we've implemented the ability to debug debug your React Native code that is shipped with a pre-ompile binary. So, in case you didn't know, React Native 82, I think, introduced pre-ompiled React Native. This means that when you are building your application, you don't need to compile React Native, right? You you still need to compile other libraries that you're using in your project, but by pre-ompiling or shipping pre-ompiled 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-ompile binaries. In case you are a maintainer or doing some pre-ompiling stuff, this is going to be useful for you. Breaking changes. Okay, this is this is 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 editor, you should be able to upgrade your application just by upgrading the package JSON or install direct directly uh edit tree. But actually, I tried this guys and I think some of the React Native animated 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. 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.dev. 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 fivestar review and consider becoming a pro member at kivetto.dev. Thanks for watching and I'll see you in the next one. Hey, hey, hey. >>