react-recursion-protect-plugin

Babel plugin to detect infinite recursion in React components.

Why?

React components can cause infinite recursion if they render themselves. For example:

function MyComponent() {
  return <MyComponent />
}

This plugin detects infinite recursion and replaces the recursive call with an error-throwing statement. For example:

function MyComponent() {
  throw new Error("Infinite recursion detected. <MyComponent /> component renders itself.");
}

The react-recursion-protect-plugin is a specialized Babel plugin crafted for enhancing the security and stability of JavaScript code within sandbox environments, especially when users submit React code. The primary objective is to detect and address scenarios where a React component inadvertently invokes React.createElement with its own name, potentially leading to unintended infinite recursion. This is particularly crucial in sandbox environments where user-generated code is executed, and preventing infinite loops is essential.

Key Features

1. Recursion Detection for React Components

The plugin meticulously identifies instances where a React component invokes React.createElement with its own name, indicating a recursive call. This feature is especially useful in sandbox environments where user-submitted React code can inadvertently create infinite loops.

2. Error Handling for Recursive Calls

Detected recursive calls within React components are intelligently replaced with an error-throwing statement. This strategy prevents the execution of the recursive loop and provides a clear error message to the developer, facilitating quick identification and resolution of the issue.

Installation

npm install --save-dev react-recursion-protect-plugin

Usage

To use the plugin in your Babel configuration, add it to the plugins array:

{
  "plugins": ["react-recursion-protect-plugin"]
}

For sandbox environments, you can use the plugin with babel-standalone:

const babel = require("@babel/standalone");
const recursionProtectPlugin = require("react-recursion-protect-plugin");

const code = `
function MyComponent() {
  return <MyComponent />
}
`;

const transformedCode = babel.transform(code, {
  plugins: [recursionProtectPlugin]
}).code;

this will transform the code to:

function MyComponent() {
  throw new Error("Infinite recursion detected. <MyComponent /> component renders itself.");
}

Contributors

• Author: Yasin Kansu

License

MIT / http://opensource.org/licenses/MIT