effector-react/scope

Provides all exports from effector-react, but enforces application to use Scope for all components.

Usage

You can use this module in the same way as effector-react, but it will require passing Scope to Provider component.

// main.js
import { fork } from "effector";
import { Provider } from "effector-react/scope";
import React from "react";
import ReactDOM from "react-dom/client";

const scope = fork();

ReactDOM.createRoot(document.getElementById("root")).render(
  <Provider value={scope}>
    <Application />
  </Provider>,
);

Migration

Since effector-react/scope is deprecated, it is better to migrate to effector-react by removing scope from import path.

+ import { Provider } from "effector-react";
- import { Provider } from "effector-react/scope";

If you use Babel, you need to remove parameter reactSsr from babel-plugin configuration.

{
  "plugins": [
    [
      "effector/babel-plugin",
      {
-        "reactSsr": true
      }
    ]
  ]
}

If you use SWC, you need to remove bindings.react.scopeReplace parameter from @effector/swc-plugin configuration.

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "experimental": {
      "plugins": [
        "@effector/swc-plugin",
        {
          "bindings": {
            "react": {
-             "scopeReplace": true
            }
          }
        }
      ]
    }
  }
}

Scope enforcement

All modern hooks of effector-react are designed to work with Scope. If you want to imitate the behavior of effector-react/scope module, you can second parameter of hooks with an option forceScope: true. In this case, the hook will throw an error if the Scope is not passed to Provider.

- import { useUnit } from 'effector-react/scope'
+ import { useUnit } from 'effector-react'


function MyComponent() {
-  const { test } = useUnit({ text: $text })
+  const { test } = useUnit({ text: $text }, { forceScope: true })

  return <p>{text}</p>
}