According to the React community declare functions inside render method is a bad practice, as describe in this question: Is it bad to create functions in render?

For example:

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>
  );
}

I can guess, the functions defined will be recreated after every render, forcing Garbage Collector to clean this memory-leak. But actually that is the function of the GC, so I'm not really sure if that is the main issue.

Since I can't find explicit documentation for describing why this is a bad practice I'm trying to create a benchmark to really test the performance, so I have created this two examples in codesandbox:

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

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

I'm checking the react profiler but I can't really tell the difference, and using the performance tool of chrome I can see a difference in "scripting"

But I don't understand what this means.

I'm not sure if I'm doing the benchmark properly

How could I improve this benchmark (in arrange or assertion) in order to really assest that using function inside render ends up in bad performance of the application?