Esta no es una pregunta que se pueda responder con un fragmento de código. Explicaré cómo abordaría este problema.

Pasos justo después del evento de impresión (al hacer clic en el botón o automatizado...)

1. Obtendría la altura actual de cada componente (como mencionó de 4 a 12 componentes)

 const element = document.getElementById('element'); element.offsetHeight // height

2. Crearía un componente de marcador de posición (div), que se usaría para llenar el espacio verticalmente entre los componentes que se imprimirán.

 const Placeholder = ({height}) => ( <div style={{height: `${height}px` }}> </div> )

3. Comenzaría a hacer un bucle de todos los componentes hasta que puedan caber en 900px. Cuando el fragmento alcance los 900 px, llenaría el espacio con un componente de marcador de posición. Eso obligaría al resto de los componentes a pasar a la página siguiente. Por ejemplo, digamos:

 Component 1 is 300px Component 2 is 300px Component 3 is 700px Component 4 is 300px

 loop { // first page <Component1 /> <Component2 /> <Placeholder height={300} /> // second page <Component3 /> <Placeholder height={200} /> <Component4 /> <Placeholder height={600} /> }