Large Dynamically Generated Forms in React — Part 4
For each implementation, I collected 50 data points by entering keystrokes and waiting for the page to render. I attempted to do this while keeping my computer under similar load (not sure this would make any difference). Feel free to view this data here.

*It’s worth noting that I don’t know how React profiler or React Components work at a deep level. It is very possible that these tests are not indicative of what people will see in the wild with more complex components and as such my results should be taken with a grain of salt.

Some Observations

While running these tests it was interesting to see the amount that Chrome and the React profiler changed in responsiveness. While attempting to create this data I repeatedly crashed the React profile, specifically when it came to the Separated Component without Context implementation. What I found even more shocking was that both Chrome and the React Profile performed smoothly with the hooks implementation. I don’t know the reason for this but it does get me excited to see what sort of performance difference people see when 16.7 lands with hooks.

The Results

All In One Component — 72.46 ms

Separated Component No Context — 104.56 ms

Separated Component With Context — 62.12 ms

Hooks With Context — 57.60 ms

Render Times (ms) by Implementation Type

Let’s talk about what we see here. As we move from an all-in-one component to separate components the render time increases. This is somewhat expected because React has to traverse the entire component tree but I was surprised by how much it increased.

Once we moved our form state to context we start to see some improvements (~15%) over our all-in-one component.

When implemented with hooks we saw an improvement of about ~20% as compared to the all-in-one component. This is interesting because when hooks were announced there were comments about it possibly being slower in some respects than a class implementation.

Ultimately there is a lot more work that can be done here but these were defiantly some interesting results
['Stuart Casarotto']
['Forms', 'JavaScript', 'Performance', 'React', 'Testing']