Repository: facebook/react
File: compiler/packages/react-mcp-server/src/index.ts (TypeScript)

Code before:
   - Explain specific code changes with clear reasoning
   - Show before/after examples when suggesting changes
   - Include compiler results to demonstrate the impact of optimizations
   - Only suggest changes that meaningfully improve optimization potential

## Optimization Guidelines
- Avoid mutation of values that are memoized by the compiler
- State updates should be structured to enable granular updates
- Side effects should be isolated and dependencies clearly defined
- The compiler automatically inserts memoization, so manually added useMemo/useCallback/React.memo can often be removed

## Understanding Compiler Output
- Successful optimization adds import { c as _c } from "react/compiler-runtime";
- Successful optimization initializes a constant sized cache with const $ = _c(n), where n is the size of the cache as an integer
- When suggesting changes, try to increase or decrease the number of cached expressions (visible in const $ = _c(n))
  - Increase: more memoization coverage
  - Decrease: if there are unnecessary dependencies, less dependencies mean less re-rendering
`,
      },
    },
  ],
}));

server.tool(
  'review-react-runtime',
  'Review the runtime of the code and get performance data to evaluate the proposed solution, the react code that is passed into this tool MUST contain an App functional component without arrow function. And DO NOT export anything',
  {
    text: z.string(),
  },
  async ({text}) => {
    try {
      const iterations = 20;

      let perfData = {
        renderTime: 0,
        webVitals: {
          cls: 0,
          lcp: 0,
          inp: 0,
          fid: 0,
          ttfb: 0,
        },
        reactProfilerMetrics: {
          id: 0,
          phase: 0,
          actualDuration: 0,
          baseDuration: 0,
          startTime: 0,
          commitTime: 0,
        },
        error: null,

Review comment (performance):
Can you also add something like "run this tool every time you propose a performance related change to verify if your suggestion actually improves performance"

Code after:
   - Explain specific code changes with clear reasoning
   - Show before/after examples when suggesting changes
   - Include compiler results to demonstrate the impact of optimizations
   - Only suggest changes that meaningfully improve optimization potential

## Optimization Guidelines
- Avoid mutation of values that are memoized by the compiler
- State updates should be structured to enable granular updates
- Side effects should be isolated and dependencies clearly defined
- The compiler automatically inserts memoization, so manually added useMemo/useCallback/React.memo can often be removed

## Understanding Compiler Output
- Successful optimization adds import { c as _c } from "react/compiler-runtime";
- Successful optimization initializes a constant sized cache with const $ = _c(n), where n is the size of the cache as an integer
- When suggesting changes, try to increase or decrease the number of cached expressions (visible in const $ = _c(n))
  - Increase: more memoization coverage
  - Decrease: if there are unnecessary dependencies, less dependencies mean less re-rendering
`,
      },
    },
  ],
}));

server.tool(
  'review-react-runtime',
  `
  Run this tool every time you propose a performance related change to verify if your suggestion actually improves performance.

  This tool has some requirements on the code input:
  - The react code that is passed into this tool MUST contain an App functional component without arrow function.
  - DO NOT export anything since we can't parse export syntax with this tool.
  - Only import React from 'react' and use all hooks and imports using the React. prefix like React.useState and React.useEffect
  `,
  {
    text: z.string(),
  },
  async ({text}) => {
    try {
      const iterations = 20;

      let perfData = {
        renderTime: 0,
        webVitals: {
          cls: 0,
          lcp: 0,
          inp: 0,
          fid: 0,
          ttfb: 0,
        },
        reactProfilerMetrics: {
          id: 0,