React Unforget is a Babel plugin. To use it, you need to install it and add it to your Babel configuration.

npm install --save-dev @react-unforget/babel-plugin

You also need to install @react-unforget/runtime as a dependency:

npm install @react-unforget/runtime

Then, add it to your Babel configuration. For example, in your .babelrc:

{
  "plugins": [["@react-unforget/babel-plugin", { /* options */ }]]
}

Usage with bundlers

With Webpack

If you are using webpack, and babel-loader is not using a .babelrc file, you can add the plugin to your webpack configuration:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: [["@react-unforget/babel-plugin", { /* options */ }]],
          },
        },
      },
    ],
  },
};

With Vite

If you are using Vite and @vitejs/plugin-react, you can add the babel plugin to your vite.config.js:

plugins: [
  react({
    babel: {
      plugins: [["@react-unforget/babel-plugin", { /* options */ }]],
    },
  }),
]

Options

The babel plugin accepts a few options:

• throwOnFailure (default: false): If true, the plugin will throw an error if it fails to analyze the component / hook.
• skipComponents (default: []): An array of component names to skip. For example, ["MyComponent"].
• skipComponentsWithMutation (default: false): If true, the plugin will skip components that have variables that are mutated e.g. array.push() or variable re-assignment. This is configurable because despite thorough testing, we are still not 100% sure that this is safe to do in all cases.