Creating React Components that can be both Controlled and Uncontrolled

In my opinion it’s really nice when low-level React components such as Input and Dropdown allow me to use them in both a controlled and uncontrolled manner.

I always found this pattern a bit tricky to implement though because it requires me to decide when a component should be considered controlled and how exactly it should behave if e.g. it gets a defaultValue prop (not allowed for controlled components) and an onChange handler (usually only used with controlled components) at the same time.

So I coded up a little demo to see how the built-in React <input /> behaves with various sets of props.

And I came up with a nice little pattern that can be used to implement optionally controlled React components in a way that emulates the behaviour of built-in components like <input /> and <textarea />: Read the blog post

How do you guys go about controlled/uncontrolled components in your code?