Win a copy of Head First Android this week in the Android forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Rob Spoor
  • Bear Bibeault
Saloon Keepers:
  • Jesse Silverman
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Piet Souris
  • Al Hobbs
  • salvin francis

React Cookbook: React Performance

 
Ranch Hand
Posts: 863
3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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:

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
 
Author
Posts: 138
15
Android Python Ruby
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello Burk,

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

D+D
 
Burk Hufnagel
Ranch Hand
Posts: 863
3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Author
Posts: 138
15
Android Python Ruby
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 863
3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Author
Posts: 138
15
Android Python Ruby
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
You showed up just in time for the waffles! And this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic