Universally Controlled Components

[kof]

Since react hooks more patterns emerge, one of these I called Universally Controlled Components. Originally tweeted by @gaearon https://twitter.com/oleg008/status/1065386273177776129

The idea is that we can build components in a way that allows us to control them from outside without using internal state as well as using it depending on props, without much work.

const [value, setValue] = useControlledState(props.value, props.onChange);

[props.value, props.onChange] if onChange is specified, local state otherwise.

A good use case for it could be styleguides and tests, where you might want to use internal state, but then use it in the application with a controlled state from the outside.