The New React Native Architecture

THANK YOU CHAIN REACT FOR SPONSORING THIS VIDEO
Buy tickets: www.eventbrite.com/e/chain-re...
Learn more: chainreactconf.com/
I've wanted to talk about the new React Native architecture and the chaos that is JSI for awhile, so hyped to get this one out!
SOURCES
reactnative.dev/docs/the-new-...
• Colin Gray - Default t...
/ 1766288157178302939
github.com/reactwg/react-nati...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏

[@t3dotgg]

YOU SHOULD GO TO CHAIN REACT IT'S REALLY COOL (AND I GET PAID IF YOU BUY A TICKET WITH MY DISCOUNT CODE) www.eventbrite.com/e/chain-react-2024-the-us-react-native-conference-tickets-795740971667?discount=theo

[@jfbaro2]

This will make EXPO even better

[@YasinAkimura]

Already did. Expo also provides an ultra simple abstraction layer to build your own native modules with the new architecture it's really cool. Makes stuff like communication with native sdk for things like printers alot easier where there is no good library for react native available

[@ammarhalees6370]

What is EXPO?

[@rishabh1S]

@@ammarhalees6370 Framework for React Native.

[@krishgarg2806]

@@ammarhalees6370 its like what next js is to react (but even more stuff than next js)

[@infantfrontender6131]

@@ammarhalees6370, Expo is an open-source framework for apps that run natively on Android, iOS, and the web. Expo brings together the best of mobile and the web and enables many important features for building and scaling an app

[@Bekir_ts]

After some thought i realized Conference sponsorship is very good advertisement choice. I didnt know about the chain react conf and Im buying it now. Both Theo me and chain react won! win-win for everyone

[@t3dotgg]

Agreed!!! Ty for saying this, very helpful as I figure out channel sponsors going forward 🫡

[@devIsAjourney]

As a react-native and react full-stack developer, it's nice to see the react-native team make such a wonderful guide of The New Architecture.And credits to theo for your interesting and in-depth content👍

[@MaxHDeveloping]

The thing with the benchmark comparing the iPhone and Android Phone is, that the Pixel 4 was a low-to-mid tier phone while the iPhone 12 PRO(!) is a high-end flagship. Ofc android will be a bit slower because of java, but the real reason people think android is slower is that they compare their shitty low low-end android phone to high-end iPhones...

[@jefferyosei101]

You're amazing Theo!, keeping us updated always, .You're my source for tech news!

[@Smongo412]

Thank you for making this. You have become my favorite react-native hype guy!

[@mrousavy]

VisionCamera spotted in the wild at 13:37 👀

[@bendgk123]

dude I love u and ur work, heavily inspired. I be seeing you litterally everywhere in the react-native community.

[@alexkevhikes]

Love your work!

[@wkencel]

Thank you for your work on the vision camera!

[@wkencel]

Thank you for your work on the vision camera!

[@mrousavy]

thanks guys! 🙏

[@KarlOlofsson]

Love it! About to do my first proper app and have some basic UI going in web, but plan to do native apps soonish. Won't need ultra performance, but I like good DX none the less.

[@andriim1440]

man I love your videos thanks for all your work

[@ymi_yugy3133]

The 2x performance delta shown in the benchmark matches the single core performance diff between the Pixel 4 and iPhone 12 Pro. Java is not at fault here.

[@berkowk]

Don't ask web dev about things they don't know. There is no java on Android. ART executes their own flavor of bytecode (dex). I'm not sure how exactly RN renders their UI. Yoga surely lives inside "native" compiled code. But that's only layout part. If they call from js VM into ART into native and then back... There might be a possibility to eliminate a lot of cases where ART is included, if they implement render the way QT does it.

[@amypellegrini1732]

I did a POC building a React Native app which calls FluidSynth in the C++ layer to play a MIDI file using a sound font. What I thought was impossible now just works flawlessly (if you are ready to get your hands dirty with C++).

[@VeitLehmann]

I have used React Native in the early days, and I still remember the many fights we had against jank. This was 5-7 years ago, around when Flutter came out. We eventually decided to rewrite everything in native, which solved many problems but caused a whole lot of different ones. This new architecture looks really amazing! Until now, when I was about to write a mobile app, I'd pick Flutter. But now, maybe not, I'd give React Native another try! Maybe even with ReScript - it's a shame that it's such an underdog.

[@tannercottle4206]

5:00 This honestly just depends on the implementation - there are things you'd want for different layouts/screen sizes that you can't do in CSS or that are more difficult to do in CSS, so sometimes a resize event listener from within a useEffect, or a useLayoutEffect which will re-fire when the browser repaints the screen

[@nyashachiroro2531]

This man has just been pumping out a lot of great content. A lot. The dedication 💪

[@deformercr6680]

It takes a lot of dedication to sit in front of a camera and read articles and blogs which other people have worked hard on 💪

[@nyashachiroro2531]

@@deformercr6680Look at you throwing shade. It's not like he's just reading and calling it a day. Jesus.

[@dharmey7]

@@deformercr6680 he's reading them in an entertaining way and also providing his own takes and opinions. So yeah that's dedication.

[@deformercr6680]

@@dharmey7 with all due respect, this is very lazy content. It takes no dedication to read a blog post, interject it with some thoughts, and churn out videos. Im sorry if this looks like dedication to you. Look at creators like Jon Gjengset for an example of what dedication looks like. There's many more, but of the top of my head, I think of him. I don't dislike Theo, but applauding him for "pumping out a lot of great content" is like applauding a tapeworm for efficiently digesting someone else's lunch. It's just too disingenuous.

[@user-fr2fm3ri3w]

@@deformercr6680you must be fun at parties

[@josefaguilar2955]

As someone who's worked with the JNI, early Node native C++ modules, and WASM, the JSI looks incredibly promising! Thanks Theo, now it's time to dig into React native!

[@amnesiac7598]

What ui frameworks do you guys use for react native? Feels like the ones I want to use are react only.

[@curiouslycory]

Thumbs up for the clever swift dig. :D I needed a good laugh this morning.

[@cortinico]

This is glorious!

[@audas]

Holy crap - finally we are at where Flash was when it was killed. Running native C++.

[@DavidWoodMusic]

Literally just started thinking about a new React Native project. Perfect timing.

[@hassankhawar7813]

Wanna collaborate 😅?

[@DavidWoodMusic]

@@hassankhawar7813 no

[@dq303]

Been a react native dev for 3 years now and I must say I’ve built bare projects and projects using Expo. Expo makes the experience a lot smoother

[@TJYouToob]

It will be nice when the docs are a bit more fleshed out for codegen, etc. Right now, if I want to know how to work with it, I have to trudge through github projects for basic examples you'd expect in the docs.

[@perfecto_01]

This, I wanted to create a Brutalism UI for Android. I used fabric components for that and the amount of times that I have referred to some GitHub projects to get the shit working is ungodly

[@BIB-otf]

Are you still using the Vision Pro daily Théo ?

[@NaushadKhan-zs8td]

Can you suggest Channel to learn React Native on KZbin or any other resource other than documentation

[@DaxSudo]

Well great here goes all my points for my Chain React Talk Blazingly Fast Rust

[@SebaKerckhof]

Is JSI usable outside of react native? Does this mean we can get something like a performant numpy alternative for js?

[@ra-dro]

As an enterprise dev I'm so scared of this migration. Now we are moving from 0.64 to 0.73 and thats a huge pain which cost us 1-2 moth of aligning with native devs and releasing the app. How do I explain business we need to move to the new arch, spending a full month on a testing and then rolling out a feature for it to be just turned off because of some misalignment in the framework?

[@jamesprentor8433]

🔥

[@Nuraddinhassan]

Has this version been released yet?

[@wilsonsilva4720]

Toop, following from Cabo Verde

[@elvispalace]

🇨🇻

[@bryson2662]

Theo, you're right about all of the stuff you said about android being slower and the reasons for it. It's still a tradeoff that the users are fine with considering the alternative.

[@mathiasfischler4227]

Yes, javascript can not really hold a reference to javascript, but that thing is nothing new - e.g. .NET in the browser (using blazor) can hold references to and even invoke methods on javascript objects. There's marshalling and two-way calling (e.g. javascript calling .NET methods). It's wild!

[@elvispalace]

I'm so hyped to Static Hermes

[@carlosricardoziegler2650]

❤

[@pjmq]

If we had this sort of core technology with a Svelte-powered DX this would be *all* I'd use. (No, not SvelteNative)

[@guillaume_s]

Agree, a react native - svelte version would be awesome with good support

[@bendgk123]

Either this or a Vue driven DX would be nice. I'm tired of react's finger guns and gotcha's. Hopefully react compiler fixes things.

[@felixallistar]

wats wrong with sveltenative? i was looking to use it later instead of my normal strat of make it in unity and dont tell anyone its secretly an ultraportable game engine

[@glaze4629]

@@bendgk123VueNative was a thing, now is dead.

[@bendgk123]

We're not talking about VueNative or SvelteNative we are talking about something more along the lines of NativeScript, where things like static hermes, fabric architecture, JSI, etc could be ported over from react-native but utilized in one of these other UI/DX languages @@glaze4629

[@audas]

This is going to rock on HarmonyOS.

[@aakashr79]

At the end of the day this is only incremental happiness for a React Native Dev. React Native will always have to keep up with native advancements and new way of doing things to have the community reap the best rewards of the platform. None of these arch changes or JSIs are needed for near native performance on a GL based framework. My take is simple. Either be a performance geek and go completely native. Or accept the minuscule tradeoffs and accept a truly cross platform framework where your UI APIs don't depend on native APIs (write integrated platform code or UI components when needed). You only fundamentally truly need native to talk to the respective OS. Don't be in the middle where you get none at it's best.

[@theodoremawuli9885]

Are there any React Native devs here that code in a WSL environment? I'm having issues connecting my Expo Go app to my dev server due to an IP and port number mismatch. I'd really appreciate it if someone who has gone through this reached out to help😭

[@DevLife717]

So React Native Skia is not a part of the New Architecture right? If that is the case then why would you use New Architecture over Skia?

[@thundergabriel]

I try both React Native and Flutter, then flutter feels like programing in React Native 2017 without hooks and wrappers hells. RN + Expo 🚀🚀

[@ac130kz]

try bloc, no React thing gets to its majesty

[@JEsterCW]

Watcha even talkin home you got hooks in flutter aswell if u need those also u got so much more, lmao

[@tristanharveygodoy7864]

well your RN does not have Riverpod so that sucks

[@jesrealibabao6235]

Rn doesnt even have State managements like Riverpod and BloC, and that sucks. And im using flutter_hooks just fine, dunno what are u talking abt

[@ilahazs]

​@@jesrealibabao6235maybe he hates nested curly braces

[@sagarkapasi099]

React: Everything is changing all the time.

[@sagarkapasi099]

I know react != react native. Here react = React*

[@luca4479]

Do RN + EXPO apps still start at 60 MB?

[@t3dotgg]

I don't think they ever did? I shipped an RN + Expo app in 2021 that was under 15mb lol

[@poaches8714]

At what point does apple ban an app when using react server components for native?

[@matthewmolinar220]

If you use it to change your core proposition

[@eXquisiteBuddy]

10:30 so basically a switchMap from rxJs?

[@elhamuddin.mahmoodi]

Hey, is it possible to dockerize a react native project, if yes how?

[@t3dotgg]

...what?

[@el_mahnuel]

React-Native runs on mobile. Why on earth would you need to dockerize a mobile app? 👀

[@elhamuddin.mahmoodi]

So I have a react native app which works fine in my pc but when I share it with my colleagues to work on it, then they are not able to execute the project So I thought it might be better if we put the code into a container and everyone be happy executing it.

[@el_mahnuel]

@@elhamuddin.mahmoodi ooh, I see.

[@chiefmiester3801]

i swear to god this is the 4th time I'm hearing of this new architecture thing. Last I heard, fabric was still unsupported by a vast majority of native packages

[@zachariahtatman7381]

This is going to be a stupid question but what does “native” mean or refer to… I hear that word all the time but what is “native code”??

[@suyashsrivastava3671]

By "native" they mean making Android app using Java/Kotlin and IOS app using Objective-C/Swift, Instead of using React Native or Flutter to build one App for both platform.

[@Skalexsong]

Wow, this is very delicious, kind of make me want to learn and use react native professionaly than using React with Capacitor JS.

[@politicalmatt2967]

What browser is Theo using?

[@user-td7yi6uo4d]

I think these vertical tabs are from Microsoft Edge

[@jayands]

@@user-td7yi6uo4d It's the Arc browser; he mentions it around 21:10 or so

[@viktorberezin]

It's Arc browser

[@rasheedatanda9927]

NativeScript has the JSI support since forever 😅

[@khangle6872]

A JS-based framework rewrite itself for the next version So Tuesday, eh

[@MaxHDeveloping]

Also shitting at Flutter is an interesting take, would you like to make a video about that?

[@kasra8106]

he shits on flutter on every video, and does indeed have a dedicated video about that. and i'm here for all of it.

[@tristanharveygodoy7864]

Shits on flutter, then rn decided to implement things like flutter did. This is literally flutter 1.0 lol.

[@jesrealibabao6235]

@@tristanharveygodoy7864 exactly

[@winwishph]

Tested and proven flashlist with 1k list

[@thisaintmyrealname1]

If any of this gets real traction, I might come back to mobile dev after leaving it behind in 2019 (android native in Java, back in the day)

[@brssnkl]

JSI is not just for C++ :D JSI bridges Android and iOS native methods to JavaScriptCore. Your native Kotlin/Swift/Java/Objective-C method can use a native method as callback when calling javascript. Or you can add JSI specs to your native objects/methods and expose them to javascript directly.

[@zahash1045]

So they started using ffi a lot more? And that’s somehow mind blowing?

[@floogulinc]

18:20 comparing the Pixel 4 to an iPhone 12 Pro and saying Android is slow is not really fair. You're comparing an older Pixel that was cheaper than the iPhone and in general Apple has been making faster SOCs than Android phones have access to. I would guess if you compared an iPhone to an Android phone with an actually comparable SOC the difference would be more minimal. I don't think Android itself is inherently that much slower and the security benefits from its architecture are probably worth it.

[@da40au40]

Lol,there should use Samsung s22 ultra for android and see real performance😅

[@xbsidesx]

I’m not from USA so when I see those ticket prices my heart races in anxiety of how insanely expensive that would be for me. Is it just me, though?

[@brennan123]

Performance aside, why would color math be different in C++ vs JS?

[@jayands]

My first guess would be precision, since JS is strings all the way down.

[@iatheman]

Because math in JS is a joke.

[@andy_ppp]

The C++ thing is absurd, you can just create an abstract test suite and run it against both versions. An no the colours being ever-so-slightly different doesn’t matter either 😂

[@devagr]

This is how RSCs should have been announced in an ideal world

[@Sillyvan]

Uh i feel like this might make it easier to get libsql running on RN. Imagine reading and writing from a local db on your phone and it gets replicated on a server

[@bendgk123]

I imagine a naive implementation poses a huge security threat. I wouldn't want my frontend application (react-native) making arbitrary writes to my database. What happened to having an API layer between?

[@Sillyvan]

​@@bendgk123 to be fair this is only a viable use case if you work with the "a database per user" strategy. which very often dosent make sense! in that case you wont be able to break more than ur own data in case of security issues. the whole idea is more about having local data backed up in the cloud

[@bendgk123]

@@Sillyvan Ah yes, I didn't consider this use-case. 👍

[@BlackwingVayu77]

Yo Theo! You’re like one of the only TRUE developers who have influential following. Do you think you’d ever make a video interviewing devs from all experience sizes and asking how they feel with the new a.i changes? I’m super curious to hear what you think as well. I’ve heard junior devs say our jobs are gonna be gone soon and senior devs say a.i can’t beat human intuition. I’m torn somewhere in between lol

[@ismaeltinta6118]

Seriously? man i mean if you lack confidence about YOUR future, why not switch to another field.

[@felixallistar]

its like with anything, it will simply take less people to fix problems. a lot of problems dont get solved because its not cost effective for teams to solve it. 1 smart person using smart tools can get a lot of work done and can just find problems that aren't solved, and solve them. then get paid for it. git gud at sales, design, frontend, backend, and social skills and the most efficient tools because the job will be less about being a coding god and more about understanding how to solve problems cheaply for a market that exists. ie there are a lot of small businesses that arent buying custom apps and websites because they cant afford to hire a team.

[@BlackwingVayu77]

@@ismaeltinta6118 pretty aggressive reply there sheeeesh. Not sure how you arrived to lacking confidence from my comment but im all good brother 😂

[@ismaeltinta6118]

@@BlackwingVayu77 😂. I thought you were desperate. sorry then 😐

[@phoenixssbm]

they didn’t tweet this

[@MrMudbill]

Why isn't React Native at v1.0 yet?

[@hassankhawar7813]

I wonder with these major changes in mobile app, would you want a Senior React Native Developer with 5+ years of experience to lead your mobile app but the catch is that dev does not stay up to date in tech, or a mid level up to date techie in React Native Developer? Let me know

[@gamingwolf3385]

React Native is good for web devs , if you want to use flutter ok go for it , and don't forget to learn kotlin and swift to use flutter with native apis hhhh

[@VictorNascimentoo]

JSI is basically what NativeScript does?

[@epicmetod]

I wish wasm runtime in the future

[@taylorkoepp3048]

NOOOOOOOO this is terrible news. I'm now going to be tempted by React Native again. I. Will. Not. Submit.

[@ritmillio]

If you use expo-router, Flashlist will break your iOS build...

[@azzyfreeman]

Also, in some cases, using horizontal and vertical flashlist in the same view can cause it to lag

[@user-hn1cy5ee5l]

When you see "We rebuilt everything", just don't believe it will be better

[@manishgautam2424]

need that swift code

[@AdrianFrimpong]

LOL ima use that swift code tho 🤑😂

[@wildcsgotactics]

Why would Java be the reason that Android performance is subpar?

[@HaozheYuda1989]

We should go back with cordova e jquery-mobile😂😂

[@JulianKingman]

The bridge has always been the weak point in RN, they made the right call in making that the main target. I'm a little perplexed about RSC's in mobile and how that works, I've got some reading to do for that to make sense.

[@EduardoSanchez-un2hh]

So finally is better than Flutter

[@ryangrogan6839]

Everytime, everything breaks

[@jesrealibabao6235]

This is literally flutter 1.0 tho,

[@dexteritymaster]

I love comparing speed on 300-400$ cheaper and 2 times slower device and commenting about 2 times difference in speed is OS fault while it's 2 times slower in synthetic benchmarks too :) P.S. It did have 90hz display (vs 60), usb-c (vs lightning), better camera perf (except video), cheaper price (650+ vs 1000+), and sideloading, so I see why people would buy it, but hardware was not faster.

[@dexteritymaster]

I'm not saying Java doesn't have it's overhead in efficiency or even speed, but Theo is comparing apples to oranges in processor speed while blaming Java.

[@kwesikayofficial3078]

React native >> Flutter

[@Woeden]

We could have a new Javascript architecture that actually is decent

[@forno-nicolas]

Dart... hopefully some day google stop trying flutter web and create a serious flutter compiler to html js css

[@backupmemories897]

who the fuck does 1500 view component in one view xD

[@notlekrut]

It's a benchmark

[@backupmemories897]

@@notlekrut xD fair, still I'm quite intrigue if people really do that. put 5000 view components xD and complain about 400~1000ms+ because of it.

[@amranimohamad4741]

they should change the core oof js itself i mean their interpreters like v8,spidermonky and shi**

[@hoteny]

Hiello.

[@domthefounder]

React native has always been perfect in my eyes like an ugly child ❤️

[@aryabp]

Tauri VS React Nativa

[@LetrixAR]

Tauri is still a "webview", altough since it uses Rust as the backend, I wonder how it differs from Capacitor.

[@elvispalace]

Electron 300mb Tauri 120mb React Native Windows 16mb

[@aryabp]

@@elvispalace ??? Tauri when bundled to windows only got 14mb too

[@harounhajem7972]

It's not as advanced as it might seem. Have done those types of development

[@jwoods9659]

All react devs are doing is catching up with all these other frameworks.

[@jwoods9659]

@@gofudgeyourselves9024 Ill give it a chance but dude React changes waaaaaaay to much.

[@JulioCesarKodel]

JS untyped? No thank you. Negative developer experience. And, apart from WhatsApp, no app is made with default components (all are customized), so, hell yes, a custom-paint framework that allows me to create ANYTHING without any kind of limitation. Flutter for the win!

[@rajeshnakrani526]

Any framework that returns strings that contain code like HTML, from the code itself, still sucks.

[@yourmomsboyfriend3337]

What is the alternative?

[@aleksander5298]

8:30 tbh legacy renderer looks way better

[@nUrnxvmhTEuU]

I agree, but in the new one you can still *animate* the change to look as smooth but faster. In the old renderer, it's not an animation - it's the fastest it can update.

[@technocidal]

It’s also meant to simulate scrolling a list if I remember correctly which means that defaulting to larger chunks being rendered at the same time will feel better to the user.

[@EthanStandel]

"New architecture" is a terrible name. In 5 years when there are a pile of other changes, there will still be people who are trying to transition to the "new architecture." Core React groups changes better by putting it _under a version number._

[@luffythestrchykid]

There won't be a "new arch" once it becomes default

[@EthanStandel]

@@luffythestrchykid but there will still be people who aren't there yet and for because they will make up a large percentage of the community, that will mix up the meaning of "new architecture" for everyone.

[@GrumpyGrebo]

This is a huge nothing burger. What is the problem being solved here, or even the issue being improved?

[@Smongo412]

THEO IS A NERD

[@phriend2spin]

Still not as performant as Flutter

[@none0n]

Do you have any valuable video?

[@SifterLTU]

first