tomevault-io React
Quick Start
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button => setCount(c => c + 1)}>
Count: {count}
</button>
);
}
Features
| Feature | Description | Guide |
|---|---|---|
| Hooks | useState, useEffect, custom hooks | HOOKS.md |
| TypeScript | Props, state, event typing | TYPESCRIPT.md |
| State | Zustand, Context, useReducer | STATE.md |
| Forms | React Hook Form, Zod validation | FORMS.md |
| Testing | Vitest, Testing Library | TESTING.md |
| Performance | memo, useMemo, useCallback, Suspense | PERFORMANCE.md |
Common Patterns
Typed Component with Props
interface UserCardProps {
user: { id: string; name: string; email: string };
onEdit: (user: UserCardProps['user']) => void;
onDelete: (id: string) => void;
}
function UserCard({ user, onEdit, onDelete }: UserCardProps) {
return (
<div className="user-card">
<h3>{user.name}</h3>
<p>{user.email}</p>
<button => onEdit(user)}>Edit</button>
<button => onDelete(user.id)}>Delete</button>
</div>
);
}
Custom Hook for Data Fetching
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
let cancelled = false;
async function fetchData() {
try {
const res = await fetch(url);
const json = await res.json();
if (!cancelled) setData(json);
} catch (e) {
if (!cancelled) setError(e as Error);
} finally {
if (!cancelled) setLoading(false);
}
}
fetchData();
return () => { cancelled = true; };
}, [url]);
return { data, loading, error };
}
Form with Validation
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
const schema = z.object({
email: z.string().email(),
password: z.string().min(8),
});
function LoginForm() {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: zodResolver(schema),
});
const z.infer<typeof schema>) => {
console.log(data);
};
return (
<form
<input {...register('email')} />
{errors.email && <span>{errors.email.message}</span>}
<input {...register('password')} type="password" />
{errors.password && <span>{errors.password.message}</span>}
<button type="submit">Login</button>
</form>
);
}
Workflows
Component Development
- Define props interface with TypeScript
- Create component with hooks
- Extract reusable logic to custom hooks
- Add error boundaries for fault isolation
- Write tests with Testing Library
State Management Decision
Local state only -> useState
Complex local state -> useReducer
Shared across tree -> Context + useReducer
App-wide state -> Zustand/Redux
Server state -> TanStack Query
Best Practices
| Do | Avoid |
|---|---|
| Use functional components | Class components |
| Extract custom hooks | Duplicating effect logic |
| Memoize expensive computations | Premature optimization |
| Handle loading/error states | Assuming success |
| Use keys for lists | Index as key for dynamic lists |
Project Structure
src/
├── App.tsx
├── main.tsx
├── components/ # Reusable UI components
├── hooks/ # Custom hooks
├── pages/ # Route components
├── stores/ # State management
├── services/ # API calls
├── utils/ # Helper functions
└── types/ # TypeScript types
For detailed examples and patterns, see reference files above.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.