Need suggestion for improving existing React with AEM app which use TDD approach

[Former Community Member]

Hi Team, 

I am working on an existing web application that build on TDD approach using React and AEM. I need to optimize it more and improve its performance, along with the implementation of new requirements. Looking for some ideas.

Thanks

Aakanksha

[EstebanBustamante · Accepted solution]

The question is too open to provide a definitive answer, you would need to include more architectural details such as: which model of SPA is being used, how you are using React, which React version is being used, the size of the application, if you are using GraphQL, etc. 

For the above reason, I will suggest general things to check/implement:

- Cache as much as you can, if you are using GraphQL, make sure you are using persistent queries and those are being cached

- Make sure you use common techniques for optimizing images (lazyload, assets compression, etc).

- Check if you are using and if something can be improved in topics like code splitting routes, code splitting, bundle optimization

- Depending on the SPA type, I would recommend exploring SSR, this can boost your performance, although maybe a little bit challenging to implement (depending on several factors). You can learn more here: https://experienceleague.adobe.com/docs/experience-manager-65/developing/spas/spa-ssr.html?lang=en

- Consider using the latest version of REACT, or at least make sure the version you are using is performing ok

- Consider implementing proper shouldComponentUpdate checks

- Perform profiling to find possible bottlenecks.