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

Summary

In this video, the speaker critiques the use of controlled inputs in React Native, highlighting their inherent flaws that lead to poor app performance, such as lagging keys and cursor issues. Using a technical demonstration, the speaker contrasts controlled and uncontrolled inputs, advocating for the latter to avoid these performance pitfalls. The discussion underscores a broader concern regarding React Native's reputation for quality app development. With calls for prioritizing fixes to these fundamental issues, the speaker urges the React Native team to improve documentation and user guidance, emphasizing the need for a more reliable framework that meets user expectations.

Takeaways

• 😀 Controlled inputs in React Native are currently problematic, leading to poor user experiences.
• 😀 Uncontrolled inputs often provide smoother performance compared to controlled inputs, especially in slow applications.
• 😀 Developers have reported issues with lagging cursors and dropped keystrokes when using controlled inputs.
• 😀 React Hook Form, typically recommended for handling uncontrolled inputs, may also face challenges when used with React Native.
• 😀 A proposal exists to discourage the use of controlled inputs in React Native until bugs are resolved.
• 😀 Communication about the limitations of controlled inputs is essential for developers using React Native.
• 😀 Developers express frustration over the framework's inability to produce high-quality native apps due to input issues.
• 😀 There are calls for better prioritization of foundational problems within the React Native team.
• 😀 The discussion underscores the importance of maintaining user input fidelity for a positive user experience.
• 😀 The community seeks improvements to restore confidence in React Native as a viable framework for mobile development.

Q & A

What are controlled inputs in React Native?

Controlled inputs in React Native refer to form inputs where the value is controlled by React state, meaning any change to the input's value requires updating the state before rendering it again.

What are the drawbacks of using controlled inputs as discussed in the transcript?

The drawbacks include performance issues, such as lag when typing, especially if the state update process is slow or blocked. This can lead to a poor user experience with laggy inputs and misplaced cursors.

How do uncontrolled inputs differ from controlled inputs?

Uncontrolled inputs manage their own state within the browser rather than through React. The value is not controlled by React, making them generally faster and more responsive, especially when the application experiences performance issues.

What example is provided to illustrate the performance issues with controlled inputs?

The example demonstrates a scenario where a function blocks the main thread for 100 milliseconds, causing lag in the controlled input when typing. In contrast, the uncontrolled input remains responsive because its value is managed by the browser.

What recommendation does the speaker give regarding libraries for handling uncontrolled inputs?

The speaker recommends using libraries like React Hook Form, which is designed to manage uncontrolled inputs effectively and allows developers to pull updated state when needed, avoiding common pitfalls of controlled inputs.

What concerns were raised about React Hook Form in relation to React Native?

Concerns were raised that even React Hook Form might experience issues with controlled inputs in React Native, specifically when using its controller with a render function, which may still have underlying problems similar to those in controlled inputs.

What was Dan's primary concern regarding controlled inputs in React Native?

Dan's primary concern was that basic controlled text editing is broken in React Native, leading to issues like lagging cursors and incorrect input behavior, which contributes to a negative perception of React Native's capabilities.

What did Dan suggest regarding the documentation of controlled inputs?

Dan suggested that the documentation should discourage the use of controlled inputs in React Native and recommend sticking with uncontrolled inputs until the issues are fixed, highlighting the importance of communicating known problems to developers.

What are the broader implications of these issues for React Native's reputation?

The issues with controlled inputs can contribute to the perception that React Native is incapable of producing high-quality native apps. Addressing these problems is crucial for improving user experience and maintaining developer trust in the framework.

What potential solutions were discussed for fixing the problems with controlled inputs?

Potential solutions include deprecating controlled inputs in favor of uncontrolled inputs, prioritizing fixes for these bugs in the React Native framework, and ensuring that the framework maintains the native input behavior for a better user experience.