no-misused-capture-owner-stack
Prevents incorrect usage of 'captureOwnerStack'.
This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
Full Name in eslint-plugin-react-x
react-x/no-misused-capture-owner-stackFull Name in @eslint-react/eslint-plugin
@eslint-react/no-misused-capture-owner-stackFeatures
🧪
Presets
strict
strict-typescript
strict-type-checked
Rule Details
captureOwnerStack is only available in development builds of React and must be:
- Imported via a namespace to avoid direct named imports.
- Conditionally accessed within an
if (process.env.NODE_ENV !== 'production') { ... }block to prevent execution in production environments. - Called inside a React-controlled function (not implemented yet).
Examples
Directly importing captureOwnerStack as a named import
// Problem: Named imports may cause errors when bundled for production; use a namespace import instead
// Failing: Using a named import directly
import { captureOwnerStack } from "react";
// ^^^ Don't use named imports of `captureOwnerStack` in files that are bundled for development and production. Use a namespace import instead.
if (process.env.NODE_ENV !== "production") {
const ownerStack = React.captureOwnerStack();
console.log("Owner Stack", ownerStack);
}Calling directly without an environment check
// Problem: captureOwnerStack is only available in development builds; calling it directly in production will cause errors
// Failing: Missing environment check
import * as React from "react";
const ownerStack = React.captureOwnerStack();
// ^^^ `captureOwnerStack` should only be used in development builds. Use an environment check to ensure it is not executed in production.
console.log(ownerStack);Correctly using a namespace import with an environment check
// Recommended: Import via a namespace and call inside a non-production environment block
// Passing: Correct namespace import with environment check
import * as React from "react";
if (process.env.NODE_ENV !== "production") {
const ownerStack = React.captureOwnerStack();
console.log("Owner Stack", ownerStack);
}