Mastering React: Controlled vs. Uncontrolled Components

In React, managing form inputs is a fundamental aspect of building interactive user interfaces. Understanding the difference between controlled and uncontrolled components is crucial for writing efficient, predictable, and maintainable React applications, especially when working with TypeScript.
What are Form Components in React?

Form components are the building blocks of user interaction in web applications. In React, these typically include input fields (
code
), text areas (
code
</div></pre></div></div>), and select dropdowns (<div class="my-6 bg-gray-900 rounded-lg overflow-hidden shadow-lg border border-gray-700"><div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="flex space-x-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><div class="w-3 h-3 bg-green-500 rounded-full"></div></div><span class="text-sm text-gray-300 font-mono">code</span></div><div class="flex items-center space-x-2"><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3 h-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Edit code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen w-3 h-3" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg><span>Edit</span></button></div></div><div class="p-4 overflow-x-auto"><pre class="text-sm font-mono leading-relaxed text-gray-100"><div><select></div></pre></div></div>). The way React manages the state and value of these elements defines whether they are controlled or uncontrolled.</p></div></div><div><h2 id="heading-controlled-components-the-react-way" class="text-2xl font-semibold mt-8 mb-4 text-gray-900">Controlled Components: The React Way</h2></div><div><div class="prose max-w-none text-gray-800 leading-relaxed my-4"><p>Controlled components are those where React state is the "single source of truth" for the form input's value. The component's state dictates the input's value, and any changes to the input are handled by updating the component's state.</p></div></div><div><div class="my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg overflow-hidden"><div class="p-6 border-b border-gray-200/50"><h3 class="text-xl font-bold text-gray-900 flex items-center"><div class="w-12 h-12 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open w-6 h-6 text-indigo-600" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg></div>In controlled components, React state manages the input's value.</h3></div><div class="p-6 prose max-w-none text-gray-700"><p>The input's value is driven by React state, and changes are handled by updating that state via an <code>onChange</code> handler. This ensures that React always has the most up-to-date value.</p></div><div class="flex justify-center py-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-6 h-6 text-gray-400" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></div><div class="px-6 pb-6"><div class="p-4 bg-gray-50/50 rounded-xl prose max-w-none text-gray-600"><p>To create a controlled component, you typically use the <code>useState</code> hook to manage the input's value. The input element's <code>value</code> prop is bound to this state variable, and an <code>onChange</code> event handler is attached to update the state whenever the user types. This pattern gives you complete control over the input's value and behavior, allowing for real-time validation, formatting, and conditional rendering based on the input.</p></div></div></div></div><div><div class="my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg p-6"><div class="flex items-start bg-indigo-50 px-4 py-3 rounded-xl mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-circuit h-6 w-6 mr-3 text-indigo-600 mt-1 flex-shrink-0" aria-hidden="true"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M9 13a4.5 4.5 0 0 0 3-4"></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path><path d="M6 18a4 4 0 0 1-1.967-.516"></path><path d="M12 13h4"></path><path d="M12 18h6a2 2 0 0 1 2 2v1"></path><path d="M12 8h8"></path><path d="M16 8V5a2 2 0 0 1 2-2"></path><circle cx="16" cy="13" r=".5"></circle><circle cx="18" cy="3" r=".5"></circle><circle cx="20" cy="21" r=".5"></circle><circle cx="20" cy="8" r=".5"></circle></svg><div class="text-xl font-medium text-indigo-900 prose prose-xl max-w-none"><span>What is the primary characteristic of a controlled component in React?</span></div></div><div class="px-4 pt-4 pb-2 text-gray-700 prose max-w-none bg-gray-50/50 rounded-xl"><p>React state is the single source of truth for the input's value.</p></div></div></div><div><h2 id="heading-uncontrolled-components-dom-managed-values" class="text-2xl font-semibold mt-8 mb-4 text-gray-900">Uncontrolled Components: DOM-Managed Values</h2></div><div><div class="prose max-w-none text-gray-800 leading-relaxed my-4"><p>Uncontrolled components are similar to traditional HTML form elements. Instead of React state managing the value, the DOM itself stores the form input's value. You can access the DOM value directly when needed, typically using a ref.</p></div></div><div><div class="my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg overflow-hidden"><div class="p-6 border-b border-gray-200/50"><h3 class="text-xl font-bold text-gray-900 flex items-center"><div class="w-12 h-12 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open w-6 h-6 text-indigo-600" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg></div>In uncontrolled components, the DOM manages the input's value.</h3></div><div class="p-6 prose max-w-none text-gray-700"><p>The input's value is managed by the DOM. You use refs to access the current value when needed, often on form submission.</p></div><div class="flex justify-center py-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-6 h-6 text-gray-400" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></div><div class="px-6 pb-6"><div class="p-4 bg-gray-50/50 rounded-xl prose max-w-none text-gray-600"><p>For uncontrolled components, you use <code>useRef</code> to create a mutable reference that you attach to the DOM element. The <code>ref</code> object will hold the DOM node, and you can access its current value via <code>ref.current.value</code>. This approach is simpler for basic forms where you only need the value upon submission, as it avoids the overhead of managing state for every keystroke.</p></div></div></div></div><div><div class="my-6 p-6 rounded-2xl border-l-4 shadow-lg bg-blue-50 border-blue-400 text-blue-800"><div class="flex items-start"><div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-compare-arrows w-6 h-6 text-blue-600" aria-hidden="true"><circle cx="5" cy="6" r="3"></circle><path d="M12 6h5a2 2 0 0 1 2 2v7"></path><path d="m15 9-3-3 3-3"></path><circle cx="19" cy="18" r="3"></circle><path d="M12 18H7a2 2 0 0 1-2-2V9"></path><path d="m9 15 3 3-3 3"></path></svg></div><div class="prose max-w-none text-current"><p>Think of controlled components like a thermostat where the desired temperature (state) directly controls the heating/cooling system (input). Uncontrolled components are like a manual light switch where you flip it, and the light turns on/off without React actively tracking its state.</p></div></div></div></div><div><h2 id="heading-controlled-vs-uncontrolled-a-comparison" class="text-2xl font-semibold mt-8 mb-4 text-gray-900">Controlled vs. Uncontrolled: A Comparison</h2></div><div><div class="overflow-x-auto my-8 border border-gray-200"><table class="w-full text-sm text-left text-gray-700"><thead class="text-gray-800 bg-gray-50 border-b border-gray-200"><tr><th scope="col" class="px-6 py-4 font-semibold"><span>Feature</span></th><th scope="col" class="px-6 py-4 font-semibold"><span>Controlled Components</span></th><th scope="col" class="px-6 py-4 font-semibold"><span>Uncontrolled Components</span></th></tr></thead><tbody><tr class="bg-white border-b border-gray-100 last:border-b-0"><td class="px-6 py-4"><span>State Management</span></td><td class="px-6 py-4"><span>Managed by React state (<code>useState</code>)</span></td><td class="px-6 py-4"><span>Managed by the DOM</span></td></tr><tr class="bg-white border-b border-gray-100 last:border-b-0"><td class="px-6 py-4"><span>Value Source</span></td><td class="px-6 py-4"><span>React state</span></td><td class="px-6 py-4"><span>DOM element (<code>ref.current.value</code>)</span></td></tr><tr class="bg-white border-b border-gray-100 last:border-b-0"><td class="px-6 py-4"><span>Data Flow</span></td><td class="px-6 py-4"><span>Unidirectional (state -> input)</span></td><td class="px-6 py-4"><span>Imperative (access via ref)</span></td></tr><tr class="bg-white border-b border-gray-100 last:border-b-0"><td class="px-6 py-4"><span>Use Cases</span></td><td class="px-6 py-4"><span>Real-time validation, dynamic updates, complex forms</span></td><td class="px-6 py-4"><span>Simple forms, quick data retrieval on submit</span></td></tr><tr class="bg-white border-b border-gray-100 last:border-b-0"><td class="px-6 py-4"><span>Complexity</span></td><td class="px-6 py-4"><span>Slightly more verbose due to state management</span></td><td class="px-6 py-4"><span>Simpler for basic cases</span></td></tr></tbody></table></div></div><div><h2 id="heading-typescript-integration" class="text-2xl font-semibold mt-8 mb-4 text-gray-900">TypeScript Integration</h2></div><div><div class="prose max-w-none text-gray-800 leading-relaxed my-4"><p>When using TypeScript with React, you'll want to properly type your state and refs. For controlled components, this means typing your <div class="my-6 bg-gray-900 rounded-lg overflow-hidden shadow-lg border border-gray-700"><div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="flex space-x-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><div class="w-3 h-3 bg-green-500 rounded-full"></div></div><span class="text-sm text-gray-300 font-mono">code</span></div><div class="flex items-center space-x-2"><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3 h-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Edit code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen w-3 h-3" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg><span>Edit</span></button></div></div><div class="p-4 overflow-x-auto"><pre class="text-sm font-mono leading-relaxed text-gray-100"><div>useState</div></pre></div></div> hook (e.g., <div class="my-6 bg-gray-900 rounded-lg overflow-hidden shadow-lg border border-gray-700"><div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="flex space-x-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><div class="w-3 h-3 bg-green-500 rounded-full"></div></div><span class="text-sm text-gray-300 font-mono">code</span></div><div class="flex items-center space-x-2"><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3 h-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Edit code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen w-3 h-3" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg><span>Edit</span></button></div></div><div class="p-4 overflow-x-auto"><pre class="text-sm font-mono leading-relaxed text-gray-100"><div>useState<string>('')</div></pre></div></div>). For uncontrolled components, you'll use <div class="my-6 bg-gray-900 rounded-lg overflow-hidden shadow-lg border border-gray-700"><div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="flex space-x-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><div class="w-3 h-3 bg-green-500 rounded-full"></div></div><span class="text-sm text-gray-300 font-mono">code</span></div><div class="flex items-center space-x-2"><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3 h-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Edit code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen w-3 h-3" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg><span>Edit</span></button></div></div><div class="p-4 overflow-x-auto"><pre class="text-sm font-mono leading-relaxed text-gray-100"><div>useRef<HTMLInputElement>(null)</div></pre></div></div> or a similar type for the specific input element you're referencing.</p></div></div><div><h2 id="heading-when-to-use-which" class="text-2xl font-semibold mt-8 mb-4 text-gray-900">When to Use Which?</h2></div><div><div class="prose max-w-none text-gray-800 leading-relaxed my-4"><p>Choose <strong>controlled components</strong> when you need to:</p>
<ul>
<li>Validate input as the user types.</li>
<li>Conditionally enable/disable buttons or show error messages.</li>
<li>Format input values in real-time (e.g., currency, phone numbers).</li>
<li>Have the most up-to-date value of the input available at all times.</li>
</ul>
<p>Choose <strong>uncontrolled components</strong> when you need to:</p>
<ul>
<li>Quickly get the value of an input when a form is submitted.</li>
<li>Integrate with third-party form libraries that rely on DOM values.</li>
<li>Avoid the overhead of state management for simple inputs that don't require immediate updates.</li>
</ul></div></div><div><h2 id="heading-example-controlled-input" class="text-2xl font-semibold mt-8 mb-4 text-gray-900">Example: Controlled Input</h2></div><div><div class="prose max-w-none text-gray-800 leading-relaxed my-4"><p>Here's a basic example of a controlled input using <div class="my-6 bg-gray-900 rounded-lg overflow-hidden shadow-lg border border-gray-700"><div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="flex space-x-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><div class="w-3 h-3 bg-green-500 rounded-full"></div></div><span class="text-sm text-gray-300 font-mono">code</span></div><div class="flex items-center space-x-2"><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3 h-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Edit code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen w-3 h-3" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg><span>Edit</span></button></div></div><div class="p-4 overflow-x-auto"><pre class="text-sm font-mono leading-relaxed text-gray-100"><div>useState</div></pre></div></div> and TypeScript:</p>
<div class="my-6 bg-gray-900 rounded-lg overflow-hidden shadow-lg border border-gray-700"><div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="flex space-x-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><div class="w-3 h-3 bg-green-500 rounded-full"></div></div><span class="text-sm text-gray-300 font-mono">typescript</span></div><div class="flex items-center space-x-2"><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3 h-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Edit code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen w-3 h-3" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg><span>Edit</span></button></div></div><div class="p-4 overflow-x-auto"><pre class="text-sm font-mono leading-relaxed text-gray-100"><div>import React, { useState } from 'react';</div><div></div><div>function ControlledInput() {</div><div>  const [value, setValue] = useState<string>('');</div><div></div><div>  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {</div><div>    setValue(event.target.value);</div><div>  };</div><div></div><div>  return (</div><div>    <input type="text" value={value} onChange={handleChange} /></div><div>  );</div><div>}</div><div></div><div>export default ControlledInput;</div></pre></div></div></div></div><div><h2 id="heading-example-uncontrolled-input" class="text-2xl font-semibold mt-8 mb-4 text-gray-900">Example: Uncontrolled Input</h2></div><div><div class="prose max-w-none text-gray-800 leading-relaxed my-4"><p>And here's an example of an uncontrolled input using <div class="my-6 bg-gray-900 rounded-lg overflow-hidden shadow-lg border border-gray-700"><div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="flex space-x-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><div class="w-3 h-3 bg-green-500 rounded-full"></div></div><span class="text-sm text-gray-300 font-mono">code</span></div><div class="flex items-center space-x-2"><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3 h-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Edit code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen w-3 h-3" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg><span>Edit</span></button></div></div><div class="p-4 overflow-x-auto"><pre class="text-sm font-mono leading-relaxed text-gray-100"><div>useRef</div></pre></div></div> and TypeScript:</p>
<div class="my-6 bg-gray-900 rounded-lg overflow-hidden shadow-lg border border-gray-700"><div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="flex space-x-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><div class="w-3 h-3 bg-green-500 rounded-full"></div></div><span class="text-sm text-gray-300 font-mono">typescript</span></div><div class="flex items-center space-x-2"><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3 h-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Edit code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen w-3 h-3" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg><span>Edit</span></button></div></div><div class="p-4 overflow-x-auto"><pre class="text-sm font-mono leading-relaxed text-gray-100"><div>import React, { useRef } from 'react';</div><div></div><div>function UncontrolledInput() {</div><div>  const inputRef = useRef<HTMLInputElement>(null);</div><div></div><div>  const handleSubmit = () => {</div><div>    if (inputRef.current) {</div><div>      alert(`Input value: ${inputRef.current.value}`);</div><div>    }</div><div>  };</div><div></div><div>  return (</div><div>    <div></div><div>      <input type="text" ref={inputRef} /></div><div>      <button onClick={handleSubmit}>Get Value</button></div><div>    </div></div><div>  );</div><div>}</div><div></div><div>export default UncontrolledInput;</div></pre></div></div></div></div><div class="mt-12 pt-8 border-t border-gray-200"><h2 class="text-2xl font-bold text-gray-900 mb-6">Learning Resources</h2><div class="space-y-3"><div><a href="https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">Forms in React – React</a><span class="text-gray-500 text-sm ml-2">(<!-- -->documentation<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">The official React documentation provides a clear explanation of how to control form inputs using state variables, covering the core concepts of controlled components.</p></div><div><a href="https://react.dev/reference/react/useRef" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">React Hooks: useRef – React</a><span class="text-gray-500 text-sm ml-2">(<!-- -->documentation<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">Official documentation for the `useRef` hook, essential for understanding how to manage refs and access DOM elements in uncontrolled components.</p></div><div><a href="https://www.freecodecamp.org/news/controlled-vs-uncontrolled-components-in-react/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">React Forms: Controlled vs Uncontrolled Components Explained</a><span class="text-gray-500 text-sm ml-2">(<!-- -->blog<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">A comprehensive blog post from freeCodeCamp that breaks down the differences, use cases, and provides practical examples of both controlled and uncontrolled components.</p></div><div><a href="https://www.robinwieruch.de/react-typescript-forms/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">React TypeScript Tutorial: Forms</a><span class="text-gray-500 text-sm ml-2">(<!-- -->blog<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">This tutorial focuses on building forms in React with TypeScript, offering practical guidance on typing state and event handlers for controlled components.</p></div><div><a href="https://www.digitalocean.com/community/tutorials/react-form-handling-controlled-vs-uncontrolled-components" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">React Form Handling: Controlled vs. Uncontrolled Components</a><span class="text-gray-500 text-sm ml-2">(<!-- -->tutorial<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">A step-by-step tutorial that explains the concepts of controlled and uncontrolled components with code examples, helping you choose the right approach.</p></div><div><a href="https://www.simplilearn.com/tutorials/reactjs-tutorial/controlled-vs-uncontrolled-components-in-reactjs" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">Understanding React's Controlled and Uncontrolled Components</a><span class="text-gray-500 text-sm ml-2">(<!-- -->blog<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">This article provides a clear comparison and explanation of when to use controlled versus uncontrolled components in React applications.</p></div><div><a href="https://react.dev/reference/react/useState" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">React Hooks: useState – React</a><span class="text-gray-500 text-sm ml-2">(<!-- -->documentation<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">The official documentation for the `useState` hook, which is fundamental for implementing controlled components in React.</p></div><div><a href="https://www.youtube.com/watch?v=o9z0_0b2_6A" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">Mastering React Forms with TypeScript</a><span class="text-gray-500 text-sm ml-2">(<!-- -->video<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">A video tutorial that delves into form management in React using TypeScript, likely covering controlled and uncontrolled patterns.</p></div><div><a href="https://www.youtube.com/watch?v=h6j74_40_yM" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">React Controlled Components Explained</a><span class="text-gray-500 text-sm ml-2">(<!-- -->video<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">A focused video explanation of controlled components in React, demonstrating their implementation and benefits.</p></div><div><a href="https://www.youtube.com/watch?v=0l203f2i3jM" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">React Uncontrolled Components Explained</a><span class="text-gray-500 text-sm ml-2">(<!-- -->video<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">A video tutorial specifically explaining the concept and usage of uncontrolled components in React applications.</p></div></div></div></div><!--/$--></article><footer class="mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-700"><div class="flex flex-col sm:flex-row sm:justify-between items-start sm:items-center text-sm text-gray-500 dark:text-gray-400 space-y-3 sm:space-y-0"><div><p>Last updated: <!-- -->9/12/2025</p></div><div><p>Part of Menttor Library</p></div></div></footer></main></div></div></div></div><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><script src="/_next/static/chunks/webpack-72ece0fd9a9f1a05.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/09dfadb69bdaa005.css\",\"style\"]\n2:HL[\"/_next/static/css/4ea63a6bcb618b80.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[12846,[],\"\"]\n6:I[4707,[],\"\"]\n8:I[36423,[],\"\"]\na:I[55319,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"ThemeProvider\"]\nb:I[20617,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\nc:I[33476,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"AuthProvider\"]\nd:I[41932,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"QueryClientProviderWrapper\"]\ne:I[31442,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3"])</script><script>self.__next_f.push([1,"464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"BehavioralProvider\"]\nf:I[78848,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n10:I[36279,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n11:I[6638,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n12:I[78678,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e653"])</script><script>self.__next_f.push([1,"6c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n13:I[67241,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n14:I[40221,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n15:I[49197,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"Analytics\"]\n17:I[61060,[],\"\"]\n7:[\"slug\",\"controlled-vs-uncontrolled-components\",\"d\"]\n9:T4ad,{\"@context\":\"https://schema.org\",\"@type\":\"EducationalOrganization\",\"name\":\"Menttor Labs\",\"url\":\"https://menttor.live\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://menttor.live/favicon_io_light/android-chrome-512x512.png\",\"width\":512,\"height\":512},\"description\":\"Smart learning platform offering free personalized roadmaps across diverse subjects including programming, business, science, languages,"])</script><script>self.__next_f.push([1," and professional skills\",\"sameAs\":[\"https://github.com/mountain-snatcher\"],\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\",\"category\":\"Educational Services\"},\"areaServed\":\"Worldwide\",\"hasOfferCatalog\":{\"@type\":\"OfferCatalog\",\"name\":\"Learning Courses\",\"itemListElement\":[{\"@type\":\"Course\",\"name\":\"Programming \u0026 Web Development\",\"description\":\"Learn Python, JavaScript, React, and full-stack development\"},{\"@type\":\"Course\",\"name\":\"Business \u0026 Professional Skills\",\"description\":\"Master leadership, project management, and business strategy\"},{\"@type\":\"Course\",\"name\":\"Science \u0026 Mathematics\",\"description\":\"Explore physics, chemistry, mathematics, and scientific methods\"},{\"@type\":\"Course\",\"name\":\"Language Learning\",\"description\":\"Master new languages with structured learning paths\"}]}}18:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L3\",null,{\"buildId\":\"build-1758106999520\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"library\",\"controlled-vs-uncontrolled-components\"],\"initialTree\":[\"\",{\"children\":[\"library\",{\"children\":[[\"slug\",\"controlled-vs-uncontrolled-components\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"library\",{\"children\":[[\"slug\",\"controlled-vs-uncontrolled-components\",\"d\"],{\"children\":[\"__PAGE__\",{},[[\"$L4\",\"$L5\",null],null],null]},[[null,[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-white\",\"children\":[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"library\",\"children\",\"$7\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]}]],null],null]},[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"library\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/09dfadb69bdaa005.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/4ea63a6bcb618b80.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"shortcut icon\",\"href\":\"/favicon_io_light/favicon.ico\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon_io_light/favicon.ico\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon_io_light/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon_io_light/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon_io_light/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon_io_light/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",null,{\"rel\":\"apple-touch-icon\",\"href\":\"/favicon_io_light/apple-touch-icon.png\"}],[\"$\",\"link\",null,{\"href\":\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700\u0026display=swap\",\"rel\":\"stylesheet\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"Content-Security-Policy\",\"content\":\"default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://www.google-analytics.com https://cdn.jsdelivr.net https://apis.google.com https://www.google.com https://www.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; media-src 'self' blob:; object-src 'none'; frame-src 'self' https: https://www.google.com; connect-src 'self' https: wss:;\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"X-Content-Type-Options\",\"content\":\"nosniff\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"X-XSS-Protection\",\"content\":\"1; mode=block\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"Referrer-Policy\",\"content\":\"strict-origin-when-cross-origin\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"Permissions-Policy\",\"content\":\"geolocation=(), microphone=(), camera=()\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://www.googletagmanager.com\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$9\"}}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-1YCW8BNWQX\"}],[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\\n              window.dataLayer = window.dataLayer || [];\\n              function gtag(){dataLayer.push(arguments);}\\n              gtag('js', new Date());\\n              gtag('config', 'G-1YCW8BNWQX', {\\n                page_title: document.title,\\n                page_location: window.location.href,\\n                anonymize_ip: true,\\n                allow_google_signals: false\\n              });\\n            \"}}]]}],[\"$\",\"body\",null,{\"className\":\"antialiased bg-white dark:bg-zinc-950\",\"children\":[\"$\",\"$La\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"children\":[[\"$\",\"$Lb\",null,{}],[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"$Lf\",null,{}],[\"$\",\"$L10\",null,{}],[\"$\",\"$L11\",null,{}],[\"$\",\"$L12\",null,{}],[\"$\",\"$L13\",null,{}],[\"$\",\"$L14\",null,{}],[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}],[\"$\",\"$L15\",null,{}]]}]}]}]]}]}]]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L16\"],\"globalErrorComponent\":\"$17\",\"missingSlots\":\"$W18\"}]\n"])</script><script>self.__next_f.push([1,"19:I[85995,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"3954\",\"static/chunks/d3ac728e-4c56e7f41db266b7.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"7648\",\"static/chunks/7648-822bce31da635458.js\",\"8244\",\"static/chunks/8244-2b24e5c38848eaa4.js\",\"7199\",\"static/chunks/7199-193813bcd35f4770.js\",\"2708\",\"static/chunks/2708-3afe8f1a68627e46.js\",\"232\",\"static/chunks/app/library/%5Bslug%5D/page-3b740e052ef424c6.js\"],\"default\"]\n1a:I[72972,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"3954\",\"static/chunks/d3ac728e-4c56e7f41db266b7.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"7648\",\"static/chunks/7648-822bce31da635458.js\",\"8244\",\"static/chunks/8244-2b24e5c38848eaa4.js\",\"7199\",\"static/chunks/7199-193813bcd35f4770.js\",\"2708\",\"static/chunks/2708-3afe8f1a68627e46.js\",\"232\",\"static/chunks/app/library/%5Bslug%5D/page-3b740e052ef424c6.js\"],\"\"]\n1b:\"$Sreact.suspense\"\n1c:I[33270,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"3954\",\"static/chunks/d3ac728e-4c56e7f41db266b7.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"7648\",\"static/chunks/7648-822bce31da635458.js\",\"8244\",\"static/chunks/8244-2b24e5c38848eaa4.js\",\"7199\",\"static/chunks/7199-193813bcd35f4770.js\",\"2708\",\"static/chunks/2708-3afe8f1a68627e46.js\",\"232\",\"static/chunks/app/library/%5Bslug%5D/page-3b740e052ef424c6.js\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"5:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-white\",\"children\":[[\"$\",\"header\",null,{\"className\":\"bg-white border-b border-gray-200 sticky top-0 z-50\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center h-14 sm:h-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center space-x-4 sm:space-x-6\",\"children\":[[\"$\",\"$L19\",null,{\"variant\":\"dark\"}],[\"$\",\"nav\",null,{\"className\":\"hidden md:flex items-center space-x-1\",\"children\":[[\"$\",\"$L1a\",null,{\"href\":\"/\",\"className\":\"flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house w-4 h-4\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"Home\"}]]}],[\"$\",\"$L1a\",null,{\"href\":\"/explore\",\"className\":\"flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-open w-4 h-4\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1akyts\",{\"d\":\"M12 7v14\"}],[\"$\",\"path\",\"ruj8y\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"Explore\"}]]}],[\"$\",\"$L1a\",null,{\"href\":\"/library\",\"className\":\"flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-open w-4 h-4\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1akyts\",{\"d\":\"M12 7v14\"}],[\"$\",\"path\",\"ruj8y\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"Library\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"md:hidden\",\"children\":[\"$\",\"$L1a\",null,{\"href\":\"/library\",\"className\":\"flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors min-h-[44px]\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-left w-4 h-4\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1wnfg3\",{\"d\":\"m15 18-6-6 6-6\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"Library\"}]]}]}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-blue-200\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col space-y-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center space-x-2 text-sm text-blue-600\",\"children\":[[\"$\",\"$L1a\",null,{\"href\":\"/library\",\"className\":\"hover:text-blue-800 font-medium\",\"children\":\"Library\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-left w-4 h-4 rotate-180\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1wnfg3\",{\"d\":\"m15 18-6-6 6-6\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"text-blue-800\",\"children\":\"Controlled vs. Uncontrolled Components\"}]]}],[\"$\",\"h1\",null,{\"className\":\"text-2xl font-bold text-gray-900\",\"children\":\"Controlled vs. Uncontrolled Components\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-700 text-sm max-w-3xl\",\"children\":\"Learn about Controlled vs. Uncontrolled Components as part of Complete React Development with TypeScript\"}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"lg:flex lg:gap-12\",\"children\":[[\"$\",\"aside\",null,{\"className\":\"hidden lg:block w-56 flex-shrink-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"sticky top-24\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-sm font-semibold text-gray-900 mb-3\",\"children\":\"Contents\"}],[\"$\",\"nav\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"a\",\"0\",{\"href\":\"#heading-mastering-react-controlled-vs-uncontrolled-components\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 \",\"children\":\"Mastering React: Controlled vs. Uncontrolled Components\"}],[\"$\",\"a\",\"1\",{\"href\":\"#heading-what-are-form-components-in-react\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"What are Form Components in React?\"}],[\"$\",\"a\",\"2\",{\"href\":\"#heading-controlled-components-the-react-way\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"Controlled Components: The React Way\"}],[\"$\",\"a\",\"3\",{\"href\":\"#heading-uncontrolled-components-dom-managed-values\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"Uncontrolled Components: DOM-Managed Values\"}],[\"$\",\"a\",\"4\",{\"href\":\"#heading-controlled-vs-uncontrolled-a-comparison\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"Controlled vs. Uncontrolled: A Comparison\"}],[\"$\",\"a\",\"5\",{\"href\":\"#heading-typescript-integration\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"TypeScript Integration\"}],[\"$\",\"a\",\"6\",{\"href\":\"#heading-when-to-use-which\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"When to Use Which?\"}],[\"$\",\"a\",\"7\",{\"href\":\"#heading-example-controlled-input\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"Example: Controlled Input\"}],[\"$\",\"a\",\"8\",{\"href\":\"#heading-example-uncontrolled-input\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"Example: Uncontrolled Input\"}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"lg:hidden mb-6\",\"children\":[\"$\",\"details\",null,{\"className\":\"bg-gray-50 rounded-lg p-4\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"font-semibold text-gray-900 cursor-pointer flex items-center justify-between\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Table of Contents\"}],[\"$\",\"svg\",null,{\"className\":\"w-5 h-5 transform transition-transform\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M19 9l-7 7-7-7\"}]}]]}],[\"$\",\"nav\",null,{\"className\":\"mt-3 space-y-2\",\"children\":[[\"$\",\"a\",\"0\",{\"href\":\"#heading-mastering-react-controlled-vs-uncontrolled-components\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors font-medium text-gray-900 hover:bg-gray-100\",\"children\":\"Mastering React: Controlled vs. Uncontrolled Components\"}],[\"$\",\"a\",\"1\",{\"href\":\"#heading-what-are-form-components-in-react\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"What are Form Components in React?\"}],[\"$\",\"a\",\"2\",{\"href\":\"#heading-controlled-components-the-react-way\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"Controlled Components: The React Way\"}],[\"$\",\"a\",\"3\",{\"href\":\"#heading-uncontrolled-components-dom-managed-values\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"Uncontrolled Components: DOM-Managed Values\"}],[\"$\",\"a\",\"4\",{\"href\":\"#heading-controlled-vs-uncontrolled-a-comparison\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"Controlled vs. Uncontrolled: A Comparison\"}],[\"$\",\"a\",\"5\",{\"href\":\"#heading-typescript-integration\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"TypeScript Integration\"}],[\"$\",\"a\",\"6\",{\"href\":\"#heading-when-to-use-which\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"When to Use Which?\"}],[\"$\",\"a\",\"7\",{\"href\":\"#heading-example-controlled-input\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"Example: Controlled Input\"}],[\"$\",\"a\",\"8\",{\"href\":\"#heading-example-uncontrolled-input\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"Example: Uncontrolled Input\"}]]}]]}]}],[\"$\",\"main\",null,{\"className\":\"lg:flex-1 lg:min-w-0 w-full\",\"children\":[[\"$\",\"article\",null,{\"className\":\"prose prose-gray max-w-none lg:max-w-none\",\"children\":[\"$\",\"$1b\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"Loading...\"}],\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-6\",\"children\":[[[\"$\",\"div\",\"0\",{\"children\":[\"$\",\"h1\",null,{\"id\":\"heading-mastering-react-controlled-vs-uncontrolled-components\",\"className\":\"text-3xl font-bold mt-12 mb-6 text-gray-900\",\"children\":\"Mastering React: Controlled vs. Uncontrolled Components\"}]}],[\"$\",\"div\",\"1\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":\"In React, managing form inputs is a fundamental aspect of building interactive user interfaces. Understanding the difference between controlled and uncontrolled components is crucial for writing efficient, predictable, and maintainable React applications, especially when working with TypeScript.\"}]}]}],[\"$\",\"div\",\"2\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-what-are-form-components-in-react\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"What are Form Components in React?\"}]}],[\"$\",\"div\",\"3\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":[\"Form components are the building blocks of user interaction in web applications. In React, these typically include input fields (\",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"\u003cinput\u003e\"}],\"), text areas (\",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"\u003ctextarea\u003e\"}],\"), and select dropdowns (\",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"\u003cselect\u003e\"}],\"). The way React manages the state and value of these elements defines whether they are controlled or uncontrolled.\"]}]}]}],[\"$\",\"div\",\"4\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-controlled-components-the-react-way\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"Controlled Components: The React Way\"}]}],[\"$\",\"div\",\"5\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":\"Controlled components are those where React state is the \\\"single source of truth\\\" for the form input's value. The component's state dictates the input's value, and any changes to the input are handled by updating the component's state.\"}]}]}],[\"$\",\"div\",\"6\",{\"children\":[\"$\",\"div\",null,{\"className\":\"my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg overflow-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"p-6 border-b border-gray-200/50\",\"children\":[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-gray-900 flex items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-12 h-12 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-open w-6 h-6 text-indigo-600\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1akyts\",{\"d\":\"M12 7v14\"}],[\"$\",\"path\",\"ruj8y\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"}],\"$undefined\"]}]}],\"In controlled components, React state manages the input's value.\"]}]}],[\"$\",\"div\",null,{\"className\":\"p-6 prose max-w-none text-gray-700\",\"children\":[\"$undefined\",[\"$\",\"p\",\"p-0\",{\"children\":[\"The input's value is driven by React state, and changes are handled by updating that state via an \",[\"$\",\"code\",\"code-0\",{\"children\":\"onChange\"}],\" handler. This ensures that React always has the most up-to-date value.\"]}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-center py-3\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-down w-6 h-6 text-gray-400\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"qrunsl\",{\"d\":\"m6 9 6 6 6-6\"}],\"$undefined\"]}]}],[\"$\",\"div\",null,{\"className\":\"px-6 pb-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"p-4 bg-gray-50/50 rounded-xl prose max-w-none text-gray-600\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":[\"To create a controlled component, you typically use the \",[\"$\",\"code\",\"code-0\",{\"children\":\"useState\"}],\" hook to manage the input's value. The input element's \",[\"$\",\"code\",\"code-1\",{\"children\":\"value\"}],\" prop is bound to this state variable, and an \",[\"$\",\"code\",\"code-2\",{\"children\":\"onChange\"}],\" event handler is attached to update the state whenever the user types. This pattern gives you complete control over the input's value and behavior, allowing for real-time validation, formatting, and conditional rendering based on the input.\"]}]}]}]]}]}],[\"$\",\"div\",\"7\",{\"children\":[\"$\",\"div\",null,{\"className\":\"my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start bg-indigo-50 px-4 py-3 rounded-xl mb-4\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-brain-circuit h-6 w-6 mr-3 text-indigo-600 mt-1 flex-shrink-0\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"l5xja\",{\"d\":\"M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z\"}],[\"$\",\"path\",\"10igwf\",{\"d\":\"M9 13a4.5 4.5 0 0 0 3-4\"}],[\"$\",\"path\",\"105sqy\",{\"d\":\"M6.003 5.125A3 3 0 0 0 6.401 6.5\"}],[\"$\",\"path\",\"ql3yin\",{\"d\":\"M3.477 10.896a4 4 0 0 1 .585-.396\"}],[\"$\",\"path\",\"2e4loj\",{\"d\":\"M6 18a4 4 0 0 1-1.967-.516\"}],[\"$\",\"path\",\"1ku699\",{\"d\":\"M12 13h4\"}],[\"$\",\"path\",\"105ag5\",{\"d\":\"M12 18h6a2 2 0 0 1 2 2v1\"}],[\"$\",\"path\",\"1lhi5i\",{\"d\":\"M12 8h8\"}],[\"$\",\"path\",\"u6izg6\",{\"d\":\"M16 8V5a2 2 0 0 1 2-2\"}],[\"$\",\"circle\",\"ry7gng\",{\"cx\":\"16\",\"cy\":\"13\",\"r\":\".5\"}],[\"$\",\"circle\",\"1aiba7\",{\"cx\":\"18\",\"cy\":\"3\",\"r\":\".5\"}],[\"$\",\"circle\",\"yhc1fs\",{\"cx\":\"20\",\"cy\":\"21\",\"r\":\".5\"}],[\"$\",\"circle\",\"1e43v0\",{\"cx\":\"20\",\"cy\":\"8\",\"r\":\".5\"}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"text-xl font-medium text-indigo-900 prose prose-xl max-w-none\",\"children\":[\"$\",\"span\",null,{\"children\":\"What is the primary characteristic of a controlled component in React?\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pt-4 pb-2 text-gray-700 prose max-w-none bg-gray-50/50 rounded-xl\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":\"React state is the single source of truth for the input's value.\"}]}]]}]}],[\"$\",\"div\",\"8\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-uncontrolled-components-dom-managed-values\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"Uncontrolled Components: DOM-Managed Values\"}]}],[\"$\",\"div\",\"9\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":\"Uncontrolled components are similar to traditional HTML form elements. Instead of React state managing the value, the DOM itself stores the form input's value. You can access the DOM value directly when needed, typically using a ref.\"}]}]}],[\"$\",\"div\",\"10\",{\"children\":[\"$\",\"div\",null,{\"className\":\"my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg overflow-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"p-6 border-b border-gray-200/50\",\"children\":[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-gray-900 flex items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-12 h-12 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-open w-6 h-6 text-indigo-600\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1akyts\",{\"d\":\"M12 7v14\"}],[\"$\",\"path\",\"ruj8y\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"}],\"$undefined\"]}]}],\"In uncontrolled components, the DOM manages the input's value.\"]}]}],[\"$\",\"div\",null,{\"className\":\"p-6 prose max-w-none text-gray-700\",\"children\":[\"$undefined\",[\"$\",\"p\",\"p-0\",{\"children\":\"The input's value is managed by the DOM. You use refs to access the current value when needed, often on form submission.\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-center py-3\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-down w-6 h-6 text-gray-400\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"qrunsl\",{\"d\":\"m6 9 6 6 6-6\"}],\"$undefined\"]}]}],[\"$\",\"div\",null,{\"className\":\"px-6 pb-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"p-4 bg-gray-50/50 rounded-xl prose max-w-none text-gray-600\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":[\"For uncontrolled components, you use \",[\"$\",\"code\",\"code-0\",{\"children\":\"useRef\"}],\" to create a mutable reference that you attach to the DOM element. The \",[\"$\",\"code\",\"code-1\",{\"children\":\"ref\"}],\" object will hold the DOM node, and you can access its current value via \",[\"$\",\"code\",\"code-2\",{\"children\":\"ref.current.value\"}],\". This approach is simpler for basic forms where you only need the value upon submission, as it avoids the overhead of managing state for every keystroke.\"]}]}]}]]}]}],[\"$\",\"div\",\"11\",{\"children\":[\"$\",\"div\",null,{\"className\":\"my-6 p-6 rounded-2xl border-l-4 shadow-lg bg-blue-50 border-blue-400 text-blue-800\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-git-compare-arrows w-6 h-6 text-blue-600\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"circle\",\"1qnov2\",{\"cx\":\"5\",\"cy\":\"6\",\"r\":\"3\"}],[\"$\",\"path\",\"1yj91y\",{\"d\":\"M12 6h5a2 2 0 0 1 2 2v7\"}],[\"$\",\"path\",\"1lwv8l\",{\"d\":\"m15 9-3-3 3-3\"}],[\"$\",\"circle\",\"1qljk2\",{\"cx\":\"19\",\"cy\":\"18\",\"r\":\"3\"}],[\"$\",\"path\",\"16sdep\",{\"d\":\"M12 18H7a2 2 0 0 1-2-2V9\"}],[\"$\",\"path\",\"1m3kbl\",{\"d\":\"m9 15 3 3-3 3\"}],\"$undefined\"]}]}],[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-current\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":\"Think of controlled components like a thermostat where the desired temperature (state) directly controls the heating/cooling system (input). Uncontrolled components are like a manual light switch where you flip it, and the light turns on/off without React actively tracking its state.\"}]}]]}]}]}],[\"$\",\"div\",\"12\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-controlled-vs-uncontrolled-a-comparison\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"Controlled vs. Uncontrolled: A Comparison\"}]}],[\"$\",\"div\",\"13\",{\"children\":[\"$\",\"div\",null,{\"className\":\"overflow-x-auto my-8 border border-gray-200\",\"children\":[\"$\",\"table\",null,{\"className\":\"w-full text-sm text-left text-gray-700\",\"children\":[[\"$\",\"thead\",null,{\"className\":\"text-gray-800 bg-gray-50 border-b border-gray-200\",\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",\"0\",{\"scope\":\"col\",\"className\":\"px-6 py-4 font-semibold\",\"children\":[\"$\",\"span\",null,{\"children\":\"Feature\"}]}],[\"$\",\"th\",\"1\",{\"scope\":\"col\",\"className\":\"px-6 py-4 font-semibold\",\"children\":[\"$\",\"span\",null,{\"children\":\"Controlled Components\"}]}],[\"$\",\"th\",\"2\",{\"scope\":\"col\",\"className\":\"px-6 py-4 font-semibold\",\"children\":[\"$\",\"span\",null,{\"children\":\"Uncontrolled Components\"}]}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",\"0\",{\"className\":\"bg-white border-b border-gray-100 last:border-b-0\",\"children\":[[\"$\",\"td\",\"0\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"State Management\"}]}],[\"$\",\"td\",\"1\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":[\"Managed by React state (\",[\"$\",\"code\",\"code-0\",{\"children\":\"useState\"}],\")\"]}]}],[\"$\",\"td\",\"2\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Managed by the DOM\"}]}]]}],[\"$\",\"tr\",\"1\",{\"className\":\"bg-white border-b border-gray-100 last:border-b-0\",\"children\":[[\"$\",\"td\",\"0\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Value Source\"}]}],[\"$\",\"td\",\"1\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"React state\"}]}],[\"$\",\"td\",\"2\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":[\"DOM element (\",[\"$\",\"code\",\"code-0\",{\"children\":\"ref.current.value\"}],\")\"]}]}]]}],[\"$\",\"tr\",\"2\",{\"className\":\"bg-white border-b border-gray-100 last:border-b-0\",\"children\":[[\"$\",\"td\",\"0\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Data Flow\"}]}],[\"$\",\"td\",\"1\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Unidirectional (state -\u003e input)\"}]}],[\"$\",\"td\",\"2\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Imperative (access via ref)\"}]}]]}],[\"$\",\"tr\",\"3\",{\"className\":\"bg-white border-b border-gray-100 last:border-b-0\",\"children\":[[\"$\",\"td\",\"0\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Use Cases\"}]}],[\"$\",\"td\",\"1\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Real-time validation, dynamic updates, complex forms\"}]}],[\"$\",\"td\",\"2\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Simple forms, quick data retrieval on submit\"}]}]]}],[\"$\",\"tr\",\"4\",{\"className\":\"bg-white border-b border-gray-100 last:border-b-0\",\"children\":[[\"$\",\"td\",\"0\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Complexity\"}]}],[\"$\",\"td\",\"1\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Slightly more verbose due to state management\"}]}],[\"$\",\"td\",\"2\",{\"className\":\"px-6 py-4\",\"children\":[\"$\",\"span\",null,{\"children\":\"Simpler for basic cases\"}]}]]}]]}]]}]}]}],[\"$\",\"div\",\"14\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-typescript-integration\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"TypeScript Integration\"}]}],[\"$\",\"div\",\"15\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":[\"When using TypeScript with React, you'll want to properly type your state and refs. For controlled components, this means typing your \",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"useState\"}],\" hook (e.g., \",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"useState\u003cstring\u003e('')\"}],\"). For uncontrolled components, you'll use \",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"useRef\u003cHTMLInputElement\u003e(null)\"}],\" or a similar type for the specific input element you're referencing.\"]}]}]}],[\"$\",\"div\",\"16\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-when-to-use-which\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"When to Use Which?\"}]}],[\"$\",\"div\",\"17\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[[\"$\",\"p\",\"p-0\",{\"children\":[\"Choose \",[\"$\",\"strong\",\"strong-0\",{\"children\":\"controlled components\"}],\" when you need to:\"]}],\"\\n\",[\"$\",\"ul\",\"ul-0\",{\"children\":[\"\\n\",[\"$\",\"li\",\"li-0\",{\"children\":\"Validate input as the user types.\"}],\"\\n\",[\"$\",\"li\",\"li-1\",{\"children\":\"Conditionally enable/disable buttons or show error messages.\"}],\"\\n\",[\"$\",\"li\",\"li-2\",{\"children\":\"Format input values in real-time (e.g., currency, phone numbers).\"}],\"\\n\",[\"$\",\"li\",\"li-3\",{\"children\":\"Have the most up-to-date value of the input available at all times.\"}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",\"p-1\",{\"children\":[\"Choose \",[\"$\",\"strong\",\"strong-0\",{\"children\":\"uncontrolled components\"}],\" when you need to:\"]}],\"\\n\",[\"$\",\"ul\",\"ul-1\",{\"children\":[\"\\n\",[\"$\",\"li\",\"li-0\",{\"children\":\"Quickly get the value of an input when a form is submitted.\"}],\"\\n\",[\"$\",\"li\",\"li-1\",{\"children\":\"Integrate with third-party form libraries that rely on DOM values.\"}],\"\\n\",[\"$\",\"li\",\"li-2\",{\"children\":\"Avoid the overhead of state management for simple inputs that don't require immediate updates.\"}],\"\\n\"]}]]}]}],[\"$\",\"div\",\"18\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-example-controlled-input\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"Example: Controlled Input\"}]}],[\"$\",\"div\",\"19\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[[\"$\",\"p\",\"p-0\",{\"children\":[\"Here's a basic example of a controlled input using \",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"useState\"}],\" and TypeScript:\"]}],\"\\n\",[\"$\",\"$L1c\",null,{\"language\":\"typescript\",\"children\":\"import React, { useState } from 'react';\\n\\nfunction ControlledInput() {\\n  const [value, setValue] = useState\u003cstring\u003e('');\\n\\n  const handleChange = (event: React.ChangeEvent\u003cHTMLInputElement\u003e) =\u003e {\\n    setValue(event.target.value);\\n  };\\n\\n  return (\\n    \u003cinput type=\\\"text\\\" value={value} onChange={handleChange} /\u003e\\n  );\\n}\\n\\nexport default ControlledInput;\"}]]}]}],[\"$\",\"div\",\"20\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-example-uncontrolled-input\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"Example: Uncontrolled Input\"}]}],[\"$\",\"div\",\"21\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[[\"$\",\"p\",\"p-0\",{\"children\":[\"And here's an example of an uncontrolled input using \",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"useRef\"}],\" and TypeScript:\"]}],\"\\n\",[\"$\",\"$L1c\",null,{\"language\":\"typescript\",\"children\":\"import React, { useRef } from 'react';\\n\\nfunction UncontrolledInput() {\\n  const inputRef = useRef\u003cHTMLInputElement\u003e(null);\\n\\n  const handleSubmit = () =\u003e {\\n    if (inputRef.current) {\\n      alert(`Input value: ${inputRef.current.value}`);\\n    }\\n  };\\n\\n  return (\\n    \u003cdiv\u003e\\n      \u003cinput type=\\\"text\\\" ref={inputRef} /\u003e\\n      \u003cbutton onClick={handleSubmit}\u003eGet Value\u003c/button\u003e\\n    \u003c/div\u003e\\n  );\\n}\\n\\nexport default UncontrolledInput;\"}]]}]}]],[\"$\",\"div\",null,{\"className\":\"mt-12 pt-8 border-t border-gray-200\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl font-bold text-gray-900 mb-6\",\"children\":\"Learning Resources\"}],[\"$\",\"div\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"div\",\"0\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"Forms in React – React\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"documentation\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"The official React documentation provides a clear explanation of how to control form inputs using state variables, covering the core concepts of controlled components.\"}]]}],[\"$\",\"div\",\"1\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://react.dev/reference/react/useRef\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"React Hooks: useRef – React\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"documentation\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"Official documentation for the `useRef` hook, essential for understanding how to manage refs and access DOM elements in uncontrolled components.\"}]]}],[\"$\",\"div\",\"2\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.freecodecamp.org/news/controlled-vs-uncontrolled-components-in-react/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"React Forms: Controlled vs Uncontrolled Components Explained\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"blog\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"A comprehensive blog post from freeCodeCamp that breaks down the differences, use cases, and provides practical examples of both controlled and uncontrolled components.\"}]]}],[\"$\",\"div\",\"3\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.robinwieruch.de/react-typescript-forms/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"React TypeScript Tutorial: Forms\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"blog\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"This tutorial focuses on building forms in React with TypeScript, offering practical guidance on typing state and event handlers for controlled components.\"}]]}],[\"$\",\"div\",\"4\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.digitalocean.com/community/tutorials/react-form-handling-controlled-vs-uncontrolled-components\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"React Form Handling: Controlled vs. Uncontrolled Components\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"tutorial\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"A step-by-step tutorial that explains the concepts of controlled and uncontrolled components with code examples, helping you choose the right approach.\"}]]}],[\"$\",\"div\",\"5\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.simplilearn.com/tutorials/reactjs-tutorial/controlled-vs-uncontrolled-components-in-reactjs\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"Understanding React's Controlled and Uncontrolled Components\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"blog\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"This article provides a clear comparison and explanation of when to use controlled versus uncontrolled components in React applications.\"}]]}],[\"$\",\"div\",\"6\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://react.dev/reference/react/useState\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"React Hooks: useState – React\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"documentation\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"The official documentation for the `useState` hook, which is fundamental for implementing controlled components in React.\"}]]}],[\"$\",\"div\",\"7\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.youtube.com/watch?v=o9z0_0b2_6A\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"Mastering React Forms with TypeScript\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"video\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"A video tutorial that delves into form management in React using TypeScript, likely covering controlled and uncontrolled patterns.\"}]]}],[\"$\",\"div\",\"8\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.youtube.com/watch?v=h6j74_40_yM\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"React Controlled Components Explained\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"video\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"A focused video explanation of controlled components in React, demonstrating their implementation and benefits.\"}]]}],[\"$\",\"div\",\"9\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.youtube.com/watch?v=0l203f2i3jM\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"React Uncontrolled Components Explained\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"video\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"A video tutorial specifically explaining the concept and usage of uncontrolled components in React applications.\"}]]}]]}]]}]]}]}]}],[\"$\",\"footer\",null,{\"className\":\"mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-700\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col sm:flex-row sm:justify-between items-start sm:items-center text-sm text-gray-500 dark:text-gray-400 space-y-3 sm:space-y-0\",\"children\":[[\"$\",\"div\",null,{\"children\":[\"$\",\"p\",null,{\"children\":[\"Last updated: \",\"9/12/2025\"]}]}],[\"$\",\"div\",null,{\"children\":[\"$\",\"p\",null,{\"children\":\"Part of Menttor Library\"}]}]]}]}]]}]]}]}]]}]\n"])</script><script>self.__next_f.push([1,"16:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Controlled vs. Uncontrolled Components - Menttor Library | Menttor - Smart Learning Platform\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Learn about Controlled vs. Uncontrolled Components as part of Complete React Development with TypeScript\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"MenttorLabs\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"Controlled vs. Uncontrolled Components, Web Development - Advanced React Concepts and Hooks, learning, education, menttor\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Menttor Labs\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Menttor Labs\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"11\",{\"rel\":\"canonical\",\"href\":\"https://menttor.live\"}],[\"$\",\"meta\",\"12\",{\"name\":\"format-detection\",\"content\":\"telephone=no, address=no, email=no\"}],[\"$\",\"meta\",\"13\",{\"name\":\"google-site-verification\",\"content\":\"bwivA76TNvzcdQVasoFFwoZZfGA1PycT2g1CJTAW8Gw\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:title\",\"content\":\"Controlled vs. Uncontrolled Components - Menttor Library\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:description\",\"content\":\"Learn about Controlled vs. Uncontrolled Components as part of Complete React Development with TypeScript\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:url\",\"content\":\"https://menttor.live/library/controlled-vs-uncontrolled-components\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:site_name\",\"content\":\"Menttor\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image\",\"content\":\"https://menttor.live/og-image.png\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"Controlled vs. Uncontrolled Components - Menttor Library\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"Learn about Controlled vs. Uncontrolled Components as part of Complete React Development with TypeScript\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://menttor.live/og-image.png\"}],[\"$\",\"link\",\"24\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon_io_light/favicon.ico\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/favicon_io_light/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"27\",{\"rel\":\"icon\",\"href\":\"/favicon_io_light/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"link\",\"28\",{\"rel\":\"icon\",\"href\":\"/favicon_io_light/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"29\",{\"rel\":\"icon\",\"href\":\"/favicon_io_light/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"30\",{\"rel\":\"apple-touch-icon\",\"href\":\"/favicon_io_light/apple-touch-icon.png\"}]]\n"])</script><script>self.__next_f.push([1,"4:null\n"])</script></body></html>