effect-fc/packages/docs/docs/intro.md

sidebar_position

sidebar_position
1

Effect FC

Welcome to Effect FC (as in: Effect Function Component) – a powerful integration of Effect with React 19.2+ that enables you to write React function components using Effect generators.

What is Effect FC?

Effect FC allows you to harness the full power of Effect-TS within your React components. Instead of writing traditional React hooks, you can use Effect generators to compose complex, type-safe component logic with built-in error handling, resource management, and dependency injection.

Key Features

• Effect Integration: Write your function component logic using Effect.
• Type Safety: Full TypeScript support with Effect's comprehensive type system
• Dependency Injection: Built-in support for providing dependencies to components using Effect services.
• Resource Management: Automatic cleanup and finalization of component resources using the Scope API.

Quick Example

Here's what writing an Effect FC component looks like:

export class TodosView extends Component.make("TodosView")(function*() {
    const state = yield* TodosState
    const [todos] = yield* Component.useSubscribables([state.subscriptionRef])

    yield* Component.useOnMount(() => Effect.andThen(
        Console.log("Todos mounted"),
        Effect.addFinalizer(() => Console.log("Todos unmounted")),
    ))

    const Todo = yield* TodoView.use

    return (
        <Container>
            <Heading align="center">Todos</Heading>

            <Flex direction="column" align="stretch" gap="2" mt="2">
                <Todo _tag="new" />

                {Chunk.map(todos, todo =>
                    <Todo key={todo.id} _tag="edit" id={todo.id} />
                )}
            </Flex>
        </Container>
    )
}) {}

Getting Started

Prerequisites

Before using Effect FC, make sure you have:

• Node.js version 20.0 or above
• React 19.2 or higher
• Effect 3.19 or higher

Installation

Install Effect FC and its peer dependencies:

npm install effect-fc effect react

Or with your preferred package manager:

yarn add effect-fc effect react
bun add effect-fc effect react
pnpm add effect-fc effect react

Next Steps

• Explore the Tutorial Basics to learn the fundamentals
• Check out the Example Project for a complete working application
• Read the API Documentation for detailed reference

Important Notes

:::info Early Development This library is in early development. While it is mostly feature-complete and usable, expect bugs and quirks. Things are still being ironed out, so ideas and criticisms are welcome! :::

:::warning Known Issues

• React Refresh doesn't work for Effect FC components yet. Page reload is required to view changes. Regular React components are unaffected. :::

Community & Support

Have questions or want to contribute? We'd love to hear from you! Check out the project repository and feel free to open issues or discussions.