{count}
);
}
function UnstableProps(): JSX.Element {
const [tick, setTick] = useState(0);
return (
MemoChild: {label}
);
});
function ContextConsumer(): JSX.Element {
const theme = useContext(ThemeContext);
return Theme: {theme}
;
}
function ThemeToggle(): JSX.Element {
const [theme, setTheme] = useState('light');
return (
{rendering ? 'Rendering...' : 'Idle'}
);
}
function RapidUpdater(): JSX.Element {
const [count, setCount] = useState(0);
const triggerRapid = () => {
for (let i = 0; i < 50; i++) {
setTimeout(() => setCount((c) => c + 1), i * 16);
}
};
return (
{count}
);
}
export default function E2EFixture(): JSX.Element {
return (
React Scan E2E Fixture
Counter
Unstable Props (memo bypass)
Context
Slow Render
Rapid Updates
{hover ? '**' + text + '**' : text}
);
};
export default function App(): JSX.Element {
return (
<>
{/* {item.message}
{list.map(item => (
);
}
export default function App(): JSX.Element {
return (
Todo List
react-scan
{/* content */}
{/* sidebar */}
{examples.map((item, index) => (
))}
{/* iframe */}
#### For Firefox 1. Run development server: ```bash pnpm dev:firefox ``` 2. This will automatically open Firefox with the extension loaded. If you need to inspect the extension, open `about:debugging#/runtime/this-firefox` in Firefox
#### For Brave 1. Run development server: ```bash pnpm dev:brave ``` 2. This will automatically open Brave with the extension loaded. If you need to inspect the extension, open `brave://extensions` in Brave
### Building for Production To build the extension for all browsers: ```bash pnpm pack:all ``` This will create: - `chrome-extension-v1.0.8.zip` - `firefox-extension-v1.0.8.zip` - `brave-extension-v1.0.8.zip` in the `build` directory. ================================================ FILE: packages/extension/package.json ================================================ { "name": "@react-scan/extension", "version": "0.5.3", "private": true, "type": "module", "scripts": { "clean": "rimraf dist", "build": "vite build", "postbuild": "node ../../scripts/version-warning.mjs", "dev": "pnpm dev:chrome", "dev:chrome": "cross-env BROWSER=chrome vite", "dev:firefox": "cross-env BROWSER=firefox vite", "dev:brave": "cross-env BROWSER=brave vite", "mkdir": "mkdir -p build", "pack:chrome": "pnpm clean && pnpm build && pnpm mkdir && cd dist && zip -r \"../build/chrome-extension-v$npm_package_version.zip\" .", "pack:firefox": "pnpm clean && BROWSER=firefox pnpm build && pnpm mkdir && cd dist && zip -r \"../build/firefox-extension-v$npm_package_version.zip\" .", "pack:brave": "pnpm clean && BROWSER=brave pnpm build && pnpm mkdir && cd dist && zip -r \"../build/brave-extension-v$npm_package_version.zip\" .", "pack:all": "rimraf build && pnpm pack:chrome && pnpm pack:firefox && pnpm pack:brave", "lint": "oxlint src && pnpm typecheck", "typecheck": "tsc --noEmit" }, "dependencies": { "bippy": "0.3.8", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scan": "workspace:*", "zod": "^3.23.8" }, "devDependencies": { "@types/chrome": "^0.0.281", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@types/semver": "^7.5.8", "@types/webextension-polyfill": "^0.12.0", "@vitejs/plugin-react": "^4.2.1", "bestzip": "^2.2.1", "cross-env": "^7.0.3", "semver": "^7.7.1", "vite": "^6.3.0", "vite-plugin-web-extension": "^4.4.3", "vite-tsconfig-paths": "^5.1.4", "webextension-polyfill": "^0.12.0" } } ================================================ FILE: packages/extension/src/assets/css/no-react.css ================================================ html.freeze > body { pointer-events: none; } html.freeze { overflow: auto; overscroll-behavior-x: contain; } html.freeze svg { pointer-events: none; } html.freeze #react-scan-toast { pointer-events: auto; } #react-scan-backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.01); backdrop-filter: blur(94px) saturate(180%); animation-duration: 300ms; opacity: 0; pointer-events: none; transition: opacity 500ms; z-index: 2147483650; } #react-scan-toast { position: fixed; top: 50%; left: 50%; display: flex; flex-direction: column; padding: 12px 40px 12px 16px; min-width: 320px; max-width: 480px; color: #fff; font-size: 12px; font-family: Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console', monospace; line-height: 1.5; background: rgba(0, 0, 0, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transform: translate(-50%, -50%); transition: opacity 300ms ease-in-out; z-index: 2147483651; } #react-scan-toast-title { margin: 0 0 8px 0; } #react-scan-toast-message { display: flex; align-items: flex-start; } #react-scan-toast-message span { white-space: pre-line; } #react-scan-toast .icon { font-size: .75rem; margin-right: 8px; } @media (max-width: 320px) { #react-scan-toast { flex-direction: column; min-width: auto; width: calc(100% - 36px); } } @media (max-width: 720px) { #react-scan-toast { br { display: none; } } } #react-scan-toast-close-button { position: absolute; top: 10px; right: 8px; display: flex; align-items: center; width: 23px; height: 23px; padding: 4px; border: none; border-radius: 4px; color: #fff; cursor: pointer; background: rgba(255, 255, 255, 0.01); transition: background-color 300ms ease; } #react-scan-toast-close-button:hover { background-color: rgba(255, 255, 255, 0.15); } ================================================ FILE: packages/extension/src/background/icon.ts ================================================ import browser from 'webextension-polyfill'; export enum IconState { DISABLED = 'disabled', ENABLED = 'enabled', } const browserAction = browser.action || browser.browserAction; const cachedIcons = { [IconState.ENABLED]: { path: { 16: browser.runtime.getURL('icons/enabled/16.png'), 32: browser.runtime.getURL('icons/enabled/32.png'), 48: browser.runtime.getURL('icons/enabled/48.png'), 128: browser.runtime.getURL('icons/enabled/128.png'), }, }, [IconState.DISABLED]: { path: { 16: browser.runtime.getURL('icons/disabled/16.png'), 32: browser.runtime.getURL('icons/disabled/32.png'), 48: browser.runtime.getURL('icons/disabled/48.png'), 128: browser.runtime.getURL('icons/disabled/128.png'), }, }, }; export const updateIconForTab = async ( tab: browser.Tabs.Tab, state: IconState, badgeText = 'on', ): Promise
React Scan
React Scan automatically detects performance issues in your React app.
Previously, tools like:
- [`
### [**Try it out! →**](https://react-scan.million.dev)
> [!IMPORTANT]
> Want to monitor issues in production? Check out [React Scan Monitoring](https://react-scan.com/monitoring)!
## Install
### Package managers
```bash
npm i react-scan
```
```bash
pnpm add react-scan
```
```bash
yarn add react-scan
```
### CDN
```html
```
## Usage
- [NextJS App Router](https://github.com/aidenybai/react-scan/blob/main/docs/installation/next-js-app-router.md)
- [NextJS Page Router](https://github.com/aidenybai/react-scan/blob/main/docs/installation/next-js-page-router.md)
- [Create React App](https://github.com/aidenybai/react-scan/blob/main/docs/installation/create-react-app.md)
- [Vite](https://github.com/aidenybai/react-scan/blob/main/docs/installation/vite.md)
- [Parcel](https://github.com/aidenybai/react-scan/blob/main/docs/installation/parcel.md)
- [Remix](https://github.com/aidenybai/react-scan/blob/main/docs/installation/remix.md)
- [React Router](https://github.com/aidenybai/react-scan/blob/main/docs/installation/react-router.md)
- [Astro](https://github.com/aidenybai/react-scan/blob/main/docs/installation/astro.md)
- [TanStack Start](https://github.com/aidenybai/react-scan/blob/main/docs/installation/tanstack-start.md)
### CLI
If you don't have a local version of the site or you want to test a React app remotely, you can use the CLI. This will spin up an isolated browser instance which you can interact or use React Scan with.
```bash
npx react-scan@latest http://localhost:3000
# you can technically scan ANY website on the web:
# npx react-scan@latest https://react.dev
```
You can add it to your existing dev process as well. Here's an example for Next.js:
```json
{
"scripts": {
"dev": "next dev",
"scan": "next dev & npx react-scan@latest localhost:3000"
}
}
```
### Browser Extension
If you want to install the extension, follow the guide [here](https://github.com/aidenybai/react-scan/blob/main/BROWSER_EXTENSION_GUIDE.md).
### React Native
See [discussion](https://github.com/aidenybai/react-scan/pull/23)
## API Reference
Options
```tsx export interface Options { /** * Enable/disable scanning * * Please use the recommended way: * enabled: process.env.NODE_ENV === 'development', * * @default true */ enabled?: boolean; /** * Force React Scan to run in production (not recommended) * * @default false */ dangerouslyForceRunInProduction?: boolean; /** * Log renders to the console * * WARNING: This can add significant overhead when the app re-renders frequently * * @default false */ log?: boolean; /** * Show toolbar bar * * If you set this to true, and set {@link enabled} to false, the toolbar will still show, but scanning will be disabled. * * @default true */ showToolbar?: boolean; /** * Animation speed * * @default "fast" */ animationSpeed?: "slow" | "fast" | "off"; /** * Track unnecessary renders, and mark their outlines gray when detected * * An unnecessary render is defined as the component re-rendering with no change to the component's * corresponding dom subtree * * @default false * @warning tracking unnecessary renders can add meaningful overhead to react-scan */ trackUnnecessaryRenders?: boolean; onCommitStart?: () => void; onRender?: (fiber: Fiber, renders: Array
Modal content
}
`;
const result = await transform(input);
expect(result).toContain("Modal.displayName = 'Modal'");
});
it('handles conditional returns', async () => {
const input = `
const ConditionalComponent = ({ show }) => {
if (show) {
return Shown
}
return Hidden
}
`;
const result = await transform(input);
expect(result).toContain(
"ConditionalComponent.displayName = 'ConditionalComponent'",
);
});
it('handles early returns', async () => {
const input = `
const EarlyReturn = ({ loading, error, data }) => {
if (loading) return Loading...
if (error) return Error: {error}
return {data}
}
`;
const result = await transform(input);
expect(result).toContain("EarlyReturn.displayName = 'EarlyReturn'");
});
});
================================================
FILE: packages/scan/src/react-component-name/__tests__/complex-patterns.test.ts
================================================
import { describe, it, expect } from 'vitest';
import { transform } from './utils';
describe('complex component patterns', () => {
it('handles components with hooks', async () => {
const input = `
const TodoList = () => {
const [todos, setTodos] = useState([])
useEffect(() => {
fetchTodos().then(setTodos)
}, [])
return - {todos.map(todo =>
- {todo.text} )}
{count}
)
}
`;
const result = await transform(input);
expect(result).toContain("Counter.displayName = 'Counter'");
});
it('handles components with render props', async () => {
const input = `
const DataFetcher = ({ children, url }) => {
const [data, setData] = useState(null)
useEffect(() => {
fetch(url).then(setData)
}, [url])
return <>{children(data)}
}
`;
const result = await transform(input);
expect(result).toContain("DataFetcher.displayName = 'DataFetcher'");
});
it('handles higher-order components', async () => {
const input = `
const withData = (WrappedComponent) => {
const WithData = (props) => {
const [data, setData] = useState(null)
return Hello, {props.name}
} `; const result = await transform(input); expect(result).toContain("Welcome.displayName = 'Welcome'"); }); it('handles async components', async () => { const input = ` async function AsyncComponent({ id }) { const data = await fetchData(id) return{data}
}
`;
const result = await transform(input);
expect(result).toContain("AsyncComponent.displayName = 'AsyncComponent'");
});
});
================================================
FILE: packages/scan/src/react-component-name/__tests__/general-cases.test.ts
================================================
import { describe, expect, it } from 'vitest';
import { transform } from './utils';
describe('edge cases', () => {
it('handles nested component declarations', async () => {
const input = `
const Parent = () => {
const NestedChild = () => Child
return (
{data.map(item => (
{item.visible && {item.text}}
))}
), [data])
return (
<>
{isLoading ? {data}
} catch (error) {
return Error: {error.message}
}
}
`;
const result = await transform(input);
expect(result).toContain("SafeComponent.displayName = 'SafeComponent'");
});
it('handles components returning primitive values', async () => {
const input = `
// Null component
const EmptyComponent = () => null;
// String component
const TextComponent = () => "Hello World";
// Number component
const NumberComponent = () => 42;
// Boolean component (though not very useful)
const BooleanComponent = () => true;
// Array of elements
const ListComponent = () => [
One
,
Two
];
// Conditional primitive returns
const ConditionalComponent = ({ value }) => {
if (!value) return null;
if (typeof value === 'string') return value;
if (typeof value === 'number') return value.toString();
return {value}
;
};
// Dynamic children
const DynamicComponent = ({ count }) => {
return Array(count).fill(null).map((_, i) => );
};
// Async component with suspense
const AsyncComponent = () => {
const resource = fetchData();
if (!resource.isReady) {
throw resource.promise;
}
return {resource.read()}
;
};
// Portal component
const PortalComponent = () => {
return createPortal(Portal content
, document.body);
};
// Fragment shorthand
const FragmentComponent = () => <>Fragment content;
// Nested arrays and fragments
const NestedComponent = () => [
First
,
<>
Nested 1
Nested 2
,
[Deep nested
]
];
`;
const result = await transform(input);
// expect(result).toContain("EmptyComponent.displayName = 'EmptyComponent'");
// expect(result).toContain("TextComponent.displayName = 'TextComponent'");
// expect(result).toContain("NumberComponent.displayName = 'NumberComponent'");
// expect(result).toContain(
// "BooleanComponent.displayName = 'BooleanComponent'",
// );
expect(result).toContain("ListComponent.displayName = 'ListComponent'");
expect(result).toContain(
"ConditionalComponent.displayName = 'ConditionalComponent'",
);
expect(result).toContain(
"DynamicComponent.displayName = 'DynamicComponent'",
);
expect(result).toContain("AsyncComponent.displayName = 'AsyncComponent'");
expect(result).toContain("PortalComponent.displayName = 'PortalComponent'");
expect(result).toContain(
"FragmentComponent.displayName = 'FragmentComponent'",
);
expect(result).toContain("NestedComponent.displayName = 'NestedComponent'");
});
it('handles components with complex conditional returns', async () => {
const input = `
const ComplexComponent = ({ type, data }) => {
switch (type) {
case 'text': return data;
case 'number': return data.toString();
case 'array': return data.map(item => {item.text}
);
case 'element': return {data}
;
default: return null;
}
};
const TernaryComponent = ({ condition, value }) =>
condition
? value
: value
? {value}
: null;
const ShortCircuitComponent = ({ items }) =>
items?.length && items.map(item => {item}
);
const NullishComponent = ({ text }) =>
text ?? <>Default text;
const ChainedComponent = ({ a, b, c }) =>
a?.b?.c ?? Fallback
;
// More Suspense examples
const DataComponent = () => {
const data = resource.read();
return {data}
;
};
const SuspenseImage = ({ src }) => {
const resource = preloadImage(src);
if (!resource.complete) {
throw resource.promise;
}
return {user.name}
{posts.map(post =>{post.title}
)}
{Object.keys(data[0] || {}).map(field => (
handleHeaderClick(field)}
className={cn([
'header-cell',
sortField === field && 'sorted',
sortField === field && sortDirection === 'desc' && 'desc'
])}
>
{field}
))}
{filteredData.map((row, i) => (
{Object.values(row).map((cell, j) => (
))}
{cell}
))}
setValue(e.target.value)}
/>
);
});
// forwardRef with memo
const MemoizedInput = React.memo(React.forwardRef((props, ref) => (
)));
// forwardRef wrapped in HOC
const EnhancedInput = withStyles(React.forwardRef((props, ref) => (
)));
`;
const result = await transform(input);
expect(result).toContain("Button.displayName = 'Button'");
expect(result).toContain("Input.displayName = 'Input'");
expect(result).toContain("Select.displayName = 'Select'");
expect(result).toContain("TextArea.displayName = 'CustomTextArea'"); // Should preserve existing, todo check for one
expect(result).toContain("Field.displayName = 'Field'");
expect(result).toContain("MemoizedInput.displayName = 'MemoizedInput'");
expect(result).toContain("EnhancedInput.displayName = 'EnhancedInput'");
});
it('handles all memo patterns', async () => {
const input = `
import React from 'react';
// Basic memo
const Item = React.memo(props => (
{props.text}
));
// Named function in memo
const Header = React.memo(function Header({ title }) {
return {title}
; }); // memo with comparison function const ExpensiveList = React.memo(({ items }) => (-
{items.map(item =>
- {item.text} )}
{props.text}
)));
// memo wrapped in HOC
const EnhancedList = withStyles(React.memo(props => (
- {props.items.map(item =>
- {item.text} )}
{item.text}
);
// Reduce to JSX
const reduced = items.reduce((acc, item) => [
...acc,
{item.text}
], []);
// Custom function returning JSX
const renderItem = (item) => {item.text}
;
// Method chaining with JSX returns
const processed = items
.slice(0, 5)
.filter(item => item.score > 10)
.map(renderItem);
return (
<>
{filtered}
{reduced}
{processed}
{renderItem(items[0])}
);
};
// Custom utility functions returning JSX
const renderList = (items) => items.map(item => {content}
;
const withLayout = (Component) => (props) => (
{text}
);
return (
<>
{list}
{wrapped}
{content}
{result.data}
;
};
fetchData().then(setData);
}, [id]);
return data || Loading...
;
};
// Complex method chaining
const ChainedComponent = ({ data }) => {
const result = Object.entries(data)
.filter(([_, value]) => value.isValid)
.map(([key, value]) => ({ key, ...value }))
.reduce((acc, item) => ({
...acc,
[item.key]: {item.content}
}), {});
return (
{Object.values(result)}
);
};
// Functional composition
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const withData = Component => props => {
const data = useData();
return {data[label]}
);
const EnhancedComponent = compose(
withData,
withTheme
)(BaseComponent);
`;
const result = await transform(input);
expect(result).toContain(
"ArrayMethodsComponent.displayName = 'ArrayMethodsComponent'",
);
expect(result).toContain(
"CustomFunctionsComponent.displayName = 'CustomFunctionsComponent'",
);
expect(result).toContain("AsyncComponent.displayName = 'AsyncComponent'");
expect(result).toContain(
"ChainedComponent.displayName = 'ChainedComponent'",
);
expect(result).toContain("BaseComponent.displayName = 'BaseComponent'");
// expect(result).toContain(
// "EnhancedComponent.displayName = 'EnhancedComponent'",
// );
});
it('handles shadcn-style component patterns', async () => {
const input = `
import React from 'react';
// Basic shadcn component pattern
const Button = React.forwardRef<
HTMLButtonElement,
React.ButtonHTMLAttributesStill Legacy
}
});
// Mixins (old pattern, but still exists)
const mixins = {
componentDidMount() {
console.log('mounted');
}
};
const WithMixins = createReactClass({
mixins: [mixins],
render() {
return With Mixins
}
});
// Factory pattern (common in older Material-UI and other libs)
const createComponent = (config) => {
class GeneratedComponent extends React.Component {
render() {
return {config.text}
}
}
return GeneratedComponent;
};
const FactoryComponent = createComponent({ text: 'Factory' });
// Decorator pattern (still common in MobX codebases)
@observer
class DecoratedComponent extends React.Component {
render() {
return {this.props.data}
}
}
// Render props with multiple children functions
const RenderPropComponent = ({ children, render, component: Component }) => (
{children(data)}
{render(data)}
);
// Old context pattern
class OldContextComponent extends React.Component {
static contextTypes = {
theme: PropTypes.object
};
render() {
return {this.context.theme}
}
}
// Partial application component creation
const createPartialComponent = (defaultProps) =>
function PartialComponent(props) {
return ;
};
const PartialButton = createPartialComponent({ type: 'button' });
// jQuery-style plugins (seen in older React codebases)
React.Component.prototype.plugin = function() {
return Plugin
;
};
class PluginComponent extends React.Component {
render() {
return <>{this.plugin()};
}
}
// Multiple inheritance simulation
const withInheritance = Base => class extends Base {
render() {
return Extended {super.render()}
;
}
};
class BaseComponent extends React.Component {
render() {
return Base
;
}
}
const InheritedComponent = withInheritance(BaseComponent);
`;
const result = await transform(input);
expect(result).toContain(
"CreateClassComponent.displayName = 'CreateClassComponent'",
);
expect(result).toContain("WithMixins.displayName = 'WithMixins'");
// expect(result).toContain(
// "FactoryComponent.displayName = 'FactoryComponent'",
// );
expect(result).toContain(
"DecoratedComponent.displayName = 'DecoratedComponent'",
);
expect(result).toContain(
"RenderPropComponent.displayName = 'RenderPropComponent'",
);
expect(result).toContain(
"OldContextComponent.displayName = 'OldContextComponent'",
);
// expect(result).toContain("PartialButton.displayName = 'PartialButton'");
expect(result).toContain("PluginComponent.displayName = 'PluginComponent'");
// expect(result).toContain(
// "InheritedComponent.displayName = 'InheritedComponent'",
// );
});
});
================================================
FILE: packages/scan/src/react-component-name/__tests__/react-patterns.test.ts
================================================
import { describe, it, expect } from 'vitest';
import { transform } from './utils';
describe('modern React patterns', () => {
it('handles components with hooks and context', async () => {
const input = `
const UserProfile = () => {
const { user } = useContext(UserContext)
const { theme } = useContext(ThemeContext)
return (
{user.name}
{user.email}
Loading...
if (error) return Error!
return (
-
{data.map(item => (
- {formatResult(item)} ))}
{data.content}
Something went wrong
}
return this.props.children
}
}
`;
const result = await transform(input);
expect(result).toContain("ErrorBoundary.displayName = 'ErrorBoundary'");
});
});
================================================
FILE: packages/scan/src/react-component-name/__tests__/ts-patterns.test.ts
================================================
import { describe, it, expect } from 'vitest';
import { transform } from './utils';
describe('typescript patterns', () => {
it('handles components with type parameters', async () => {
const input = `
interface Props{items.map(renderItem)}
}
`;
const result = await transform(input);
expect(result).toContain("List.displayName = 'List'");
});
it('handles components with complex types', async () => {
const input = `
type Props = {
id: string
onClick: (e: React.MouseEvent) => void
children: React.ReactNode
} & Omit