My favorite story about that is I created a really nice series of components in React. Fully functional, stateless, really nice clean testable code.
A user gets it, it's "too fast", the designer wants to put an animation in there to slow it down and help give some context. Of course the animation means that once you "clear" the dialog it flashes to blank before "animating away" (because it's a beautiful stateless functional component!).
So now the code is this hideous hacky bloated ugly solution, but it works...
The view is inherently stateful. Ignoring that because the JS doesn't have to be will always get you trouble. Adding transitions, however fast they may animate, will be killer.
I'm not shy of using internal state, but if I can get away with functional components, I will simply because of their simplicity and how easily they can be tested.
But it was just more of a story about how sometimes ugly hacky code is better. Because at the end of the day, you are writing this for the user, not for yourself.
A user gets it, it's "too fast", the designer wants to put an animation in there to slow it down and help give some context. Of course the animation means that once you "clear" the dialog it flashes to blank before "animating away" (because it's a beautiful stateless functional component!).
So now the code is this hideous hacky bloated ugly solution, but it works...