useSetState

import { useSetState } from '@kivora/react';

function UserProfile() {
  const [state, setState] = useSetState({
    name: 'Alice',
    age: 25,
    email: '[email protected]'
  });

  return (
    <div>
      <input
        value={state.name}
        onChange={(e) => setState({ name: e.target.value })}
      />
      <input
        type="number"
        value={state.age}
        onChange={(e) => setState({ age: Number(e.target.value) })}
      />
    </div>
  );
}

const [formData, setFormData] = useSetState({
  username: '',
  email: '',
  password: '',
  agreeToTerms: false
});

// Update individual fields
setFormData({ username: 'john_doe' });
setFormData({ agreeToTerms: true });

// Multiple fields at once
setFormData({
  email: '[email protected]',
  password: 'secret123'
});

const [state, setState] = useSetState({ count: 0, multiplier: 2 });

// Use current state to compute update
setState((current) => ({
  count: current.count + current.multiplier
}));

const [settings, setSettings] = useSetState({
  theme: 'light',
  language: 'en',
  notifications: true,
  autoSave: false
});

return (
  <div>
    <select
      value={settings.theme}
      onChange={(e) => setSettings({ theme: e.target.value })}
    >
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
    
    <label>
      <input
        type="checkbox"
        checked={settings.notifications}
        onChange={(e) => setSettings({ notifications: e.target.checked })}
      />
      Enable Notifications
    </label>
  </div>
);

// With useState - need to spread manually
const [state, setState] = useState({ name: '', age: 0 });
setState({ ...state, name: 'Alice' }); // Must spread

// With useSetState - automatic merging
const [state, setState] = useSetState({ name: '', age: 0 });
setState({ name: 'Alice' }); // Automatically merged