@@ -271,11 +271,15 @@ const initialData = yield* Component.useOnMount(() => loadInitialData)
|
|||||||
const label = yield* Component.useOnChange(() => formatUserLabel(id), [id])
|
const label = yield* Component.useOnChange(() => formatUserLabel(id), [id])
|
||||||
```
|
```
|
||||||
|
|
||||||
- `Component.useReactEffect`: Effect-powered `React.useEffect` with scoped
|
- `Component.useReactEffect`: Effect-powered `React.useEffect` for side effects
|
||||||
finalizers.
|
that do not need to compute render output or trigger a re-render. The Effect
|
||||||
|
must be synchronous and can register scoped finalizers.
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
yield* Component.useReactEffect(() => subscribe(id), [id])
|
yield* Component.useReactEffect(
|
||||||
|
() => Effect.forkScoped(subscribeToUser(id)),
|
||||||
|
[id],
|
||||||
|
)
|
||||||
```
|
```
|
||||||
|
|
||||||
- `Component.useReactLayoutEffect`: Effect-powered `React.useLayoutEffect` with scoped
|
- `Component.useReactLayoutEffect`: Effect-powered `React.useLayoutEffect` with scoped
|
||||||
@@ -310,13 +314,6 @@ const save = yield* Component.useCallbackPromise(
|
|||||||
return <button onClick={() => void save(user)}>Save</button>
|
return <button onClick={() => void save(user)}>Save</button>
|
||||||
```
|
```
|
||||||
|
|
||||||
- `Component.useContextFromLayer`: create a React runtime context from an Effect
|
|
||||||
`Layer`.
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
yield* Component.useContextFromLayer(UserLive)
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use React Normally
|
## Use React Normally
|
||||||
|
|
||||||
An Effect-FC component is still a React function component. Anything you can do
|
An Effect-FC component is still a React function component. Anything you can do
|
||||||
@@ -360,11 +357,11 @@ const GreetingView = Component.make("Greeting")(function* (props: {
|
|||||||
```
|
```
|
||||||
|
|
||||||
Service values in the runtime context are reactive by default. If a provided
|
Service values in the runtime context are reactive by default. If a provided
|
||||||
service instance changes, Effect-FC recreates the React component function for
|
service instance changes, Effect-FC unmounts and mounts again the components
|
||||||
components that depend on that context, so the component reads the new service
|
that depend on that context, so they read the new service and restart their
|
||||||
and its scoped lifecycle can restart with the new environment. For services that
|
scoped lifecycle with the new environment. For services that should not trigger
|
||||||
should not trigger that behavior, pass their tags with `Component.withOptions({
|
that behavior, pass their tags with `Component.withOptions({ nonReactiveTags:
|
||||||
nonReactiveTags: [...] })`.
|
[...] })`.
|
||||||
|
|
||||||
## Provide Services To A Subtree
|
## Provide Services To A Subtree
|
||||||
|
|
||||||
@@ -395,6 +392,11 @@ is created on every render, Effect-FC has to build a new context, which can
|
|||||||
cause unnecessary re-renders and scoped lifecycle restarts. Define static layers
|
cause unnecessary re-renders and scoped lifecycle restarts. Define static layers
|
||||||
outside the component, or memoize layers that depend on React props or state.
|
outside the component, or memoize layers that depend on React props or state.
|
||||||
|
|
||||||
|
Layers built with `useContextFromLayer` are scoped to the component that builds
|
||||||
|
them. That means service construction can register scoped logic, acquire
|
||||||
|
resources, fork scoped fibers, and add finalizers that are tied to that
|
||||||
|
component's lifecycle.
|
||||||
|
|
||||||
## Where To Go Next
|
## Where To Go Next
|
||||||
|
|
||||||
Once the runtime and component boundary are in place, the rest of the library
|
Once the runtime and component boundary are in place, the rest of the library
|
||||||
|
|||||||
Reference in New Issue
Block a user