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

☀️ Quick Takes

Is this Video Clickbait?

1-Sentence-Summary

Favorite Quote from the Author

Inputs must not drop keystrokes or lose cursor position. In the common case, it's easy to lose sight of something like this with multi-year projects, but this stuff doesn't matter if you can't trust the framework with the basics.

Key Ideas

• 🚨 React Native's controlled inputs are broken, leading to performance issues like lagging keys and poor user experience.

• ⚡ Uncontrolled inputs perform better because the state is managed by the browser, not React.

• 🛠️ React Hook Form is recommended for managing uncontrolled inputs, but it has issues with React Native.

• ⌨️ Controlled text editing in React Native is broken, causing cursor lag and incorrect user input.

• 📉 React Native's issues with controlled inputs contribute to the perception that it can't produce high-quality native apps.

• 🐛 Bugs with controlled inputs persist even in React Native's new architecture, and workarounds often involve avoiding controlled inputs.

• 🔄 Multi-line controlled inputs can enter infinite loops, and the value field in text input is broken in subtle ways.

• 🔧 React Native should prioritize fixing fundamental features like text input handling to avoid degrading native component behavior.

• ❌ React Native's text input issues, like dropped keystrokes and lost cursor position, undermine trust in the framework.

• 🚀 React Native needs to focus on improving the onboarding experience and ensuring the original ethos of React is upheld.

📃 Video Mini Summary

TL;DR

💨 React Native's controlled inputs are broken, causing performance issues like lagging keys and cursor problems. This leads to a poor user experience, especially in text editing.

Uncontrolled inputs perform better, but React Native still struggles with basic input handling. Bugs persist even in the new architecture, and workarounds like using default values are common. The framework's handling of text inputs is frustrating, particularly compared to Flutter, and undermines trust in React Native's ability to create high-quality native apps.

Controlled Inputs in React Native Are a Mess

🚨 React Native's controlled inputs are fundamentally broken. They cause lagging keys, poor user experience, and even cursor misplacement. When typing fast, the input can't keep up, leading to a frustrating experience where the cursor jumps around or text gets misplaced. This is not just a minor bug; it's a Hello World-level issue that affects even the simplest apps.

"The cursor should not lag behind typing because it causes incorrect user input."

Uncontrolled Inputs: The Safer Bet

⚡ Uncontrolled inputs perform better because the state is managed by the browser, not React. This means that even if your app is slow or blocking the main thread, the input field itself remains responsive. You can still retrieve the value when needed, but React isn't constantly trying to control it, which avoids performance issues.

React Hook Form: Not a Silver Bullet

🛠️ While React Hook Form is often recommended for managing uncontrolled inputs, it has its own issues when used with React Native. The problem lies in how it uses a controller to pass values to text inputs, which might still suffer from the same performance problems as controlled inputs. There's no guarantee that React Hook Form will solve the issue in React Native.

Cursor Lag and Incorrect Input: A Common Problem

⌨️ The issue with controlled text editing in React Native is that it leads to cursor lag and incorrect user input. This isn't just theoretical—it's happening in production apps. Users type, and suddenly the cursor jumps to the wrong position, or text gets duplicated. It's embarrassing for developers and frustrating for users.

Perception of Low-Quality Apps

📉 These issues with controlled inputs contribute to the perception that React Native can't produce high-quality native apps. When basic features like text input handling are broken, it reinforces the idea that React Native is only good for building "shitty apps." This perception is damaging, especially when developers are trying to build polished, native-like experiences.

New Architecture, Same Old Bugs

🐛 Even with React Native's new architecture, these bugs persist. Workarounds often involve avoiding controlled inputs altogether, but that's not a real solution. The fact that these issues remain in both the old and new architectures shows how deeply ingrained the problem is.

Multi-Line Inputs: A Special Kind of Broken

🔄 Multi-line controlled inputs are even worse—they can enter infinite loops. This happens when you try to control the value of a multi-line input, causing the app to freeze or crash. The value field in text inputs is broken in subtle ways that make it unreliable for anything beyond basic use cases.

Fixing Text Input Should Be a Priority

🔧 React Native needs to prioritize fixing fundamental features like text input handling. The framework should not degrade the behavior of native components, especially something as basic as text input. If React Native can't handle this properly, it undermines the entire premise of using it to build native apps.

Dropped Keystrokes and Lost Cursor Position: Trust Issues

❌ When keystrokes are dropped or the cursor position is lost, it creates a trust issue with the framework. Developers can't rely on React Native to handle even the most basic interactions correctly. This is a severe bug that should be treated as a high-priority issue.

"Inputs must not drop keystrokes or lose cursor position—not in the common case."

Onboarding Needs Improvement

🚀 React Native also needs to focus on improving its onboarding experience. The original ethos of React was about setting developers up for success from the start, but React Native has drifted away from that. Ensuring that new developers have a smooth experience is crucial for maintaining trust in the framework.

Conclusion

🌚 React Native's controlled inputs detach from the native layer, causing severe issues like dropped keystrokes and cursor lag. These problems persist despite updates and degrade the user experience.

The framework needs to prioritize fixing these fundamental issues to maintain its relevance and ensure it doesn't compromise native component behavior in common use cases.