React Cookbook: React Performance

[Burk Hufnagel]

Hello David and Dawn,
I'm working on an inherited React application that's behaving oddly, and I'm hoping you can help me with it. When the app runs, it seems to call the constructor for each object three times. I'm new to React, so I did some research and found references to StrictMode -- and sure enough, the index.tsx file had the same code I see in your book:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

So I removed the React.StrictMode tag around the <App/> tag, and rebuilt the app, but it still calls constructors three times. I searched the code and don't see any other places where React.StrictMode is being used so I'm wondering if there's anything else that might cause this kind of behavior?

Thanks for any help you can offer on this,
Burk

[David Griffiths]

Hello Burk,

This behavior can occur if you declare a component inside another component. Is it all components, including App?

D+D

[Burk Hufnagel]

I'm relatively new to React and the application that's having issues, but I can tell you that App does not declare any components within itself. This is a web app using the antd library so App sets up the basic layout of the pate. It imports several classes like Header, Footer, Sider, and Content then declares an onCollapse method to open or close the Sider (which contains a menu) and ends with the return method that sets up the layout for the page.

Looking at the console log, I can see that when I select some of the pages from the menu the constructor only runs once, but on others, it runs multiple times. I'll check the code to see if the pages where it runs multiple times contain other class definitions.

Thanks for the info - it may help solve this mystery and improve the app's performance,
Burk

[David Griffiths]

Hello Burk,

What *might* be happening is that the various properties of some components are updating asynchronously. This is normal with apps that are querying data from the network etc.. If you have a component with (say) 2 properties ("name", "department") that are read from separate network calls, they might both be set to null or undefined before the network calls return. The component will do a render with them both set to null. If "name" is then returned from the network, the component will do a render with name != null, and department == null. Finally, when department returns, it will do a third render with the proper values for name and department.

This is just a guess, as to another possible cause. It will be difficult to say for certain without seeing the code.

The asynchronous nature of React (and why it got its name) is that it will react to changes to the underlying state of the system. When you have multiple asynchronous reads, you can have several renders. There won't normally be an excessive number, but there can be more than you initially expect.

The React Testing Library (recipe 8.1.... #plug ) can be a useful tool for examining the details of exactly what renders happen and why. The React profiling system (recipe 10.2) is another way of capturing the entire sequence of renders, and the underlying reason they occur. I think profiler might be the most useful tool in your case. You can find an example of the profiler in action here:

https://github.com/dogriffiths/ReactCookbook-source/blob/master/ch10-calendar-app/src/App.js

D+D

[Burk Hufnagel]

I'll definitely look into the testing library and profiler.

In the meantime, I found that several of the components had another class declared in the same file, but outside of the component, and it was the same code copy/pasted into those files. So, I created a separate file for it and imported it instead. The class constructors are still being called multiple times, but it did reduce the overall codebase size and means I only have to make changes in one place if there's an error in that code.

The other thing I found is that even though the constructors are called multiple times, the class methods that call external web services are only being called once. It's like it creates an instance and starts to use it, but keeps creating copies that remain unused, until the component gets the data it needs so it can be rendered. Does that make any sense to you?

Thanks in advance,
Burk

[David Griffiths]

Hello Burk,

That sounds like the component is being constructed, possibly with some blank properties, and only when they are non-blank are they being used to call the service.

Are there any conditions on the components being rendered? For example, do you do anything like this:

   { isVisible && <MyComp/> }

If the condition for visibility of the component changes, you can find that a brand new instance of the component can be created. If that's the case, you might want to pass the condition for visibility to the component:

   <MyComp visible={isVisible}/>

and then handle what gets rendered inside the component.

D+D