feat(react): add useControllableState

[joshblack]

We have several components that can be controlled or uncontrolled and have built up a couple of patterns for implementing this throughout the codebase. This PR introduces a custom useControllableState hook to start the discussion around what it would look like to standardize this pattern across the codebase.

For controlled versus uncontrolled components, a basic example of this is an <input>. This primitive can be uncontrolled or controlled:

function Uncontrolled() {
  return <input type="text" />
}

function Controlled() {
  const [value, setValue] = useState('');

  function onChange(event) {
    setValue(event.target.value);
  }

  return <input type="text" onChange={onChange} value={value} />;
}

One important note with this: switching from controlled to uncontrolled, or vice versa, is not supported.

To replicate this behavior for components we build, we would use useControllableState:

function TextInput({
  onChange: controlledOnChange,
  value: controlledValue,
}) {
  // Provide the controlled value and onChange along with the default value
  const [value, setValue] = useControllableState(controlledValue, controlledOnChange, '');

  function onChange(event) {
    setValue(event.target.value);
  }

  return (
    <input
      type="text"
      onChange={onChange}
      value={value}
    />
  );
}

We can then use the same component, TextInput, for both controlled and uncontrolled scenarios:

function Uncontrolled() {
  return <TextInput />;
}

function Controlled() {
  const [value, setValue] = useState('');
  
  function onChange(value) {
    setValue(value);
  }

  return <TextInput onChange={onChange} value={value} />;
}

Note: this was heavily inspired by a similar hook in [Chakra UI](https://chakra-ui.com/docs/hooks/use-controllable

Changelog

New

• Add useControllableState hook for components that can be controlled or uncontrolled

Changed

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 78984d6

https://deploy-preview-7980--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 78984d6

https://deploy-preview-7980--carbon-components-react.netlify.app

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 522af92

https://deploy-preview-7980--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 522af92

https://deploy-preview-7980--carbon-components-react.netlify.app

[dakahn]

Thanks for walking me through this!