performance

A performance remediation workflow for Cognite Flows apps that systematically finds and fixes slowdowns rather than only reporting them, covering unnecessary re-renders, inefficient queries, missing pagination, unbounded fetches, large bundles, and memory leaks. A core principle is to always measure before and after: the first step runs the production build and preview, then captures a Lighthouse score and a React Profiler recording, noting components with the longest render times and highest render counts so that every later fix can be checked against these baseline numbers. An optional argument scopes the work to a specific file, component, or area; otherwise the whole app is examined.

Subsequent steps each pair a search with a direct fix. Re-render issues are addressed by wrapping inline objects and arrays with useMemo, wrapping event handlers with useCallback, memoizing context provider values, and applying React.memo only to components confirmed to re-render unnecessarily via the Profiler. For Cognite Data Modeling access, read-heavy paths that populate tables, dropdowns, or search results are steered toward the search/Elasticsearch path by rewriting instances.list calls to instances.query (or instances.search for full-text), while list is retained for writing, syncing, or semantics unavailable on query. A decision table clarifies when query, search, list, retrieve, and aggregate are each appropriate.

The workflow then moves client-side work to the server: any .filter() applied to a full result set after an SDK call is rewritten so the criterion lives in the API request's filter parameter, with a hard rule that if the API supports the filter, it should move server-side immediately, leaving a code comment only where it genuinely cannot. Property projections and explicit limits are added so only displayed fields and rows are fetched, client-side text search is replaced with the SDK's search endpoint, and pagination is fixed by adding limits, batching sequential requests into Promise.all, and moving fetches into useQuery or useMemo with stable dependency arrays. For deeper rationale on search-versus-relational paths and materialization tradeoffs, it points to a semantic-knowledge directory if present in the workspace.