React Native is kind of broken (they NEED to fix this)

[@t3dotgg]

btw Posthog just added session replay to React Native and it's really dope (and still super cheap)

[@prodByLavender]

Does it work with native modules like maps, like Clarity does? Afaik Clarity is the only one that does this right though it's got its own issues going on especially on iOS

[@wlockuz4467]

One of the most simple and fundamental components of UI - an input, turned into a complicated and unusable mess. Its just sad at this point.

[@sdummy]

The example on React-native docs is still uncontrolled. They do not pass the text value to the value prop of the input

[@belkocik]

If we do not pass a state reference to a value prop in TextInput component is it not controlled, even tho there is onChange function which is setting the state?

[@MrMudbill]

@@belkocik it's not controlled if it doesn't pass the value. It just listens for onChange and then updates its own local copy of the value. There's a risk that maybe the displayed (uncontrolled) value and the copy will fall out of sync, and that's bad. Not sure if this happens in practice though.

[@user-ys6ql2hb3x]

I have seen this issue where state updates were handled incorrectly, mutating state. The uncontrolled input made that bug much harder to spot.

[@felipepiubello4713]

it is absurd we need someone like Dan to bring this to light, there are plenty of issues already open in the react-native repo since at least July 2018 but they just ignore it :)

[@guittoplex]

Awesome framework which can't even do a damn text input. Great work, Facebook

[@jhanschoo]

I think it's porting React to native is doomed to super-leaky abstractions and duct taped with hopes and dreams.

[@rusyaidimusa2309]

Cool note: Resizing a TextInput on android is complete screwed in React-Native. If you enable multiline inputs, it always renders as single-line first, rerenders, then shows the multiline input. If you dare to use a multiline TextInput with reanimated, it will always break transitions!

[@dealloc]

TextInputs on Andrioid are broken in many ways.

[@biskyy13]

it also does the multiline thing on ios :p

[@gnom-om]

fix it and make PR why you crying here?

[@rusyaidimusa2309]

@@gnom-om I'll answer in good faith, I have tried, many have tried and failed to. These issues are just deeply ingrained in how TextInput is initialized, as lineheight is managed by react-native itself and not automatically set when EditText is rendered. I've spent maybe a few days trying to figure out how it sets line height under the hood to no avail. This issue has existed for perhaps years now. I opted to just not animate and live with the weird snappy resizing.

[@pkop4]

@@gnom-om Stupid. The Facebook engineers that get paid to work on it should fix it. I don't think he's "crying", he's making fun of how bad it is.

[@joaoduarteribeiro]

My favorite part about the RN TextInput is when you pass only the value without the onChange and see the chars being inputted for some milliseconds before before being deleted.

[@olalekanadekanmbi3771]

6:21 can confirm react-hook-form bypasses this problem. I had this issue just yesterday and react-hook-form made it work seemlessly

[@w1llm4nn]

Oh really nice - we’ve used Formik in the past and had this issue so if react hook form works I’d be keen to switch

[@TheProcessor]

Can you explain how with RHF source code?

[@TheProcessor]

@@olalekanadekanmbi3771 I checked and it ultimately uses a useState()

[@NacefFromTN]

🎉

[@olalekanadekanmbi3771]

@@TheProcessor No Idea I just happen to find it as a fix to my problem

[@EvertJunior]

This is bad, having performance problems is understandable since the component rerender at every keystroke but losing the cursor position by default is definitely a severe bug and I've seen it happens in many apps, it's infuriating. I hope this gets the attention it deserves.

[@YasinAkimura]

Thats the reason I wrapped it in my own TextInput which is using a state manager but the inputs itself do not subscribe to the state they just update it. Only the place where you need to use these values subscribes to it and that fixes most issues.

[@truthmatters7573]

Never thought I'd see the day Theo vindicates Flutter, but I'm here for it!

[@Trucidare]

Few years back we were getting a trickle of support tickets about not being able to log in to the app. Turns out it was same class of bug (controlled inputs).. Kind of crazy cause back then no one talked about this.

[@ejyption]

Handling Text Input example in React Native docs did NOT use the value prop in TextInput, they used the defaultValue prop.

[@diosupremo4928]

Can you tell me in which part? At textinput doc it uses value

[@ArisenDrake]

@@diosupremo4928 It's even in the video, take a loot at 12:14

[@henriquematias1986]

Indeed, still Theo felt sick haha 😂

[@AbegazNap]

and they say flutter is broken

[@skayu2000]

Flutter is not broken. But will be extinct.

[@devOnHoliday]

Flutter community is broke

[@AbegazNap]

@@devOnHoliday I don't need a "community" to build cross platform apps

[@AbegazNap]

@@skayu2000 if no more updates were made for flutter, I could write most apps on it for the forseeable future

[@kkebo]

@@AbegazNap lol

[@KPBhan]

It's fixed in today's update 0.76

[@captainlennysub]

React Native in 2018 was the most unstable project that I’ve ever used. I mean how can it error on rendering a list, display different error every time I rebuild/ empty cache, making it impossible to debug? Guess what, I gave up after 4 hours, rebooted and it started working again. Never using RN since then😢

[@megamind452]

I can feel the pain 😢

[@wandenreich770]

I feel you mahn...just recently I tried the getting started example on expo and it didn't work but weirdly when I use pnpm insteadbof npm it magically works..I think I'll just go with flutter now

[@captainlennysub]

@@wandenreich770 yes i think that is way better for now!

[@robwatson826]

Argh we have this problem in an app, never realised it was down to the input being controlled! At least I now know there is a workaround for it

[@codeChuck]

COOL STUFF :D Ads are so fun! The catch should always be there! They are a little obsessed with HEDGEHOGS :D SANIC🦶💙🦔, IS THAT YOU?

[@repe0]

12:03 it used defaultValue, not value in the example?

[@BenKingUK]

Dude can’t even read

[@jouebien]

I mean the bug I reported in 2019 about flutters broken label bottom padding is still broken. Actually every bug I ever reported to flutter has been not resolved and sacrificed to the auto close robot. Honestly I'd pick Capacitor with the react or vue hat if I had to pick a JS mobile framework. My ionic builds from 2017 would still compile & run. My RN expo projects won't even start until I jump through upgrading to latest and I've had the misfortune of doing that twice.

[@lexsatre567]

Don't understand why no one talks about how good capacitor is

[@samuelscheit]

​@@lexsatre567 Capacitor is good, but the underlying web platform is not suitable for high quality mobile apps (atleast for ios). For example Gestures and animations only run at 60 fps or less on iOS Safari/WebView (unless you enable the 120hz experimental flag in the ios safari settings)

[@erentr7167]

react native just breaks on minor package update or you trying to run 2 year old project. you need to change node versions, java version, gradle bs yada yada yada, but i still use it

[@Pewpewz]

My team is almost finished building a huge streaming app (>50M users) in React Native because it was built with Capactior originally and was SO bad. It's SO much more performant with React Native. Also so many things you can't do well with Capacitor.

[@julienlecoq3539]

@@Pewpewz I guess it really depends what you’re doing and how you optimized your code. I built a big app with Ionic + Angular + Capacitor and it’s running just fine.

[@sebastianbergman7810]

We have had to adapt how we build forms because of these issues and our PMs does not understand that it's an issue with the framework and complains a lot over how we often need to spend time to handle this using complex solutions when they demand certain behavior we recommend against putting forms in like portalized BottomSheets, where it's a lot worse, when our Juniors also try passing state that then, what I've assumed make state pass through the JS bridge continuously "on change". Really hoped that the new arch was gonna solve this, so that it doesn't according to Dans example is mind-blowing to me! Wow.

[@shaunhamilton]

This makes me 90% confident my banking app is built with React Native, because the inputs do this. I always wondered what would be causing that.

[@CloudToby]

which app?

[@landsman737]

replace the bank

[@hsemink]

Finally this gets some attention

[@notandyvee]

Im sorry theo. This wasnt your reaction when comparing it with flutter. But when someone whos well respected points out issues with evidence, all of a sudden, react isnt perfect? Its exactly why how people view you isnt consistent.

[@Innengelaender]

I recently got rather annoyed that I couldn't get an autocomplete-input from a library to work with a controlled input, but it had an initialValue instead I guess now I know why that library did not allow for controlled inputs.

[@owenwexler7214]

Remember when a newly scaffolded React Native CLI project would vomit 60 pages of cryptic unGoogleable error messages instead of starting? Pepperidge Farm remembers

[@paxdriver]

If we need to add a denounce, then add debounce... Why is this terrifying? This feels like another chicken little situation to me.

[@MsVsmaster]

this exists since the beginning, I remember the input lag when working at a fintech app I authored, damn this sux still out there..

[@belkocik]

Hope Dan influence should do some impact on React Native. He speaks facts!

[@JC-yy5nf]

It's weird that react native is still the only js-based mobile platform solution that is still recommended by everyone, yet still is so broken and cumbersome. And it's not just inputs that are "broken".

[@mrousavy]

The example in the official react native docs is uncontrolled. It's not a controlled input, so that guide is working fine and valid imo. I agree that controlled TextInputs should be explicitly warned against, it's not a good idea to use them. I wouldn't say RN is "broken", as you can simply use uncontrolled TextInputs and you're fine.

[@absurd0000]

pls do actual ramen ads too

[@narcissisticnarcissus4956]

You'd learn more about Flutter. It is frustrating that you have said many false things about Flutter in your previous videos, and use it as a poor catch phrase like you did in this video. Just to be clear: I am a FE/React developer first, but my go-to mobile tech for mobile is Flutter. Though RN is good as well.

[@willcoder]

Flutter for the win!

[@tasheemhargrove9650]

Another issue is the lack of native support for StompJS. It was a pain in the ass figuring out why I was getting the errors I was getting when trying to establish STOMP connections to my backend. A hacky workaround exists but there are 3-5 year old threads out there with many people asking why this hasn't been addressed.

[@enijar]

I stopped using controlled inputs a few years ago. Instead I use an onSubmit={(e) => Object.entries(new FormData(e.currentTarget))} on a form element which returns the form inputs into a nice object. So much more performant and extensible

[@aymenbachiri-yh2hd]

thank you for this video

[@ps__9979]

make it hybrid?! even if input is controlled, let browser owns it, changes and values and react state updates will be debounced, just to keep up with changes but way less hammering this way you get the speed and centralized state

[@SilasDuarte-e9k]

Capacitor > ReactNative 😎

[@lovebes]

Why is this an issue now? I'm a bit surprised. This is like web app 101

[@codeChuck]

eslint replaces all unchanging let to const, you just need to hit save ctrl + s or close file for autosave then commit and push :D Apparantely he has not configured this rule in eslint It simplifies clarity of your intention. I'm not the one to teach Dan how to do stuff in JS, but do you intent on modifying a component? It just seems a bad tone :) On the positive note, Dan saved 2 letters while typing let vs const :D I would totally agree on this, if this metric would matter the most, but I think it is not. When tanspiled, let and const may even get converted to var :)

[@BenniK88]

Fronend dev is fun: “Crying”

[@danielvalenzuela7]

RN has been there for a while now, how can it be that this is "just picked up now"?

[@r2in360]

Because it wasn't an issue previously. It started happening on ios after some update there

[@diggy531]

I have an app in production built on top of react-native and have never had this issue in prod, only on the simulator. The only input type that had something similar was when using password type input.

[@sheppa60]

Formik’s always been good to us.

[@salmanazam9444]

Speaking as an inexperienced RN developer, what is actually wrong with using a ref to grab the value when we need it? Its being managed by a state in the traditional way, but even there, we are having to update the state every time the input changes... And btw, I have some inconsistencies to report too. TextInputs in Android have a non-zero default padding while it is zero in iOS. In case of multiline inputs, the numberOfLines prop only works on Android, so a multiline input on iOS does not take as much height directly in the UI, while it does in Android depending on text size and numberOfLines...

[@0x5D]

As an intermediate RN developer, the issue as i understand is the way RN interfaces JS with native components. Basically everything is async. There's actually no way to "use a ref to grab the value" because that API doesnt exist. Only way is to go through the onChangeText prop. Theres this "new architecture" I keep reading about that might fix some things but its not stable yet.

[@ashwinsnmv]

This is bug is not noticeable for people using it with os keyboard. When you type with keyboard, the simulator kinda gets clogged

[@Luisllaboj19]

Hi Theo, the static/dynamic devtools come with the canary version of next 15?

[@blinkz8200]

That ramen was as pasty as the wall.

[@codeChuck]

THIS IS NOT FLUTTER! GOT ME LAUGHING :D

[@willashley23]

wow, I feel like I was being gaslit this whole time by my text input when the cursor jumps around. It was react native all along... They really need to fix this, it makes RN apps feel so cheap.

[@iGhostr]

That's why everyone chooses Flutter when they start a new project

[@alazaaaa]

i am a noob here but is it possible to make the input an uncontrolled input that basically changes to a controlled input every 500ms or even every second. so its quick for the user with no delays and the info is sent upwards without clogging the thread. Seems like overkill to compute on every single letter input. If it is not possible could someone explain to my why my logic is of. thanks

[@3pleFly]

If react native is like react then you'll get the warning that changing from controlled to uncontrolled is discouraged.

[@farrellraafi1301]

I think it's possible, but would the shadow dom (or whatever it is that diffing the JSX every render in RN) detect that it is the same TextInput or would just unmount it with an uncontrolled one and then remount it with a controlled one every 500ms and that would hog the cpu (and should cause bad UI sideeffects) wouldn't it?

[@bullettime2808]

it's definitely doable, shouldn't be very hard to implement in user land

[@farrellraafi1301]

Maybe mounting 2 TextInput that have one uncontrolled and the other controlled and invisible (although that would be another problem because RN doesnt have display none) would also solve the issue but its more of a hack

[@wlockuz4467]

This would be a bad solution because the state can potentially be out of sync by 500ms or whatever arbitrary time you have picked. Imagine if someone pasted (not typed) a long text and hit submit within interval, they would recieve incorrect value. This is why uncontrolled input is the way to go, if you still want the input value in state you can hook up a setState in the onChange, or just use the reference.

[@hishnash]

React tube is broken. In the end it is less work to build a native app for both platforms than to try to fix all the issues you get with react native (if you care about UX and accessibility)

[@mr.random8447]

Just use Swift UI

[@dei8bit]

long life to svelte ♥

[@dasdassdarrrr]

Not gonna do the sign up till my marketing is up and have the stable one i want :).

I do not understand why RN people always try to slame on flutter - IMO, if you have to do so you are afraid of something

[@hanro50]

I noticed this lol. Changed a lot of stuff to work around it.

[@Aestareth_]

You mean like how the NextJs cache is broken ?

[@benjaspet]

this is the guy who spoke at a club at my school

[@grgrsm]

generally it's not a problem because on a phone you cannot type fast or hold to repeat the keystroke. Also if you analyze the performance and rerendering caused by controlled inputs it's quite obvious that you need to consider the uncontrolled way, or at least it should light up the bulb to try and look for alternative since it makes no sense, or suspicious whether the facebook devs really designed it work like this or it's a simple demo for people that just starting, and if you're not just starting then you should be already aware of the alternatives, the differences, and the consequences of each approach. It's enough to read about refs to replace state with refs in case of inputs when necessary. You don't need warning for that. What if you do want to use state for some reason? Really, I think people are bored and complain for the sake of complaining and attention, or have ptsd and need to vent on something relatable.

[@lukq90]

OK do uncontrolled masked input :)

[@Seanmclem]

It’s like a foot gun problem, it’s really super easy to just not point at your foot. But everyone’s like OMG the foot gun.

[@N8X4TE]

6:21 afaik Controllers in RHF doesn’t cause the parent component rerender

[@landsman737]

Kotlin Multiplatform FTW.

[@gofullstack]

10:03 🤣🤣🤣 In Flutter, you don't even have the option to pass value as a property

[@yewo.m]

As a React/Typescript fanboy, I was always in favour of RN over Flutter as something I could use in the future if I needed to. But nowadays, seeing all the feedback people have about their experiences with it, I'm slowly coming to terms with the fact that it might not actually be a better option

[@threepe0]

Why does everyone seem to want tools to do everything for them, get mad when the tools allow them to shoot their own foot, and then also get mad when the tools don’t allow low-level access (which would absolutely result in more feet hurt)

[@veerakumar1279]

there is a app called Rapido has this issue in production , still not fixed. you cannot type your destination location faster, you have to type slowly 😅

[@chocolateimage]

and have "rapid" in the name lol

[@wlockuz4467]

@@chocolateimage Actually a great app for taxis and parcel delivery in India. Can't blame a start up for saving money by picking cross platform.

[@saggygnaw]

Nobody’s going to complain that it’s "the quick brown fox"?

[@adityaanuragi6916]

Were you expecting the whole pangram "the quick brown fox jumps over a lazy dog"

[@ts8960]

one of the things I hate about react native is that the CSS/html is different

[@rms_6401]

Never had any kind of this on java, swing, fx, openui. If you want native be native

[@vitinhuffc]

RN is awesome, when u work with it for a year. Then some stuff starts to smell... and thats sad cuz ive started to want to code some native java/kotlin

[@dira4734]

Thats not a simulator problem? never happend to me while developing on my phone, only in ios simulator happend in my case

[@Lutz64]

1:38 are you sure you want to deal with "hedgehog" fans

[@vpetryniak]

What about TanStack form for react native?

[@wlockuz4467]

This is a react-native problem not a library problem. If TanStack form uses controlled input it would be broken in the same way.

[@guseynismayylov1945]

It's ironic how a framework designed to minimize re-renders causes a text input to re-render on every keystroke. Reactivity is a joke.

[@soroushjm1011]

Guys you are messing the point, the point is do not use js outside of browser

[@mattmmilli8287]

That ship sailed long ago my friend. React is used as the hud in advanced US fighter pilot jet helmets is how far things have gone. I’m here for it :] making VR apps with react is a godsend compared to having to use Unity and no matter what the renderer, they all benefit from the constantly improving core

[@UbuntuBanksie]

I use controlled inputs in React Native just fine. Sounds like fake news

[@ILsupereroe67]

And such c**p is considered a mature framework that preople are supposed to use in production? Unbelievable

[@rawallon]

Is Dan brazilian? He went back to twitter the same time twitter was unblocked on Brazil

[@ahmoin]

this is giving me flutter vibes

[@guillaumehuardhughes]

But it is kind of a edge issue. I'm not saying it should not be prioritise, but it is not as broken as it sound in the video. Did few apps and i never got the issue in a real case scenario.

[@quanghuyng6698]

✅Angular ✅Ionic - Capacitor for better experience

[@marclp_es]

I thought I was crazy

[@JEsterCW]

Flutter community is welcoming any react native person to our enjoyment with mobile dev journey, but hey don't feel bad about react native... it's still in beta!

[@harveerSingh-iy9xz]

You guys are spreading lots of useless roumers Tell me why the instagram is using react native have they ever changed their stack? Every stack has its own pros and cons and engineers are handling the problems accordingly

[@saint.pickle]

BRO FACEBOOK MESSENGER DOES THIS AND IT PISSES ME OFF 😂 7:18

[@nemethricsi]

Hmmm so that's why typing in WhatsApp is lagging these days? :O

[@Z4KIUS]

so you're telling me you just have to do what you always did and was intuitive and natural to do instead of doing something weird and that's why people prefer doing the weird thing even though it's slow and poor UX? sounds like a modern development in the nutshell

[@AmirparsaDD]

Ah hell nah i really wanted to use posthog but i hate too much hedgehogs :(

[@stoogel]

Has Theo been shilling React Native in the past without having used it or

[@t3dotgg]

I shipped 6 react native apps and work with it regularly, I’m just not currently working on any RN projects

[@golf-and-surf]

What is the issue with flutter?

[@flutter-fm1kl]

Nothing

[@mattmmilli8287]

To me it’s uncanny valley of not feeling native. It’s sooo close in most cases but you can tell something is off compared to real native UI elements and functionality

[@donnybystrom]

No shit React Native is broken, I have used it for over six years and learned most of it's quirks, but I still bump into problems like one day starting the project and it just doesn't run - Is it because XCode had some silent update? I haven't touched the code! Its bad handling of caching is the most broken part of RN by far - And don't get me started on updating RN versions - at least a 2 day ticket, every time.

[@aleksandrnikitin7360]

React Native is broken

[@ronssijei]

Then theres these react developers bullying PHP guys :)

[@ikcikor3670]

Oh hey, isn't that the JS framework they use for Windows 11 system GUI components?

[@syth-1]

Not for everything but yes for a couple of things, windows does have its own UI framework, I dunno why they don't use their own tho, (ehm wpf, uwp, winUI3, etc etc)

[@theairaccumulator7144]

@@syth-1 because react native abstracts over those things and microsoft keeps making windows-only non cross platform frameworks with weird quirks, trying to get people to learn them and switch to them then promptly deprecating them.

[@BennyAlex98]

which browser is this A symbol?

[@vince14genius]

reject cross-platform, return to Swift/Kotlin

[@CrazyWinner357]

Controlled inputs are required to restrict user from typing wrong things. So you cant do that on react native?

[@jan-ziemba]

Of course you can. It works perfectly for example with react-hook-form.