effect-react-composition

React Composition Skill

Build React UIs using compositional patterns, Effect Atom for state management, and the component module pattern. Use this skill when creating React applications that integrate with Effect's ecosystem.

Effect Source Reference

The Effect v4 source is available at ~/.cache/effect-v4/. Browse and read files there directly to look up APIs, types, and implementations.

Reference this for:

• Atom reactivity: packages/effect/src/unstable/reactivity/
• AsyncResult source: packages/effect/src/unstable/reactivity/AsyncResult.ts
• Effect source: packages/effect/src/

When to Use This Skill

• Building React components that integrate with Effect Atom state
• Refactoring components away from boolean prop anti-patterns
• Implementing complex UIs through composition of simple pieces
• Creating reusable component libraries with flexible APIs
• Managing shared state across multiple React components
• Lifting state to appropriate levels in component trees

Core Principles

1. Composition over Configuration

Build complex UIs from simple, composable pieces rather than configuring behavior through props.

Anti-Pattern: Boolean Props

// L WRONG - Configuration through boolean props
interface FormProps {
	isUpdate?: boolean;
	hideWelcome?: boolean;
	showEmail?: boolean;
	redirectOnSuccess?: boolean;
	enableValidation?: boolean;
}

function UserForm({
	isUpdate,
	hideWelcome,
	showEmail,
	redirectOnSuccess,
	enableValidation
}: FormProps) {
	return (
		<form>
			{!hideWelcome && <WelcomeMessage />}
			<NameField />
			{showEmail && <EmailField />}
			<button type="submit">{isUpdate ? 'Update' : 'Create'}</button>
		</form>
	);
}

// Usage becomes unreadable
<UserForm isUpdate hideWelcome showEmail redirectOnSuccess />;

Correct Pattern: Composition

//  CORRECT - Compose specific forms from atomic pieces
export namespace UserForm {
	export const Frame: React.FC<{ children: React.ReactNode }> = ({
		children
	}) => <form className="user-form">{children}</form>;

	export const WelcomeMessage: React.FC = () => (
		<div className="welcome">Welcome!</div>
	);

	export const NameField: React.FC = () => (
		<input name="name" placeholder="Name" />
	);

	export const EmailField: React.FC = () => (
		<input type="email" name="email" placeholder="Email" />
	);

	export const SubmitButton: React.FC<{ children: React.ReactNode }> = ({
		children
	}) => <button type="submit">{children}</button>;
}

// Create specific forms through composition
function CreateUserForm() {
	return (
		<UserForm.Frame>
			<UserForm.WelcomeMessage />
			<UserForm.NameField />
			<UserForm.EmailField />
			<UserForm.SubmitButton>Create</UserForm.SubmitButton>
		</UserForm.Frame>
	);
}

function UpdateUserForm() {
	return (
		<UserForm.Frame>
			<UserForm.NameField />
			<UserForm.SubmitButton>Update</UserForm.SubmitButton>
		</UserForm.Frame>
	);
}

// Usage is clear and explicit (in JSX context):
// <CreateUserForm />
// <UpdateUserForm />