Optimizing API Integration in a Large React Application Using OpenAPI Generator by Stefano Marzo

In the CERN Business Computing Group, we are developing a new user interface for one of CERN’s largest business applications using React. Given the need to interact with hundreds of different backend endpoints, we implemented a strategy centered around OpenAPI Generator to automate the creation of HTTP client functions and TypeScript object models directly from API specifications. This approach ensures strict contract adherence between the frontend and backend, with generated code automatically refreshed through the CI/CD pipeline. While the initial implementation followed the standard OpenAPI Generator pattern of instantiating new API objects for each call, performance testing revealed significant memory overhead, resulting in slower page loads. To mitigate this, we developed an in-house React hook that optimizes the use of OpenAPI Generator, eliminating the need to instantiate new API objects for every call. This solution has notably improved performance and reduced memory allocation, providing a more efficient approach to API interaction in large-scale React applications.