Effect Frontend Patterns

Effect TypeScript for Frontend

Effect is the missing standard library for TypeScript. Use it for type-safe error handling, validation, and data fetching in frontend applications.

Documentation

Before implementing, consult:

• AI Documentation: https://effect.website/llms.txt
• Main Docs: https://effect.website/docs

Use Context7:

resolve_library_id({ libraryName: "effect typescript" })
get_library_docs({ context7CompatibleLibraryID: "/effect-ts/effect", topic: "schema validation" })

Effect Schema (Replaces Zod)

import { Schema } from "effect"

// Define schemas
const UserSchema = Schema.Struct({
  id: Schema.String,
  name: Schema.String.pipe(Schema.minLength(1), Schema.maxLength(100)),
  email: Schema.String.pipe(Schema.pattern(/^[^@]+@[^@]+\.[^@]+$/)),
  role: Schema.Literal("admin", "user", "guest"),
  createdAt: Schema.Date,
})
type User = Schema.Schema.Type<typeof UserSchema>

// Form validation schema
const CreateUserSchema = Schema.Struct({
  name: Schema.String.pipe(Schema.minLength(1), Schema.maxLength(100)),
  email: Schema.String.pipe(Schema.pattern(/^[^@]+@[^@]+\.[^@]+$/)),
  password: Schema.String.pipe(Schema.minLength(8)),
})

// Validate unknown data
const parseUser = Schema.decodeUnknown(UserSchema)

Effect + TanStack Query

import { Effect, Schema } from "effect"
import { useQuery, useMutation } from "@tanstack/react-query"

// Type-safe API error
class ApiError extends Schema.TaggedError<ApiError>("ApiError")({
  message: Schema.String,
  statusCode: Schema.Number,
}) {}

// Effect-powered fetch with validation
const fetchUsers = Effect.tryPromise({
  try: () => fetch("/api/users").then((r) => r.json()),
  catch: () => new ApiError({ message: "Network error", statusCode: 500 }),
}).pipe(
  Effect.flatMap(Schema.decodeUnknown(Schema.Array(UserSchema))),
  Effect.catchTag("ParseError", (e) => 
    Effect.fail(new ApiError({ message: "Invalid response", statusCode: 422 }))
  )
)

// React hook
function useUsers() {
  return useQuery({
    queryKey: ["users"],
    queryFn: () => Effect.runPromise(fetchUsers),
  })
}

// Mutation with Effect
function useCreateUser() {
  return useMutation({
    mutationFn: (data: typeof CreateUserSchema.Type) =>
      Effect.runPromise(
        Effect.tryPromise({
          try: () => fetch("/api/users", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data),
          }).then((r) => r.json()),
          catch: () => new ApiError({ message: "Failed to create user", statusCode: 500 }),
        }).pipe(Effect.flatMap(Schema.decodeUnknown(UserSchema)))
      ),
  })
}

React Hook Form + Effect Schema

import { useForm } from "react-hook-form"
import { effectTsResolver } from "@hookform/resolvers/effect-ts"
import { Schema } from "effect"

function CreateUserForm() {
  const form = useForm({
    resolver: effectTsResolver(CreateUserSchema),
    defaultValues: { name: "", email: "", password: "" },
  })

  return (
    <Form {...form}>
      <FormField
        control={form.control}
        name="name"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Name</FormLabel>
            <FormControl>
              <Input {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
      {/* ... other fields */}
    </Form>
  )
}

WebSocket with Effect Stream

import { Effect, Stream, Schema, Fiber } from "effect"

// Define message schema
const NotificationSchema = Schema.Struct({
  id: Schema.String,
  type: Schema.Literal("info", "warning", "error"),
  message: Schema.String,
  timestamp: Schema.Date,
})

// Create WebSocket stream
const notificationStream = Stream.async<typeof NotificationSchema.Type, Error>((emit) => {
  const ws = new WebSocket("/api/ws/notifications")
  
  ws.onmessage = (event) => {
    const result = Schema.decodeUnknownSync(NotificationSchema)(JSON.parse(event.data))
    emit.single(result)
  }
  
  ws.onerror = () => emit.fail(new Error("WebSocket connection failed"))
  ws.onclose = () => emit.end()
  
  return Effect.sync(() => ws.close())
})

// React hook
function useNotificationStream(onNotification: (n: Notification) => void) {
  useEffect(() => {
    const fiber = Effect.runFork(
      Stream.runForEach(notificationStream, (notification) =>
        Effect.sync(() => onNotification(notification))
      )
    )
    return () => Effect.runSync(Fiber.interrupt(fiber))
  }, [onNotification])
}

Context7 Topics to Query

get_library_docs({ context7CompatibleLibraryID: "/effect-ts/effect", topic: "schema validation" })
get_library_docs({ context7CompatibleLibraryID: "/effect-ts/effect", topic: "error handling tagged errors" })
get_library_docs({ context7CompatibleLibraryID: "/effect-ts/effect", topic: "stream async" })

PRD → Component Mapping