React-stillness-component

  function App() {
    const [show, setShow] = useState(true);

    return (
      <div>
        <button onClick={() => setShow(show => !show)}>Toggle</button>
        <Offscreen visible={show}>
          <Count />
        </Offscreen>
      </div>
    );
  }

  function Count() {
    const [count, setCount] = useState(0);
    const collected = useStillness({
      mounted: (contract) => {
        return 'mounted';
      },
      unmounted: (contract) => {
        return 'unmounted';
      },
      collect: (contract) => {
        return {
          isStillness: contract.isStillness(),
          stillnessId: contract.getStillnessId(),
        };
      },
    });  
  
    return (
      <div className="count">
        stillness:{collected.isStillness.toString()}
        <p>class count: {count}</p>
        <button
          onClick={() => {
            setCount((count) => count + 1);
          }}
        >
          Add
        </button>
      </div>
    );
  }

  render(
    <StillnessProvider>
      <App />
    </StillnessProvider>
  )