form.setValue('message', e.target.value)}
        />
      </div>

<button type="submit" disabled={form.isSubmitting}>
        {form.isSubmitting ? 'Sending...' : 'Send Message'}
      </button>

{form.errors.submit && (
        <div className="error">Error: {form.errors.submit}</div>
      )}
    </form>
  );
}
```

### **Advanced Form with Validation**

```tsx
function UserRegistrationForm() {
  const form = useFXForm(
    {
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
      acceptTerms: false
    },
    {
      fxPath: 'forms.registration',
      validate: async (values) => {
        const errors = {};

// Username validation
        if (!values.username) {
          errors.username = 'Username is required';
        } else if (values.username.length < 3) {
          errors.username = 'Username must be at least 3 characters';
        }

// Email validation
        if (!values.email) {
          errors.email = 'Email is required';
        } else if (!/\S+@\S+\.\S+/.test(values.email)) {
          errors.email = 'Email is invalid';
        } else {
          // Check if email exists (async validation)
          try {
            const response = await fetch('/api/check-email', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ email: values.email })
            });
            const data = await response.json();
            if (data.exists) {
              errors.email = 'Email already exists';
            }
          } catch (err) {
            // Handle validation error
          }
        }

// Password validation
        if (!values.password) {
          errors.password = 'Password is required';
        } else if (values.password.length < 8) {
          errors.password = 'Password must be at least 8 characters';
        }

// Confirm password
        if (values.password !== values.confirmPassword) {
          errors.confirmPassword = 'Passwords do not match';
        }

// Terms acceptance
        if (!values.acceptTerms) {
          errors.acceptTerms = 'You must accept the terms';
        }

return errors;
      },
      onSubmit: async (values) => {
        const { confirmPassword, ...submitData } = values;

const response = await fetch('/api/register', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(submitData)
        });

if (!response.ok) {
          const error = await response.json();
          throw new Error(error.message);
        }

// Registration successful
        const user = await response.json();
        $$('user.current').set(user);
        $$('auth.isLoggedIn').set(true);
      }
    }
  );

return (
    <form onSubmit={form.handleSubmit} className="registration-form">
      <h2>Create Account</h2>

<div className="form-group">
        <input
          type="text"
          placeholder="Username"
          value={form.values.username}
          onChange={(e) => form.setValue('username', e.target.value)}
          className={form.errors.username ? 'error' : ''}
        />
        {form.errors.username && <span className="error-text">{form.errors.username}</span>}
      </div>

<div className="form-group">
        <input
          type="email"
          placeholder="Email"
          value={form.values.email}
          onChange={(e) => form.setValue('email', e.target.value)}
          className={form.errors.email ? 'error' : ''}
        />
        {form.errors.email && <span className="error-text">{form.errors.email}</span>}
      </div>

<div className="form-group">
        <input
          type="password"
          placeholder="Password"
          value={form.values.password}
          onChange={(e) => form.setValue('password', e.target.value)}
          className={form.errors.password ? 'error' : ''}
        />
        {form.errors.password && <span className="error-text">{form.errors.password}</span>}
      </div>

<div className="form-group">
        <input
          type="password"
          placeholder="Confirm Password"
          value={form.values.confirmPassword}
          onChange={(e) => form.setValue('confirmPassword', e.target.value)}
          className={form.errors.confirmPassword ? 'error' : ''}
        />
        {form.errors.confirmPassword && <span className="error-text">{form.errors.confirmPassword}</span>}
      </div>

<div className="form-group">
        <label className="checkbox-label">
          <input
            type="checkbox"
            checked={form.values.acceptTerms}
            onChange={(e) => form.setValue('acceptTerms', e.target.checked)}
          />
          I accept the <a href="/terms" target="_blank">Terms of Service</a>
        </label>
        {form.errors.acceptTerms && <span className="error-text">{form.errors.acceptTerms}</span>}
      </div>

<button
        type="submit"
        disabled={form.isSubmitting}
        className={`submit-btn ${form.isSubmitting ? 'loading' : ''}`}
      >
        {form.isSubmitting ? 'Creating Account...' : 'Create Account'}
      </button>

{form.errors.submit && (
        <div className="form-error">
          Registration failed: {form.errors.submit}
        </div>
      )}
    </form>
  );
}
```

---

## < **API Integration with useFXAPI**

### **Basic API Hook**

```tsx
const { data, loading, error } = useFXAPI(url, options)
```

**Options:**

| Option | Type | Description |
|--------|------|-------------|
| `method` | `string` | HTTP method (GET, POST, etc.) |
| `body` | `any` | Request body |
| `headers` | `object` | Request headers |
| `dependencies` | `array` | Re-fetch when dependencies change |

### **GET Request Examples**

```tsx
function UserList() {
  // Simple GET request
  const { data: users, loading, error } = useFXAPI('/api/users');

if (loading) return <div>Loading users...</div>;
  if (error) return <div>Error: {error.message}</div>;

return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
}

function UserDetails() {
  const currentUserId = useFX('ui.selectedUserId');

// Re-fetch when user ID changes
  const { data: user, loading, error } = useFXAPI(`/api/users/${currentUserId}`, {
    dependencies: [currentUserId]
  });

if (!currentUserId) return <div>Select a user to view details</div>;
  if (loading) return <div>Loading user details...</div>;
  if (error) return <div>Error loading user: {error.message}</div>;

return (
    <div className="user-details">
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Joined: {new Date(user.createdAt).toLocaleDateString()}</p>
    </div>
  );
}
```

### **POST Request Examples**

```tsx
function CreateUserForm() {
  const [formData, setFormData] = useFXState('forms.createUser', {
    name: '',
    email: ''
  });

const [shouldCreate, setShouldCreate] = React.useState(false);

// POST request triggered by shouldCreate change
  const { data: newUser, loading, error } = useFXAPI('/api/users', {
    method: 'POST',
    body: formData,
    headers: { 'Content-Type': 'application/json' },
    dependencies: [shouldCreate]
  });

const handleSubmit = (e) => {
    e.preventDefault();
    setShouldCreate(!shouldCreate); // Toggle to trigger API call
  };

React.useEffect(() => {
    if (newUser) {
      // User created successfully
      alert(`User ${newUser.name} created!`);
      setFormData({ name: '', email: '' }); // Reset form
    }
  }, [newUser]);

return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
      />

<input
        type="email"
        placeholder="Email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
      />

<button type="submit" disabled={loading}>
        {loading ? 'Creating...' : 'Create User'}
      </button>

{error && <div className="error">Error: {error.message}</div>}
    </form>
  );
}
```

### **Dynamic API Requests**

```tsx
function SearchResults() {
  const searchQuery = useFX('search.query', '');
  const searchFilters = useFX('search.filters', {});

// Build dynamic API endpoint
  const searchUrl = React.useMemo(() => {
    if (!searchQuery) return null;

const params = new URLSearchParams({
      q: searchQuery,
      ...searchFilters
    });

return `/api/search?${params.toString()}`;
  }, [searchQuery, searchFilters]);

const { data: results, loading, error } = useFXAPI(searchUrl, {
    dependencies: [searchUrl]
  });

if (!searchQuery) return <div>Enter a search query</div>;
  if (loading) return <div>Searching...</div>;
  if (error) return <div>Search error: {error.message}</div>;

return (
    <div>
      <h3>Search Results ({results?.length || 0})</h3>
      {results?.map(result => (
        <div key={result.id} className="search-result">
          <h4>{result.title}</h4>
          <p>{result.description}</p>
        </div>
      ))}
    </div>
  );
}
```

---

## <� **Performance with useFXCache**

### **Basic Caching**

```tsx
const { data, loading, error } = useFXCache(key, factory, options)
```

**Examples:**

```tsx
function ExpensiveCalculation() {
  const inputData = useFX('calculation.input', []);

// Cache expensive calculation results
  const { data: result, loading, error } = useFXCache(
    `calculation-${JSON.stringify(inputData)}`,
    async () => {
      // Simulate expensive calculation
      await new Promise(resolve => setTimeout(resolve, 2000));
      return inputData.reduce((sum, num) => sum + Math.pow(num, 2), 0);
    },
    {
      ttl: 5 * 60 * 1000, // Cache for 5 minutes
      dependencies: [inputData]
    }
  );

if (loading) return <div>Calculating...</div>;
  if (error) return <div>Calculation error: {error.message}</div>;

return (
    <div>
      <h3>Calculation Result</h3>
      <p>Sum of squares: {result}</p>
    </div>
  );
}

function UserStatistics() {
  const userId = useFX('ui.currentUserId');

// Cache user statistics
  const { data: stats, loading } = useFXCache(
    `user-stats-${userId}`,
    async () => {
      const response = await fetch(`/api/users/${userId}/stats`);
      return response.json();
    },
    {
      ttl: 10 * 60 * 1000, // Cache for 10 minutes
      namespace: 'user-data',
      dependencies: [userId]
    }
  );

if (loading) return <div>Loading statistics...</div>;

return (
    <div>
      <h3>User Statistics</h3>
      <p>Posts: {stats?.postsCount}</p>
      <p>Comments: {stats?.commentsCount}</p>
      <p>Likes: {stats?.likesCount}</p>
    </div>
  );
}
```

---

## = **Component Lifecycle Integration**

### **useFXLifecycle Hook**

```tsx
function ComponentWithLifecycle() {
  const isComponentMounted = useFXLifecycle('MyComponent', {
    feature: 'user-dashboard',
    version: '1.0.0'
  });

React.useEffect(() => {
    if (isComponentMounted) {
      // Component is fully mounted and registered with FX
      $$('components.MyComponent.initialized').set(true);
    }

return () => {
      // Cleanup when component unmounts
      $$('components.MyComponent.initialized').set(false);
    };
  }, [isComponentMounted]);

return (
    <div>
      <h3>Component Status: {isComponentMounted ? 'Mounted' : 'Mounting'}</h3>
    </div>
  );
}
```

### **Router Integration with useFXRouter**

```tsx
function NavigationComponent() {
  const { currentRoute, params, navigate, router } = useFXRouter();

return (
    <div>
      <nav>
        <button onClick={() => navigate('/home')}>Home</button>
        <button onClick={() => navigate('/profile')}>Profile</button>
        <button onClick={() => navigate('/settings')}>Settings</button>
      </nav>

<div>
        <h3>Current Route: {currentRoute}</h3>
        {params && Object.keys(params).length > 0 && (
          <div>
            <h4>Route Parameters:</h4>
            <pre>{JSON.stringify(params, null, 2)}</pre>
          </div>
        )}
      </div>
    </div>
  );
}

function UserProfilePage() {
  const { params } = useFXRouter();
  const userId = params.id;

const { data: user, loading } = useFXAPI(`/api/users/${userId}`, {
    dependencies: [userId]
  });

if (loading) return <div>Loading user profile...</div>;

return (
    <div>
      <h1>{user?.name}'s Profile</h1>
      <p>Email: {user?.email}</p>
    </div>
  );
}
```

---

## <� **Context & Provider Pattern**

### **Setting up FX Provider**

```tsx
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const { FXProvider } = FXReact;

return (
    <FXProvider>
      <UserDashboard />
      <NotificationCenter />
      <Footer />
    </FXProvider>
  );
}

function UserDashboard() {
  const { useFXContext } = FXReact;
  const fx = useFXContext(); // Access FX instance directly

const userName = useFX('user.name');

return (
    <div>
      <h1>Welcome, {userName}!</h1>
      <button onClick={() => fx.setPath('user.status', 'active')}>
        Set Status Active
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
```

### **Higher-Order Component (HOC)**

```tsx
const { withFX } = FXReact;

// Component that will receive FX data as props
function UserProfile({ fxData, setFXData, fx }) {
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {fxData?.name}</p>
      <p>Email: {fxData?.email}</p>

<button onClick={() => setFXData({ ...fxData, status: 'updated' })}>
        Update Status
      </button>
    </div>
  );
}

// Wrap component with FX data
const ConnectedUserProfile = withFX(UserProfile, 'user.profile');

function App() {
  return <ConnectedUserProfile />;
}
```

---

## <� **Advanced Patterns & Real-World Examples**

### **Master-Detail Pattern**

```tsx
function UserManagement() {
  // List of users
  const { data: users, loading: usersLoading } = useFXAPI('/api/users');
  const [selectedUserId, setSelectedUserId] = useFXState('ui.selectedUserId', null);

// Selected user details
  const { data: selectedUser, loading: userLoading } = useFXAPI(
    selectedUserId ? `/api/users/${selectedUserId}` : null,
    { dependencies: [selectedUserId] }
  );

return (
    <div className="user-management">
      <div className="user-list">
        <h2>Users</h2>
        {usersLoading ? (
          <div>Loading users...</div>
        ) : (
          <ul>
            {users?.map(user => (
              <li
                key={user.id}
                className={selectedUserId === user.id ? 'selected' : ''}
                onClick={() => setSelectedUserId(user.id)}
              >
                {user.name}
              </li>
            ))}
          </ul>
        )}
      </div>

<div className="user-details">
        <h2>User Details</h2>
        {!selectedUserId ? (
          <div>Select a user to view details</div>
        ) : userLoading ? (
          <div>Loading user details...</div>
        ) : (
          <div>
            <h3>{selectedUser?.name}</h3>
            <p>Email: {selectedUser?.email}</p>
            <p>Role: {selectedUser?.role}</p>
            <p>Created: {new Date(selectedUser?.createdAt).toLocaleDateString()}</p>

<UserEditForm user={selectedUser} />
          </div>
        )}
      </div>
    </div>
  );
}
```

### **Real-Time Dashboard**

```tsx
function Dashboard() {
  // Real-time metrics that update via WebSocket/SSE
  const activeUsers = useFX('metrics.activeUsers', 0);
  const systemLoad = useFX('metrics.systemLoad', 0);
  const errorRate = useFX('metrics.errorRate', 0);

// Historical data from API
  const { data: chartData, loading } = useFXAPI('/api/metrics/chart', {
    dependencies: [] // Only fetch once
  });

// Cached expensive calculations
  const { data: insights } = useFXCache(
    'dashboard-insights',
    async () => {
      const response = await fetch('/api/analytics/insights');
      return response.json();
    },
    { ttl: 5 * 60 * 1000 } // Cache for 5 minutes
  );

// Auto-refresh every 30 seconds
  React.useEffect(() => {
    const interval = setInterval(() => {
      $$('metrics.lastUpdate').set(Date.now());
    }, 30000);

return () => clearInterval(interval);
  }, []);

return (
    <div className="dashboard">
      <div className="metrics-row">
        <MetricCard
          title="Active Users"
          value={activeUsers}
          trend={activeUsers > useFX('metrics.prev.activeUsers', 0) ? 'up' : 'down'}
        />

<MetricCard
          title="System Load"
          value={`${systemLoad}%`}
          trend={systemLoad > 80 ? 'warning' : 'normal'}
        />

<MetricCard
          title="Error Rate"
          value={`${errorRate}%`}
          trend={errorRate > 5 ? 'error' : 'normal'}
        />
      </div>

<div className="charts-row">
        {loading ? (
          <div>Loading charts...</div>
        ) : (
          <ChartComponent data={chartData} />
        )}
      </div>

<div className="insights-section">
        <h3>AI Insights</h3>
        {insights?.map(insight => (
          <div key={insight.id} className="insight-card">
            <h4>{insight.title}</h4>
            <p>{insight.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function MetricCard({ title, value, trend }) {
  return (
    <div className={`metric-card ${trend}`}>
      <h3>{title}</h3>
      <div className="metric-value">{value}</div>
      <div className={`trend-indicator ${trend}`}>
        {trend === 'up' && '�'}
        {trend === 'down' && '�'}
        {trend === 'warning' && '�'}
        {trend === 'error' && '=�'}
      </div>
    </div>
  );
}
```

### **Shopping Cart Example**

```tsx
function ShoppingCart() {
  const [cartItems, setCartItems] = useFXState('cart.items', []);
  const [isCheckingOut, setIsCheckingOut] = useFXState('cart.checkingOut', false);

// Calculate totals reactively
  const subtotal = React.useMemo(() => {
    return cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  }, [cartItems]);

const tax = subtotal * 0.1; // 10% tax
  const total = subtotal + tax;

const updateQuantity = (itemId, quantity) => {
    if (quantity <= 0) {
      removeItem(itemId);
      return;
    }

const updatedItems = cartItems.map(item =>
      item.id === itemId ? { ...item, quantity } : item
    );
    setCartItems(updatedItems);
  };

const removeItem = (itemId) => {
    const updatedItems = cartItems.filter(item => item.id !== itemId);
    setCartItems(updatedItems);
  };

const handleCheckout = async () => {
    setIsCheckingOut(true);

try {
      const response = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          items: cartItems,
          total: total
        })
      });

if (!response.ok) throw new Error('Checkout failed');

const order = await response.json();

// Clear cart and show success
      setCartItems([]);
      $$('ui.notification').set({
        type: 'success',
        message: `Order #${order.id} placed successfully!`
      });

} catch (error) {
      $$('ui.notification').set({
        type: 'error',
        message: error.message
      });
    } finally {
      setIsCheckingOut(false);
    }
  };

if (cartItems.length === 0) {
    return (
      <div className="empty-cart">
        <h2>Your cart is empty</h2>
        <p>Add some items to get started!</p>
      </div>
    );
  }

return (
    <div className="shopping-cart">
      <h2>Shopping Cart</h2>

<div className="cart-items">
        {cartItems.map(item => (
          <div key={item.id} className="cart-item">
            <img src={item.image} alt={item.name} />
            <div className="item-details">
              <h3>{item.name}</h3>
              <p>${item.price}</p>
            </div>
            <div className="quantity-controls">
              <button onClick={() => updateQuantity(item.id, item.quantity - 1)}>
                -
              </button>
              <span>{item.quantity}</span>
              <button onClick={() => updateQuantity(item.id, item.quantity + 1)}>
                +
              </button>
            </div>
            <div className="item-total">
              ${(item.price * item.quantity).toFixed(2)}
            </div>
            <button
              className="remove-btn"
              onClick={() => removeItem(item.id)}
            >
              Remove
            </button>
          </div>
        ))}
      </div>

<div className="cart-summary">
        <div className="summary-row">
          <span>Subtotal:</span>
          <span>${subtotal.toFixed(2)}</span>
        </div>
        <div className="summary-row">
          <span>Tax:</span>
          <span>${tax.toFixed(2)}</span>
        </div>
        <div className="summary-row total">
          <span>Total:</span>
          <span>${total.toFixed(2)}</span>
        </div>

<button
          className="checkout-btn"
          onClick={handleCheckout}
          disabled={isCheckingOut}
        >
          {isCheckingOut ? 'Processing...' : `Checkout ($${total.toFixed(2)})`}
        </button>
      </div>
    </div>
  );
}
```

---

## =� **Best Practices & Anti-Patterns**

###  **DO: Best Practices**

```tsx
//  Use meaningful FX node paths
const user = useFX('user.profile.current', null);
const settings = useFX('app.settings.ui', {});

//  Provide sensible default values
const theme = useFX('ui.theme', 'light');
const notifications = useFX('user.preferences.notifications', true);

//  Use useFXState for two-way binding
const [searchQuery, setSearchQuery] = useFXState('search.query', '');

//  Cache expensive operations
const { data: expensiveData } = useFXCache('expensive-calc', heavyCalculation, {
  ttl: 300000 // 5 minutes
});

//  Handle loading and error states
function DataComponent() {
  const { data, loading, error } = useFXAPI('/api/data');

if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage error={error} />;

return <DataDisplay data={data} />;
}

//  Use form validation
const form = useFXForm(initialValues, {
  validate: validateForm,
  onSubmit: handleSubmit
});
```

### L **DON'T: Anti-patterns**

```tsx
// L Don't use React state for FX-managed data
function BadComponent() {
  const [userData, setUserData] = React.useState(null); // Use useFX instead
  const user = useFX('user.current'); // This is better

// L Don't manually sync React state with FX
  React.useEffect(() => {
    setUserData($$('user.current').get()); // Don't do this
  }, []);

return <div>{userData?.name}</div>;
}

// L Don't ignore loading/error states
function BadAPIComponent() {
  const { data } = useFXAPI('/api/users'); // Missing loading/error handling

return (
    <ul>
      {data.map(user => <li key={user.id}>{user.name}</li>)} {/* Will crash if data is null */}
    </ul>
  );
}

// L Don't put complex logic in render
function BadRenderLogic() {
  const users = useFX('users.list', []);

return (
    <div>
      {users.map(user => {
        // L Don't do complex processing in render
        const processedUser = heavyProcessing(user);
        const additionalData = fetchSomeData(user.id);

return <UserCard key={user.id} user={processedUser} data={additionalData} />;
      })}
    </div>
  );
}

//  DO: Move logic to useMemo or custom hooks
function GoodRenderLogic() {
  const users = useFX('users.list', []);

const processedUsers = React.useMemo(() => {
    return users.map(heavyProcessing);
  }, [users]);

return (
    <div>
      {processedUsers.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

// L Don't create FX nodes in render
function BadFXUsage() {
  const handleClick = () => {
    // L Creating nodes on every click
    $$(`temp.${Date.now()}`).set(data);
  };

return <button onClick={handleClick}>Click</button>;
}

//  DO: Use consistent node paths
function GoodFXUsage() {
  const setTempData = useFXSetter('temp.clickData');

const handleClick = () => {
    setTempData(data);
  };

return <button onClick={handleClick}>Click</button>;
}
```

---

This comprehensive cheat sheet provides everything needed to effectively use FX React, from basic reactive hooks to advanced patterns for real-world applications. The plugin eliminates Redux complexity while providing powerful reactive state management through FX nodes.

{appTitle}

{userName}