--- title: Automate React Native Performance With Metrognome description: Metrognome is an open-source AI agent that automates React Native performance engineering by combining device control (Agent Device), runtime metrics (Metro... canonical: https://daily.dev/posts/automate-react-native-performance-with-metrognome-zfk2lzier twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Automate React Native Performance With Metrognome | daily.dev og:description: Metrognome is an open-source AI agent that automates React Native performance engineering by combining device control (Agent Device), runtime metrics (Metro... og:url: https://daily.dev/posts/automate-react-native-performance-with-metrognome-zfk2lzier og:image: https://api.daily.dev/og/posts/ZFK2LzIeR.png og:image:alt: Automate React Native Performance With Metrognome og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Automate React Native Performance With Metrognome **[Callstack Blog](https://daily.dev/sources/callstack-blog)** · 11 min read · 0 upvotes · 0 comments ## Summary Metrognome is an open-source AI agent that automates React Native performance engineering by combining device control (Agent Device), runtime metrics (Metro MCP), and React Native best practices into a single autonomous loop. It proposes fixes, measures them N times on a live device, and only commits changes that clear a statistical gate — discarding improvements that fall within measurement noise. A 3D Performance Map built via static Babel analysis ranks components by weighted performance debt so the agent knows where to focus without human prompting. GitHub Actions templates let it run on a cron schedule, opening PRs only when validated gains are found. Real-world use at Uphold uncovered issues like a global state slice causing dashboard-wide re-renders every 5 seconds and an array spread inside a memoized context value that invalidated memo on every render. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How does Metrognome decide whether a React Native performance fix is a real improvement or just measurement noise? A change is kept only if it clears two gates simultaneously: it must beat a floor a user would actually feel (for example 30ms on cold start), and it must beat the device's run-to-run measurement wobble by a comfortable margin. Each experiment runs N times with the first run excluded as warm-up, and the remaining runs are averaged for old and new code before comparison. Changes that fail either gate are automatically reverted. _Developers validating React Native optimizations before shipping can track tools like this on daily.dev._ ### What tools does Metrognome combine to automate React Native performance testing? It orchestrates Agent Device (which drives the app via accessibility snapshots to tap, scroll, and navigate for measurements), Agent React DevTools (tracks re-renders and names firing components), Metro MCP (reads CPU, JS heap, and network signals over CDP), and the React Native Best Practices skill (a playbook for diagnosing performance issues). Metrognome itself only provides the loop, gating logic, and memory that ties these together. _Engineers assembling an AI-driven performance workflow can follow tool integrations like this on daily.dev._ ### What kind of React Native performance bug did Uphold find using an array spread inside a memoized context provider? A root context provider's value was wrapped in useMemo and looked correct, but one field spread a fresh array on every render (wallets: [...fiat, ...crypto]), which changed the memo's output reference anyway and caused every screen below it to re-render. The fix was removing that spread rather than adding another memo, since the real cause was reference instability, not a missing memoization layer. _Teams debugging memoization pitfalls in React Native apps can find writeups like this on daily.dev._ ## Similar posts on daily.dev - [Metro MCP, 147 Haptic Presets, and the 104x Faster Way to Draw a Heart](https://daily.dev/posts/metro-mcp-147-haptic-presets-and-the-104x-faster-way-to-draw-a-heart-lmckdulsk) · ITNEXT · 0 upvotes · 0 comments - [Meta's React Compiler 1.0 Brings Automatic Memoization to Production](https://daily.dev/posts/meta-s-react-compiler-1-0-brings-automatic-memoization-to-production-tmm7zv69y) · InfoQ · 1 upvotes · 0 comments - [Chrome DevTools for agents](https://daily.dev/posts/chrome-devtools-for-agents-i2pxfjajj) · iO tech\_hub · 1 upvotes · 0 comments - [Agent React DevTools: Debug React Apps with AI Agents](https://daily.dev/posts/agent-react-devtools-debug-react-apps-with-ai-agents-gvssiv3jy) · Callstack Blog · 35 upvotes · 4 comments --- Tags: [#performance](https://daily.dev/tags/performance), [#ai-agents](https://daily.dev/tags/ai-agents), [#mobile](https://daily.dev/tags/mobile), [#react-native](https://daily.dev/tags/react-native) [View this post on daily.dev](https://daily.dev/posts/automate-react-native-performance-with-metrognome-zfk2lzier) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Automate React Native Performance With Metrognome","url":"https://daily.dev/posts/automate-react-native-performance-with-metrognome-zfk2lzier","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/automate-react-native-performance-with-metrognome-zfk2lzier"},"datePublished":"2026-07-20T09:24:37.609Z","dateModified":"2026-09-13T20:30:01.346Z","description":"Metrognome is an open-source AI agent that automates React Native performance engineering by combining device control (Agent Device), runtime metrics (Metro...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/67424e08c7736c7c00a1106c5ba40450?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/67424e08c7736c7c00a1106c5ba40450?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Callstack Blog","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Callstack Blog","logo":"https://media.daily.dev/image/upload/s--3qItoroi--/f_auto,q_auto/v1774179048/logos/callstack-blog?_a=BAMAMiWQ0","url":"https://daily.dev/sources/callstack-blog"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/automate-react-native-performance-with-metrognome-zfk2lzier","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"performance,ai-agents,mobile,react-native","timeRequired":"PT11M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Callstack Blog","item":"https://daily.dev/sources/callstack-blog"},{"@type":"ListItem","position":3,"name":"Automate React Native Performance With Metrognome"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/automate-react-native-performance-with-metrognome-zfk2lzier#faq","mainEntity":[{"@type":"Question","name":"How does Metrognome decide whether a React Native performance fix is a real improvement or just measurement noise?","acceptedAnswer":{"@type":"Answer","text":"A change is kept only if it clears two gates simultaneously: it must beat a floor a user would actually feel (for example 30ms on cold start), and it must beat the device's run-to-run measurement wobble by a comfortable margin. Each experiment runs N times with the first run excluded as warm-up, and the remaining runs are averaged for old and new code before comparison. Changes that fail either gate are automatically reverted. Developers validating React Native optimizations before shipping can track tools like this on daily.dev."}},{"@type":"Question","name":"What tools does Metrognome combine to automate React Native performance testing?","acceptedAnswer":{"@type":"Answer","text":"It orchestrates Agent Device (which drives the app via accessibility snapshots to tap, scroll, and navigate for measurements), Agent React DevTools (tracks re-renders and names firing components), Metro MCP (reads CPU, JS heap, and network signals over CDP), and the React Native Best Practices skill (a playbook for diagnosing performance issues). Metrognome itself only provides the loop, gating logic, and memory that ties these together. Engineers assembling an AI-driven performance workflow can follow tool integrations like this on daily.dev."}},{"@type":"Question","name":"What kind of React Native performance bug did Uphold find using an array spread inside a memoized context provider?","acceptedAnswer":{"@type":"Answer","text":"A root context provider's value was wrapped in useMemo and looked correct, but one field spread a fresh array on every render (wallets: [...fiat, ...crypto]), which changed the memo's output reference anyway and caused every screen below it to re-render. The fix was removing that spread rather than adding another memo, since the real cause was reference instability, not a missing memoization layer. Teams debugging memoization pitfalls in React Native apps can find writeups like this on daily.dev."}}]} ```