Controlled vs Uncontrolled Components and Stateless vs Stateful Components in React

Back to: ReactJS Tutorials

Controlled vs Uncontrolled Components and Stateless vs Stateful Components in React:

In this article, I am going to discuss Controlled vs Uncontrolled Components and Stateless vs Stateful Components in React with Examples. Please read our previous article where we discussed the Derived Computed State in React.

Controlled vs Uncontrolled Components and Stateless vs Stateful Components in React:

In the last few articles, we implemented two-way binding and we did something which has an official term in React. We created a controlled component and it’s not the first time we did that.

What is a Controlled Component in React:

Basically, whenever you use two-way binding, you are controlling a component but here we’re controlling our own custom component. Now, what does this mean? It means that a value that is used in the component like the value selected in the dropdown inExpenseFilter.js,

is passed on to a parent component, through props

and is received from the parent component.

Both the currently set value as well as the function, which in the end, handles the selected value, is not part of ExpensesFilter. ExpensesFilter is just a component that presents the UI, that presents the dropdown, and then attaches a couple of listeners or props. But the real logic resides in the parent component and that turns ExpensesFilter into something which is called a controlled component.

Now, technically there is no difference. ExpensesFilter is still a regular component as you learned it. It’s just a special term that basically means what we just explained. That both the value, as well as changes to the value, are not handled in the component itself but in a parent component. The Expenses component controls the ExpensesFilter component. And that’s just a term which you should be aware of.

Another term or another concept you should be aware of because you might hear it from time to time is about presentational v/s stateful components or stateless v/s stateful components, or dumb v/s smart components. There are a lot of terms for that, but what do they mean? It simply means that basically all React apps you’re building, you will have a couple of components that manage some state like the Expenses component which manages the filter state, or the ExpenseForm component which manages the input state. And then you will have other components which don’t manage any state, like ExpenseItem which don’t manage any state, if we remove some code, ExpenseItem will look like this,

This is a stateless component, also called a presentational or dumb component because it doesn’t have any internal state. It’s just there to output some data. And in most react applications, you will have more presentational and dumb components than smart or stateful components. So, even though dumb might sound negative and it might sound like stateful components are better, that’s not the case. These are just terms and typically you end up with fewer stateful components than with stateless components. Because you want to split up your application into small reusable pieces and most pieces, most components will only focus on outputting something. On having some JSX code, maybe some transformation logic, and maybe some CSS code, but it’s only a couple of components that typically manage state.

And then the state is spread out and distributed through props in the end, like here in the Expenses component where we managed the filter state and then we pass the filtered year in ExpensesFilter through props. This is a standard pattern that you’ll see a lot. You manage state in a couple of components, and then you might pass that around to other components.

And that’s basically it for this module. In this module, you’ve learned very important concepts of React. So make sure it’s clear to you, make sure you understand what state is and how you can handle events, and how you can pass data from a child to a parent component.

Now, we’re prepared to dive into the next core section and basically conclude the hard core of React basics. Again, the next section will be a very important section because it will be about Lists and Conditional Content.

In the next article, I am going to discuss Controlled vs Uncontrolled Components and Stateless vs Stateful Components in React with Examples. Here, in this article, I try to explain Controlled vs Uncontrolled Components and Stateless vs Stateful Components in React with Examples. I hope you enjoy this Controlled vs Uncontrolled Components and Stateless vs Stateful Components in React article.