Optimizing API Integration in a Large React Application Using OpenAPI Generator
summary
Frontend codebase uses OpenAPI Generator to produce TypeScript models and HTTP client functions from CERN OpenAPI specs, refreshed in CI/CD, covering hundreds of endpoints. Initial pattern instantiated new API objects per call; replacement with a custom use API hook eliminates per-call instantiation, hides configuration, and returns typed functions. Controlled tests show lower memory allocation once the app has over 100 components making API calls, with only a slight unexplained uptick past ~200; overall response times and error rates improve.
AI-written summary · about
chapters (9)
- 0:00Optimizing React API integration
- 1:29Traditional API calls in React
- 2:36OpenAPI Generator for TypeScript
- 4:27How OpenAPI Generator works
- 7:40Challenges with generated code
- 9:06Introducing useAPI hook
- 10:50Benefits of useAPI hook
- 11:12Memory optimization with useAPI
- 12:41Summary and future plans
related talks
25mBuild the API you want to see in the world
28mAPI First to the Extreme - Federated API Design via Inner Sourcing
33mHow We built an API first Software in CakePHP 4
28mStrong RESTful Contracts in a GraphQL world
30mUsing Hooks and Codegen
35mOpensource API Tools to agile your apifirst strategy.
20mAdvanced Patterns for API Management in Large-Scale React Applications
40mOpenAPI Generator: 4000 stars on GitHub and spaghetti