Rules
no-misused-capture-owner-stack
This rule is experimental and may change in the future or be removed. It is not recommended to use it 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
🧪
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);
}