I ran a profiler to see the difference and here arethe findings:

Case 1:

When passing an already optimized function as an inline function (the last example in my blog)

Here are iterations:

1. Actual duration: 0.30000000074505806, base duration: 0.10000000149011612

2. Actual duration: 0.29999999701976776, base duration: 0.29999999701976776

3. Actual duration: 0.19999999925494194, base duration: 0.19999999925494194

4. Actual duration: 0.29999999701976776, base duration: 0.19999999925494194

5. Actual duration: 0.30000000074505806, base duration: 0.30000000074505806

6. Actual duration: 0.4000000022351742, base duration: 0.30000000074505806

Case 2:

When passing the callback directly (not as an inline function)

1. Actual duration: 0.30000000074505806, base duration: 0.30000000074505806

2. Actual duration: 0.19999999925494194, base duration: 0.19999999925494194

3. Actual duration: 0.19999999925494194, base duration: 0.20000000298023224

4. Actual duration: 0.29999999701976776, base duration: 0.30000000074505806

5. Actual duration: 0.20000000298023224, base duration: 0.20000000298023224

6. Actual duration: 0.3999999985098839, base duration: 0.4000000022351742

7. Actual duration: 0.19999999925494194, base duration: 0.30000000074505806

As we can see, in case1, the actual duration is more than the base duration.

"If the actual duration is coming out to be more than the base duration in React Profiler, it means that the component is taking longer to render than expected."