muebleria-react

React 19.2.1 | TypeScript | React Hooks
No useMemo/useCallback (React Compiler handles)

// src/components/ui/ComponentName.tsx
import { useState, useEffect } from 'react';

interface ComponentNameProps {
  title: string;
  onAction: () => void;
}

export function ComponentName({ title, onAction }: ComponentNameProps) {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // Side effects
  }, []);
  
  return <div>{title}</div>;
}

import { useState, useEffect } from 'react';

export function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    fetch('http://localhost:5000/api/productos')
      .then(res => res.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);
  
  if (loading) return <div>Cargando...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return (
    <div>
      {products.map(p => <ProductCard key={p.id} {...p} />)}
    </div>
  );
}

import { useState } from 'react';

export function ProductForm() {
  const [formData, setFormData] = useState({
    nombre: '',
    precio: 0,
    material: ''
  });
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    const response = await fetch('http://localhost:5000/api/productos', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });
    
    if (response.ok) {
      alert('Producto creado');
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={formData.nombre}
        onChange={e => setFormData({...formData, nombre: e.target.value})}
      />
      <button type="submit">Crear</button>
    </form>
  );
}

// ❌ OLD (React 18)
const filtered = useMemo(() => {
  return items.filter(i => i.active);
}, [items]);

// ✅ NEW (React 19)
const filtered = items.filter(i => i.active);
// Compiler memoizes automatically

// Client component
"use client";
import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// State
const [value, setValue] = useState(initialValue);

// Side effects
useEffect(() => {
  // Runs after render
  return () => {
    // Cleanup
  };
}, [dependencies]);

// Refs
const inputRef = useRef<HTMLInputElement>(null);

// Context
const theme = useContext(ThemeContext);

// Props interface
interface ProductCardProps {
  id: number;
  nombre: string;
  precio: number;
  onSelect?: (id: number) => void;
}

// State with type
const [product, setProduct] = useState<Product | null>(null);

// Event handlers
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  console.log(e.currentTarget);
};

# No specific React commands (handled by Astro/npm)
npm run dev    # Starts dev server with React support