To be honest, I am also quite new to React :)
Tahir Ahmed
2

Ok! I moved to an instance array, `this.boxes`, instead of using `this.state`. I fired up the Chrome profiler and shuffled a list of 100 items 3 times, with both the `this.state` implementation and the `this.boxes` implementation.

Surprisingly, there was zero difference between the two. Both took almost exactly 50ms on their first pass, and around 35ms on their second pass.

(This sounded like a lot to me, but Paul Lewis says that we have a 100ms threshold between click event and start of transition, so I’m well within that, even with an unrealistically big number of items being animated).

The profile for the two looks very different. The `this.boxes` implementation has a 3ms “gap” between two tall stacks of function signatures. Not entirely sure what to make of it.


I had a hunch that the reason there is no comparable difference in performance was because React is smart about `setState`. If the props to its children don’t change, it doesn’t force a re-render down the chain. To test this hypothesis, I put `console.log`s in the render function of the child components, the ones being animated by FlipMove. In both implementations, they get called 100 times (once per list item).

Because there isn’t a difference, I think I’m going to continue to use setState. Thanks so much for the feedback though! This was educational :)

Show your support

Clapping shows how much you appreciated Joshua Comeau’s story.