[@react.component]
let make = () => {
  let (a, setA) = React.useState(() => "Hello ");
  let (b, setB) = React.useState(() => "World !");

  // This hook is called only once when the component is added to the DOM,
  // and functions like componentDidMount
  React.useEffect0(() => {
    // Prints Hello and World !
    Js.log2(a, b);
    // This is an option(function). It is called when the component is unmounted.
    Some(_ => Js.log2(a, b));
  });

  // This hook is called everytime either a or b is set.
  // This includes their initialization !
  React.useEffect2(
    () => {
      Js.log2(a, b);
      None;
    },
    (a, b),
  );

  <>
    <input
      value=a
      onChange={e => {
        let value = ReactEvent.Form.target(e)##value;
        // When the input value changes, we set a state value
        // The corresponding useEffect hook is triggered and the component is re-rendered
        setA(_ => value);
      }}
    />
    <input
      value=b
      onChange={e => {
        let value = ReactEvent.Form.target(e)##value;
        setB(_ => value);
      }}
    />
  </>;
};