Member-only story
Understanding Controlled and Uncontrolled Components in Frontend Development: A Practical Guide with Examples
When discussing frontend development, you may come across the terminologies “controlled” and “uncontrolled” used in the context of components. It’s essential to understand these terms to make informed decisions about how you want your input or form values to be managed in the user interface, especially when working with libraries such as React.
In this blog post, I will explain what each of these terms means, and demonstrate their similarities and differences using code and small demos. While the example I use is contrived, it will help you understand the concepts better than if I had presented long, complex lines of code. In this example I ask you to imagine that your product manager has requested that you display some text when the user selects an option in the select box. Simple enough, but to accomplish this, would you use an “uncontrolled” or “controlled” component?
All the code used in this blog post is publicly available on GitHub here.
Uncontrolled Components using plain HTML
In simple terms, an uncontrolled UI element or component follows an imperative approach to handling the UI. This means that you have to explicitly define what should happen and…
