Quiero comparar la representación de un componente de React para poder realizar mejoras incrementales.

Se me ocurrió este prototipo para usar con reaccionar v18:

 import { useEffect, } from 'react'; import { createRoot, } from 'react-dom'; import { JsonView, } from '../components/JsonView'; const render = (root) => { return new Promise((resolve) => { root.render(<div ref={() => { resolve(undefined); }} > <JsonView activePath={null} entries={{foo: 'bar'}} expanded highlights={[]} onActivePathChange={() => {}} /> </div>); }); }; const TestPage = () => { useEffect(() => { const sandbox = document.createElement('div'); document.body.appendChild(sandbox); const root = createRoot(sandbox); (async () => { const startTime = Date.now(); const runTime = 1_000; let renderCount = 0; while (Date.now() - startTime < runTime) { await render(root); renderCount++; } console.log('done', renderCount); })(); return () => { document.body.removeChild(sandbox); }; }, []); return <div />; }; export default TestPage;

• JsonView es el componente que quiero comparar.
• ref se usa para identificar cuándo se crea div .
• startTime / runTime se utilizan para limitar el tiempo de ejecución del conjunto de pruebas.

Esto funciona bien: obtengo resultados de referencia consistentes y los cambios en el componente muestran una mejora/degradación del rendimiento.

Sin embargo, me preguntaba si esta es la forma correcta de comparar un componente de React o si debería usar otro mecanismo.