Large Dynamically Generated Forms in React — Part 4

In part 4 we are going to look at how much these different implementations can improve our render times. To do this, I am going to crank up the number of inputs to 1050 on the page by having 30 albums and 35 inputs for each album. This is way more inputs than would ever make realist sense but it should help us get some different render time data.

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

In this series we have

1. Created a dynamically generating form.
2. Used React Profiler, Context, and PureComponents to reducer unnecessary renders.
3. Converted our components to use the new Hooks proposal.
4. Stress tested these different implementations.

I really hope you gained something from this series. Many of these techniques are new and super useful. I would recommend taking a bit of time and just trying to mess around with these whether in your day job or in your side project.

Source code for this entire series can be downloaded here.