{"id":10779,"library":"effector-react","title":"Effector React Bindings","description":"effector-react provides the official React bindings for the effector state management library, allowing developers to seamlessly integrate effector's reactive, event-driven state model with their React applications. The current stable version is 23.3.0, frequently updated in parallel with the core effector library. Its key differentiators include a declarative, algebraic effects paradigm for managing complex application logic, which promotes clear separation of concerns between business logic and UI. It offers optimized React hooks, notably useUnit, for consuming effector stores, events, and effects, ensuring efficient component re-renders and simplified access to application state and actions. The library also boasts strong TypeScript support and recently added compatibility for React 19.","status":"active","version":"23.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/effector/effector","tags":["javascript","react","hooks","business","logic","data","flow","state management","state manager","typescript"],"install":[{"cmd":"npm install effector-react","lang":"bash","label":"npm"},{"cmd":"yarn add effector-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add effector-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to use effector hooks and components within a React application.","package":"react","optional":false},{"reason":"The core state management library that effector-react binds to; essential for creating stores, events, and effects.","package":"effector","optional":false}],"imports":[{"note":"Primary hook for consuming effector units (stores, events, effects) in functional components. ESM-only in modern Effector versions.","wrong":"const useUnit = require('effector-react')","symbol":"useUnit","correct":"import { useUnit } from 'effector-react'"},{"note":"Creates a 'Gate' unit for managing component lifecycle and props, useful for server-side rendering or complex component interactions.","wrong":"const createGate = require('effector-react')","symbol":"createGate","correct":"import { createGate } from 'effector-react'"},{"note":"Deprecated in favor of `useUnit` for most cases, but still available for consuming single stores directly. It is a named export, not default.","wrong":"import useStore from 'effector-react'","symbol":"useStore","correct":"import { useStore } from 'effector-react'"}],"quickstart":{"code":"import { createStore, createEvent } from 'effector';\nimport { useUnit } from 'effector-react';\nimport React from 'react'; // Assuming React is imported for JSX\n\nconst inputText = createEvent<string>();\n\nconst $text = createStore<string>('').on(inputText, (_, text) => text);\n\nconst $size = $text.map(text => text.length);\n\nconst Form = () => {\n  const { text, size } = useUnit({\n    text: $text,\n    size: $size,\n  });\n  const handleTextChange = useUnit(inputText);\n\n  return (\n    <form>\n      <label htmlFor=\"text-input\">Enter text:</label>\n      <input\n        id=\"text-input\"\n        type=\"text\"\n        onChange={e => handleTextChange(e.currentTarget.value)}\n        value={text}\n        aria-label=\"Text input for form\"\n      />\n      <p>Length: {size}</p>\n    </form>\n  );\n};\n\n// To render this component (e.g., in App.js or index.js):\n// import ReactDOM from 'react-dom/client';\n// const root = ReactDOM.createRoot(document.getElementById('root'));\n// root.render(<Form />);","lang":"typescript","description":"Demonstrates how to create an Effector store and event, then consume them in a React functional component using the `useUnit` hook to manage form input state and display its length."},"warnings":[{"fix":"Migrate your project to use ES modules (`import ... from '...'`) and configure your build system (Webpack, Rollup, Vite, etc.) to handle them correctly. Ensure your `package.json` has `\"type\": \"module\"` or uses `.mjs` extensions for ESM files.","message":"Older CommonJS `require()` imports are no longer officially supported for `effector` and its ecosystem, including `effector-react`, in recent major versions. Modern applications should use ES module `import` syntax.","severity":"breaking","affected_versions":">=22.0.0"},{"fix":"Install `@effector/babel-plugin` (or the equivalent SWC plugin) and configure it in your project's `babel.config.js` or `swc-config` file. Refer to the official Effector documentation for detailed setup instructions.","message":"Effector's core library (and by extension `effector-react`) relies heavily on a Babel/SWC plugin for optimal development experience, including Hot Module Replacement (HMR), improved error messages, and better debugging. Without it, some advanced features or ergonomics might be limited.","severity":"gotcha","affected_versions":">=23.0.0"},{"fix":"Verify your `package.json` for `react` and `effector` and ensure they fall within the specified peer dependency ranges. Use `npm install` or `yarn add` to adjust versions if necessary. `npm ls react effector` can help diagnose issues.","message":"Ensure `react` and `effector` peer dependency versions are compatible. `effector-react` 23.3.0 specifically requires `react` `>=16.8.0 <20.0.0` and `effector` `^23.0.0`. Mismatched versions can lead to runtime errors or unexpected behavior.","severity":"gotcha","affected_versions":">=23.0.0"},{"fix":"Prefer `useUnit` when consuming effector stores, events, or effects. For example, instead of `const value = useStore($store);`, consider `const { value } = useUnit({ value: $store });`.","message":"The `useStore` hook is largely superseded by `useUnit` for consuming effector units. While still functional for single stores, `useUnit` offers a more powerful and flexible API for combining multiple units and actions.","severity":"deprecated","affected_versions":">=22.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `effector-react` hooks are only invoked within the render function of a React functional component or at the top level of another custom hook. Check for conditional hook calls or calls within regular JavaScript functions.","cause":"Attempting to call an `effector-react` hook (like `useUnit`, `useStore`, `createGate`) outside of a React functional component or a custom hook.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Verify that you are using ES module imports (`import ... from '...'`) throughout your Effector codebase. Ensure the `@effector/babel-plugin` (or SWC equivalent) is correctly installed and configured in your build setup, especially if using HMR or hot reloading. Update to the latest `effector` and `effector-react` versions.","cause":"This error often indicates an issue with Effector units losing their identity or being incorrectly passed, frequently seen with old CommonJS `require()` imports or issues with the Babel/SWC plugin's SID generation.","error":"Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'sid')"},{"fix":"Check your import statement: `import { useUnit } from 'effector-react'`. Confirm `effector-react` is correctly installed. Ensure your build tool (Webpack, Babel, etc.) is configured to handle ES Modules from `node_modules` correctly, especially if you have custom aliases or transformations.","cause":"This typically means `useUnit` was not correctly imported or the module resolution failed. This can happen with incorrect build configurations, version mismatches, or CJS/ESM interop issues.","error":"TypeError: (0 , effector_react__WEBPACK_IMPORTED_MODULE_1__.useUnit) is not a function"}],"ecosystem":"npm"}