This is one of the things a team can easily miss, create highly complex app over months and then realize that this is a huge problem, like Discord for exampe
This fails to consider the inconsistencies between iOS and Android (and other platforms). The only way you could capture the input value of an uncontrolled input during, say a form submission, would be to use refs (we don't have the benefit of form onSubmit in native contexts), either to store the text value in a ref and updating its value during onChangeText event (i.e. capture the value from a native event), or having a ref directly to the underlying element. on Android this introduces a subtle bug where if you were to update any other TextInput props between renders, it will clear the entire text input unless the `value` is passed to sync the state. But with refs, we don't sync state between renders, so the only way to handle this is to use state. Not ideal, when the point of React is to sync state between renders. It's the whole point of React's architecture.
You missed Dan's point though, It may not affect you, but this is something very basic that is guaranteed by React itself, thats why he is calling it "a hello world example that's broken". From a functionality standpoint this is not a great look for a library as big as react-native.
Last client, I worked for.. had this app built on react native using v16, most of the dependency are now changed. If I had to migrate the app to newer built, it would like creating a fresh project from scratch. I have worked on reactnative, which indeed made me debug java, and object c code. Literally, I was going through each line and had to create patches for some syntax broker for newer updates. NOW, I have left that client and that project. Peacefully 😅
bridgeless mode achieve beacuse of JSI and react native new architecture brings many things mainy two important things first is Fabric Native Component it's related to rendering native view and second is Turbo Modules which handles non-rendering stuffs like getting native settings data, etc. and also there other things also like codegen and synchronous rendering but tbh new architecture brings not great performance in android, it's bring major performance improvement in ios
What a coincidence! 😮 I just started learning React Native 3 hours ago, and now my back is aching. 😩 Here comes the first sign of demotivation from the world... Anyways I will continue to learn 😊
I'm new to RN so maybe I'm just confused, but when exactly does this happen? Is it only in browser? I've been working on a mobile app for a while and I've never seen this behavior. I'm developing using expo on my phone though, so maybe that has something to do with it? Also, for such a prominent framework, how was this not noticed before now?
i am a react native dev myself (which is spoiled since expo which i believe) Expo solves a variety of problems but also change the development experience like build taking too much time no proper debugging tools etc maybe i'll stick to Web or move to kotlin or swift in the future!
Only someone like Dan would report something like this. Because this is the kind of issue that immediately makes you think you're doing something wrong and wouldn't report it in the fear of being embarrassed at not understanding basics lol
Hi Mehul, I loved your way of explaining things. Just a suggestion: please make sure to study what you're going to explain. In this video, you mentioned that you might be wrong about the explanation of bridged architecture. If you're unsure, it's better to do a bit of research and make a more accurate video. As a content creator, your goal is to provide informative content.
Agree, this bug is really bad and controlled inputs are very common in react world but new architecture (fabric) looks interesting at least it will be a bit faster then the bridge.
We can agree that this issue shouldn’t be there as its one of the basics, however saying that rn is not mature is bit funny. Its still used the most when talking about hybrid app development. Not to mention most of stuff you see from meta is written in react and react native. So if they use it on prod is mature, trust 😅
nobody is saying that react native is bad. the problem here is that this is a dead simple reproduction of a bug that (according to dan) has now existed for months without getting prioritized.
@@codedamn Congratulations, you discovered how open source works. If you find a problem, go and solve it. If no one has solved it, it's because it's not important to them. Meta's staff doesn't get paid to solve support tickets. That's not how it works...
I had faced this issue year ago. And had no idea if i was doing something wrong or this is the default behaviour as i was just started native project. Thanks to you, today i got answer to my unsolved mystery.
I faced this same issue in my 1year old app I built. By then I had no idea if I was doing something wrong. Also i was new to react native at that time. Also all I could find was to use defaultValue instead of value. But I had a case where I wanted to run some function on each keystroke, and wanted it to be controlled. Which I could never do it at that time. That app was abandoned and I never finished it. I also had the issue on dev only. But later I found out, in production, I had samsung s20 which had good processor, so it was fast enough to handle my onChange function call. But when same app was used in older and slower phones, I had cursor dancing everywhere. So yeah in prod Also issue exists, and if ur phone is fast enough to complete each keystroke data exchange between bridge, you are safe. All you can do is hope phone is fast enough to handle the simple processing.. .
Hey Mehul, i have been following you for past couple of years, you recently launched fermion, i personally feel that you must change the name so that it might resonate well with the people, for ex Alex Hormozi launched SKOOL, now the name sounds similar to many whereas Fermion sounds alien and not understandable, please do consider in changing the name and market it well.
I just checked my react native app. I typed faster in my controlled inputtext but it works just fine. Also looks like whatsapp is a react native app as well and it doesn't have this bug too. 🤔 U should have shown this bug in react native app urself.
Congratulations, you discovered how open source works. If you find a problem, go and solve it. If no one has solved it, it's because it's not important to them. Meta's staff doesn't get paid to solve support tickets. That's not how it works...
that’s not how it works. Facebook has invested a lot of real money in open source and paid engineering hours on React and React native. The projects weren’t just born out of goodwill from community
@@codedamn Yes, they are paid to improve the core of the product. If a non-critical bug appears, the community is expected to solve it while it has not yet been "solved". They are not paid for this: - I found a bug here, I will make a report and you have to solve it. That is not how it works...
This "bug" is an absurd edge case. Less than 1% of the user base can fall into this error, and if they do, there are solutions. Less click bait and more useful content...
Can anyone help me to intrigation of tailwind in react native don't know why I'm not able to do it I have done all the steps which shown on the docs I'm using expo
Love your content bro.. you can't find these kind of complex issues discussed in youtube. I'm learning a lot from your videos. .❤
Appreciate the discussion. But..
Not being able to use controlled input doesn't seem to be a deal-breaker cause for me. As there is a way around
This is one of the things a team can easily miss, create highly complex app over months and then realize that this is a huge problem, like Discord for exampe
This fails to consider the inconsistencies between iOS and Android (and other platforms). The only way you could capture the input value of an uncontrolled input during, say a form submission, would be to use refs (we don't have the benefit of form onSubmit in native contexts), either to store the text value in a ref and updating its value during onChangeText event (i.e. capture the value from a native event), or having a ref directly to the underlying element.
on Android this introduces a subtle bug where if you were to update any other TextInput props between renders, it will clear the entire text input unless the `value` is passed to sync the state. But with refs, we don't sync state between renders, so the only way to handle this is to use state.
Not ideal, when the point of React is to sync state between renders. It's the whole point of React's architecture.
You missed Dan's point though, It may not affect you, but this is something very basic that is guaranteed by React itself, thats why he is calling it "a hello world example that's broken".
From a functionality standpoint this is not a great look for a library as big as react-native.
That title is such a clickbait.
keep sharing the latest updates happening in the industry . great content
Last client, I worked for.. had this app built on react native using v16, most of the dependency are now changed. If I had to migrate the app to newer built, it would like creating a fresh project from scratch. I have worked on reactnative, which indeed made me debug java, and object c code. Literally, I was going through each line and had to create patches for some syntax broker for newer updates. NOW, I have left that client and that project. Peacefully 😅
bridgeless mode achieve beacuse of JSI and react native new architecture brings many things mainy two important things first is Fabric Native Component it's related to rendering native view and second is Turbo Modules which handles non-rendering stuffs like getting native settings data, etc. and also there other things also like codegen and synchronous rendering but tbh new architecture brings not great performance in android, it's bring major performance improvement in ios
How about not using controlled input and use useRef instead of useState would that solve the issue
What a coincidence! 😮 I just started learning React Native 3 hours ago, and now my back is aching. 😩 Here comes the first sign of demotivation from the world... Anyways I will continue to learn 😊
I have also installed the android studio today
Here I'm a next js dev, wanting to learn RN
In real world this is not a big problem this guy is just making this big just to get views if you add a simple method I can't remake this issue
I'm new to RN so maybe I'm just confused, but when exactly does this happen? Is it only in browser? I've been working on a mobile app for a while and I've never seen this behavior. I'm developing using expo on my phone though, so maybe that has something to do with it? Also, for such a prominent framework, how was this not noticed before now?
i am a react native dev myself (which is spoiled since expo which i believe) Expo solves a variety of problems but also change the development experience like build taking too much time no proper debugging tools etc maybe i'll stick to Web or move to kotlin or swift in the future!
Very informative Mehul. Thanks a lot
Thank you 😊 bhaiya to keep us updated and explain it which is easier to understand than reading from docs😊😊
Only someone like Dan would report something like this. Because this is the kind of issue that immediately makes you think you're doing something wrong and wouldn't report it in the fear of being embarrassed at not understanding basics lol
Haha true
Hi Mehul, I loved your way of explaining things. Just a suggestion: please make sure to study what you're going to explain. In this video, you mentioned that you might be wrong about the explanation of bridged architecture. If you're unsure, it's better to do a bit of research and make a more accurate video. As a content creator, your goal is to provide informative content.
I have noticed this in many apps and it's very annoying I would have never thought it was because it was an React Native app. Thanks for the info
where is this pull request or issue ? I can't find it in the repo
Agree, this bug is really bad and controlled inputs are very common in react world but new architecture (fabric) looks interesting at least it will be a bit faster then the bridge.
5:13 shouldnt it be "its probably easier to do in react-dom than react native?", i am asking only here.
We can agree that this issue shouldn’t be there as its one of the basics, however saying that rn is not mature is bit funny. Its still used the most when talking about hybrid app development. Not to mention most of stuff you see from meta is written in react and react native. So if they use it on prod is mature, trust 😅
nobody is saying that react native is bad.
the problem here is that this is a dead simple reproduction of a bug that (according to dan) has now existed for months without getting prioritized.
@@codedamn Congratulations, you discovered how open source works.
If you find a problem, go and solve it. If no one has solved it, it's because it's not important to them.
Meta's staff doesn't get paid to solve support tickets. That's not how it works...
I had faced this issue year ago. And had no idea if i was doing something wrong or this is the default behaviour as i was just started native project.
Thanks to you, today i got answer to my unsolved mystery.
What are you actively using right now? If not React Native
Good to know but nothing major that I need to stop using RN
Can you share the link of the issue? Tried but couldn't find it.
Since i’m using react hook form library in my app. I can’t really see any of these issues with any of my inputs.
I dont know why but i recently just bump my react native project form 0.73.8 to latest version but i didnt see any of these issues ,...
Name of the chrome extension showing days on new tab page ?
its great seeing a indian dev teaching some real shit... not selling courses
A small correction: Dan has left Meta, he now works at bluesky
Didn’t know that! Thanks for mentioning
but this seems to happen only in dev mode, in production just works fine.
No
I faced this same issue in my 1year old app I built. By then I had no idea if I was doing something wrong. Also i was new to react native at that time.
Also all I could find was to use defaultValue instead of value. But I had a case where I wanted to run some function on each keystroke, and wanted it to be controlled. Which I could never do it at that time. That app was abandoned and I never finished it.
I also had the issue on dev only. But later I found out, in production, I had samsung s20 which had good processor, so it was fast enough to handle my onChange function call. But when same app was used in older and slower phones, I had cursor dancing everywhere.
So yeah in prod Also issue exists, and if ur phone is fast enough to complete each keystroke data exchange between bridge, you are safe. All you can do is hope phone is fast enough to handle the simple processing.. .
i heard of Jsi may be it will fix some of the problems
Hey Mehul, i have been following you for past couple of years, you recently launched fermion, i personally feel that you must change the name so that it might resonate well with the people, for ex Alex Hormozi launched SKOOL, now the name sounds similar to many whereas Fermion sounds alien and not understandable, please do consider in changing the name and market it well.
Brand names are mostly useless. Think what Microsoft or Amazon would mean? You can’t tell from their name what they do.
Your work, product quality, marketing and sales are the winning factor I think
Why Facebook use React Native 😅?
He has left facebook a while back as far as I know. He might be contributing independently
He's working at BlueSky.
I just checked my react native app. I typed faster in my controlled inputtext but it works just fine. Also looks like whatsapp is a react native app as well and it doesn't have this bug too. 🤔 U should have shown this bug in react native app urself.
lol 😂,who told you WhatsApp is a react native app ?
WhatsApp is full native
do you try with your pc's keyboard or mobile device keyboard?
mostly ios issue
@@arunkumarbhardwaj4349 really. They should have pointed it out
Been experiencing this for a while
Flutter is more mature than this garbage😂
100% true 😂
Not able to reproduce
Meanwhile Flutter in the corner
Congratulations, you discovered how open source works.
If you find a problem, go and solve it. If no one has solved it, it's because it's not important to them.
Meta's staff doesn't get paid to solve support tickets. That's not how it works...
that’s not how it works. Facebook has invested a lot of real money in open source and paid engineering hours on React and React native. The projects weren’t just born out of goodwill from community
@@codedamn Yes, they are paid to improve the core of the product. If a non-critical bug appears, the community is expected to solve it while it has not yet been "solved".
They are not paid for this:
- I found a bug here, I will make a report and you have to solve it.
That is not how it works...
This "bug" is an absurd edge case.
Less than 1% of the user base can fall into this error, and if they do, there are solutions.
Less click bait and more useful content...
Can anyone help me to intrigation of tailwind in react native don't know why I'm not able to do it I have done all the steps which shown on the docs I'm using expo
I have started learning React native from 2 days back 😂
Now I'm thinking 🤔
I’m sure this would be fixed soon. I think it’s getting some heat from the community (and I hope this video helps accelerate that too 😬)
Learn flutter
This is a clickbait title.
Opens trash can. throws in. moves to flutter. I briefly worked on React native a year ago, most painful experience. Flutter is so much better.
clickbait
You make video too long and repeat same stuff.
please work on it.
make it to the point that’s it.
use flutter
Who types that fast in real world? lol
Me
@@NickHamilton88 Prove it 😂
@@amani_art rjdjdjdhdjdjxjdjfjcjfnehahdnfnfnxjwbrnfjchebdjtntjdjebrjfucjfnfjcjvjg proved
Flutter is far more better than React