Discussion on: Refactoring Chronicles: Conditional Rendering and getting rid of the Wrapper Div

often "readability" it is just a matter of habit. I remember when I moved to Javascript at the beginning I found very hard reading the Arrow functions
consider this

function multiplyByTwo(a) {
     return a*2;
}

versus :

const multiplyByTwo = a => a*2

Back then I would argue that the more verbose way was more understandable, right now i prefer the concise version.

It contains only what matters, no clutter.

But I completely agree that ( unless when there are performance issues or other reasons ) it is much better to write small (tiny) methods that can be compose together rather than a big one with lots of stuff in it.
Just think about a single for loop which filters and sorts and concatenate and manipulate data vs 4 different functions all concatenated. sure it's one iteration vs 4 but code is more readable and more unittestable.
And as you said reducing the cognitive load, and the amount of context you need to have to understand a piece of code is the most important thing.