diff --git a/apps/website/docs/factories/index.md b/apps/website/docs/factories/index.md index 9bfa292b..5708228b 100644 --- a/apps/website/docs/factories/index.md +++ b/apps/website/docs/factories/index.md @@ -99,14 +99,61 @@ const createCounter = createFactory(({ initialValue }) => { Anywhere in your application you can invoke a factory by calling `invoke` with a factory and its arguments: +::: warning +You have to invoke factories only in the top-level of your application. It means that you **must not** invoke it during component rendering or in any other place that can be called multiple times. Otherwise, you will get a memory leak. + +This limitation is applied to any factory, not only to factories created with `@withease/factories`. +::: + ```ts import { invoke } from '@withease/factories'; -const counter = invoke(createCounter, { initialValue: 2 }); +const { $counter, increment, decrement } = invoke(createCounter, { + initialValue: 2, +}); ``` -::: warning -You have to invoke factories only in the top-level of your application. It means that you **must not** invoke it during component rendering or in any other place that can be called multiple times. Otherwise, you will get a memory leak. +Now we can use `$counter`, `increment`, and `decrement` in our components. Here is how you might use them in different UI frameworks: + +::: details Example usage in React + +```jsx +import { useUnit } from 'effector-react'; +import { $counter, increment, decrement } from './model'; // assuming you've invoked your factory in `model.js`/`model.ts` + +const CounterComponent = () => { + const counter = useUnit($counter); + const [onIncrement, onDecrement] = useUnit(increment, decrement); + + return ( +
Counter: {counter}
+ + +Counter: {{ counter }}
+ + +