// sourse component
const Foo = ({ count, onCountChange }) =>
  console.log(count, onCountChange) || (
    <div onClick={() => onCountChange(count + 1)}> {count}</div>
  );
 
// with auto-controller HOC
import AutoController from "react-component-auto-controller";
const NewFoo = AutoController({
  value: "count",
  onChange: "onCountChange",
  defaultValue: "defaultCount"
})(Foo);
 
// as controlled:
function Usage1() {
  const [count, setCount] = React.useState(0);
  return <NewFoo count={count} onCountChange={v => setCount(v)} />;
}
 
// as uncontrolled:
const Usage2 = () => {
  return <NewFoo defaultCount={0} />;
};