You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/rules/mandatory-scope-binding/mandatory-scope-binding.md
+23-4Lines changed: 23 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,21 +4,40 @@ description: Forbid Event and Effect usage without useUnit in React components
4
4
5
5
# effector/mandatory-scope-binding
6
6
7
-
Forbids `Event` and `Effect` usage without `useUnit` in React components.
8
-
This ensures `Fork API` compatibility and allows writing isomorphic code for SSR apps.
7
+
Forbids `EventCallable` and `Effect` usage without `useUnit` in React. This ensures `Fork API` compatibility for easy testing via `fork()` and running isomorphic code in SSR/SSG apps.
9
8
10
9
```tsx
11
10
const increment =createEvent()
12
11
13
12
// 👍 Event usage is wrapped with `useUnit`
14
13
const GoodButton = () => {
15
-
constincrementEvent=useUnit(increment)
14
+
constonClick=useUnit(increment)
16
15
17
-
return <buttononClick={incrementEvent}>+</button>
16
+
return <buttononClick={onClick/* bound to Scope */}>+</button>
18
17
}
19
18
20
19
// 👎 Event is not wrapped with `useUnit` - component is not suitable for isomorphic SSR app
21
20
const BadButton = () => {
22
21
return <buttononClick={increment}>+</button>
23
22
}
24
23
```
24
+
25
+
This rule doesn't enforce using a `Scope` by itself – your app will run scopeless unless configured. However, when you do, `mandatory-scope-binding` rule ensures no additional work needed to ensure `Scope` is not lost.
26
+
27
+
### Custom Hooks and Components
28
+
29
+
You don't need `useUnit` everywhere – passing a unit straight to a custom `effector` aware hook or component whose signature openly declares a unit-typed parameter is fine. It is assumed the receiver takes responsibility of binding event to `Scope` via `useUnit`.
// 👍 PressButton's `event` is typed as a Unit – just pass it in, no issue
36
+
const Page = () => <PressButtonevent={pressed} />
37
+
```
38
+
39
+
::: warning Receiver Type Guarantee
40
+
A receiver declared as plain `() => void` does not count – TypeScript accepts the unit structurally, but the consumer hasn't promised to bind it to `Scope`.
41
+
42
+
Either explicitly type the parameter as a Unit (`EventCallable` / `Effect`) and opt-in to provide this guarantee, or wrap with `useUnit` at the call site.
0 commit comments