State management is an important factor when developing applications that scale, that's why react existed in the first place.
Normally, you would control the state of a component from within its internal state. But there are a few instances where you want to be able to override the internal state of a component and control the state from the parent component such as updating content when something happens outside the component. This is easily achieved with the controlled props pattern. For example, you have a dropdown that keeps track of its own open state internally. But we want the parent component to be able to update the state of the component based on some other logic.
This article walks you through a pattern to create Controlled React Components with Control Props.
Controlled Components
Form Elements like input, textarea, and select that takes input from the user, by default, maintain state (values) within the DOM layer. Components that delegate their state to the browser are known as uncontrolled components.
But more often you want to be in charge of these values and probably control the presentation. This arises the need for controlled components. Controlled components instead keep that state inside of React either in the component rendering the input, or a parent component somewhere in the Virtual DOM.
Passing in value and an onChange handler to the form element changes it from an uncontrolled component to a controlled one since you now manage the state within the react app
React documentation covers controlled components perfectly fine, so there's no need to go over it here.
Applying controlled components to manage UI state
You have seen how you can delegate form element state to the browser or take charge of it within your react application. Similarly, people want to manage the internal state of our components from the parent components. We can apply the concept of controlled components, this is known as the controlled props pattern.
The concept of controlled props is basically the same as controlled form elements in React that you’ve probably come across many times.
I would be presenting the code examples in it's barebones so you get to focus on just what you need
The uncontrolled props pattern
The component does not need to be externally controlled and the state can be local to the component. Basically, an uncontrolled component manages its own state internally.
To create an uncontrolled component, instantiate your component with the default state, it will begin with the value of that property and will manage its own local state over the lifetime of the component (making calls to setState() in response to user interaction).
The controlled props pattern
This pattern enables you to control a component UI state from the parent component.
This is done by handling the callback and managing the state within the parent component. The state and the method for updating the state are passed as props to the component. The component then becomes a controlled component.
To create a controlled component, you declare the state and function to update it in the parent component, these are then passed into the controlled component as props. The component is initialized with the prop state and when the state needs to be updated, the callback function prop for updating the state is triggered. After that update propagates, the containing component should end up re-rendering and sending a new state prop to the controlled component.
Control state both ways
You can make your component more flexible by letting the component use its internal state and also be overridden by a parent's state!
The component can then be either a controlled component when you declare your state value and the function to update it in the parent component then pass it to the component. Or an uncontrolled component these props are not passed in, allowing your component to manage its state internally. You just think of this as a switch mechanism between both patterns.
Conclusion
You have learned a pattern that allows you to bring the concept of controlled form components to manage state UI known as controlled props pattern in contrast to the uncontrolled props pattern which is the regular way of managing state internally and how to use the two patterns together for even more superpowers.
This pattern gives users of your component a whole lot of control over how your component interacts with the user. This is just its basic usage, there are a lot more ways to implement the control props pattern.
Thank you for reading, I hope you learned as much as I did.
Top comments (0)