De acuerdo con la comunidad de React, declarar funciones dentro del método de procesamiento es una mala práctica, como se describe en esta pregunta: ¿Es malo crear funciones en el procesamiento?

Por ejemplo:

 export default function Clock({ time }) { const hours = () => time.getHours(); const minutes = () => time.getMinutes(); const seconds = () => time.getSeconds(); const milliseconds = () => time.getMilliseconds(); return ( <h1> {hours()}:{minutes()}:{seconds()}.{milliseconds()} </h1> ); }

Puedo suponer que las funciones definidas se recrearán después de cada procesamiento, lo que obligará a Garbage Collector a limpiar esta pérdida de memoria. Pero en realidad esa es la función del GC, por lo que no estoy seguro de si ese es el problema principal.

Como no puedo encontrar documentación explícita para describir por qué esta es una mala práctica, estoy tratando de crear un punto de referencia para probar realmente el rendimiento, así que he creado estos dos ejemplos en codesandbox:

Mala práctica: https://codesandbox.io/s/render-with-function-inside-bad-practice-xx40g?file=/src/Clock.js

Buena práctica: https://codesandbox.io/s/render-without-functions-good-practice-ckn1m?file=/src/Clock.js

Estoy revisando el perfilador de reacción, pero realmente no puedo notar la diferencia, y al usar la herramienta de rendimiento de Chrome, puedo ver una diferencia en las "secuencias de comandos".

Pero no entiendo que significa esto.

No estoy seguro si estoy haciendo el benchmark correctamente

¿Cómo podría mejorar este punto de referencia (en arreglo o afirmación) para realmente evaluar que el uso de la función dentro del renderizado termina en un mal rendimiento de la aplicación?