Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on.You've got this!
Controlled vs Uncontrolled TextInput
React Native TextInput works differently from web inputs. Understanding controlled vs uncontrolled patterns, and when to use each, prevents frustrating bugs where the displayed value lags or doesn't sync with state.
Controlled Input - The Standard Pattern
import { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native';
// Controlled - React owns the value, re-renders on every keystroke
function ControlledInput() {
const [text, setText] = useState('');
return (
<TextInput
value={text} // ← React drives the displayed value
onChangeText={setText} // ← updates state on every character
style={styles.input}
/>
);
}
// Uncontrolled - DOM owns the value, retrieved via ref
import { useRef } from 'react';
function UncontrolledInput() {
const inputRef = useRef<TextInput>(null);
function handleSubmit() {
// NOTE: getText is not available in React Native.
// Use onChangeText to track latest value, or react-hook-form.
// Truly uncontrolled inputs (no value prop) avoid re-renders on every keystroke.
console.log('No easy way to read value without onChangeText');
}
return (
<TextInput
// No 'value' prop - uncontrolled
defaultValue="" // initial value only
onChangeText={v => { /* locally track or ignore */ }}
ref={inputRef}
style={styles.input}
/>
);
}
// ---- When to use which ----
// ✅ Controlled: when you need to validate, transform, or sync the value with state
// ✅ Uncontrolled (via react-hook-form): large forms where you want to minimize re-renders
// The best of both worlds = react-hook-form (handles uncontrolled refs internally)Tip
Tip
Practice Controlled vs Uncontrolled TextInput in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
State synchronization cycles and native input bridge dispatch
Practice Task
Note
Practice Task - (1) Write a working example of Controlled vs Uncontrolled TextInput from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Quick Quiz
Common Mistake
Warning
A common mistake with Controlled vs Uncontrolled TextInput is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready react native code.