Scribd
Upload
17 views8 pages

Controlled vs. Uncontrolled Components

Uploaded by

Hasnain Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views8 pages

Controlled vs. Uncontrolled Components

Uploaded by

Hasnain Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Handling Forms in

React:
Controlled vs. Uncontrolled
Components

Vladyslav Demirov
@vladyslav-demirov
What are Controlled Components?
• In controlled components, form elements
(like inputs, textareas, etc.) are controlled by
React state.
• The value of the form elements is bound to
the state, and any change in the input updates
the state via event handlers like onChange.

Vladyslav Demirov
What are Uncontrolled Components?
• In uncontrolled components, form elements
store their own state in the DOM, and React
does not manage it directly.
• You access the values of form elements using
refs rather than React state.

Vladyslav Demirov
Key Differences Between Controlled
& Uncontrolled
Controlled Components:
• React manages the form’s state directly.
• Values are updated via state changes.
• Easier to enforce validation and logic through
React.

Uncontrolled Components:
• Form data is handled by the DOM, not React.
• Values are accessed through refs.
• Less boilerplate code but harder to manage
form logic.

Vladyslav Demirov
When Should You Use?
Use controlled components when:
• You need real-time validation (e.g., showing
error messages as the user types).
• The form state affects other parts of the UI
(e.g., dynamic inputs or conditional rendering).
• You want full control over the form behavior.
Advantages:
• State and form data are always synchronized.
• Easier to integrate complex form logic and
validation.

Use uncontrolled components when:


• You only need the form data at the point of
submission.
• You have a simple form with limited user
interaction or validation needs.
• Performance is a concern, and you want to
reduce state updates.
Advantages:
• Less boilerplate and simpler implementation.
• Reduces the number of re-renders since state
is not updated on each input change.

Vladyslav Demirov
Combining Controlled and
Uncontrolled Components
• Sometimes, combining both approaches is
useful. For example, you can use an
uncontrolled component for a large form but
control key fields with state when needed.

Vladyslav Demirov
Summary:
• Controlled Components: Great for real-time
updates, validation, and full control over inputs.

• Uncontrolled Components: Ideal for simpler


forms where performance is key, and full
control isn’t necessary.

• In many cases, a combination of both might


be the best solution!

Vladyslav Demirov
HAPPY
CODING

Vladyslav Demirov
@vladyslav-demirov

You might also like