Rules
no-misused-capture-owner-stack
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
🧪
Description
Prevents incorrect usage of captureOwnerStack.
The captureOwnerStack is only available in development builds of React and must be:
- Imported via namespace to avoid direct named imports.
- Conditionally accessed within an
if (process.env.NODE_ENV !== 'production') {...}block to prevent execution in production environments. - The call of
captureOwnerStackhappened inside of a React controlled function (not implemented yet).
Examples
Failing
// Failing: Using 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);
}// 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);Passing
// 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);
}