unnest react containers

unnest react containers.js

import React from 'react';
import ReactDOM from 'react-dom';

const useContainer = (props, container) => {
  return container(props);
};
const Counter = ({ counter, up }) => {
  const r = React.useRef(0);
  r.current++;
  return (
    <button onClick={up}>
      {counter} rendred: {r.current}
    </button>
  );
};
const Half = ({ counter, up }) => {
  const props = React.useMemo(
    () => ({
      counter: counter / 2,
      up,
    }),
    [counter, up]
  );
  return useContainer(props, Counter);
};
const PlusOne = ({ counter, up }) => {
  const props = React.useMemo(
    () => ({
      counter: counter + 1,
      up,
    }),
    [counter, up]
  );
  return useContainer(props, Half);
};
const Double = ({ counter, up }) => {
  const props = React.useMemo(
    () => ({
      counter: counter * 2,
      up,
    }),
    [counter, up]
  );
  return useContainer(props, PlusOne);
};
const CounterContainer = (props) =>
  useContainer(props, Double);
function App() {
  const [counter, setCounter] = React.useState(0);
  const up = React.useCallback(
    () => setCounter((counter) => counter + 1),
    []
  );
  return <CounterContainer up={up} counter={counter} />;
}
ReactDOM.render(<App />, document.getElementById('root'));