React much slower on Firefox than Chrome?

Question

My React page seems to be considerably slower in Firefox than in any other browser. For example if I click on a button to open a filter in Chrome it will take less than a second for the filter to be displayed on the page. If I do the same action in Firefox it takes 2-3 seconds for the filter to be displayed on the page.

Has anyone else ran into this problem? If so what did you do to fix it?

I tried using the React.addons.Perf functions to see if this could point me to the issue. There does seem to be a large gap between the wasted time between FF and Chrome but it still seems like it shouldn't take seconds to display on FF.

Chrome Perf Results

FF Perf Results

Here are the versions of everything I am using:

• Firefox ESR v45.7.0
• Chrome v56.0.2924.87
• React 15.4.0

Update

I ran the profiler in FF to see what was taking so long and it looks like FF is taking most of the time to calculate the layout. Not sure what this means so I'm going to do more research on this.

Answer 1

So the issue was not with react or javascript. I finally figured out that we just had too many deeply nested flex elements. This is what was taking firefox a long time to calculated the layout.