useStatePro is an enhanced React state management hook that provides temporary state management, change tracking, and nested object support with a simple API.

• 🏗️ Temporary state - Maintain a temporary copy of your state that can be discarded or merged
• 🔍 Change tracking - Automatically detect when temporary state differs from original state
• 🧩 Nested object support - Easily access and modify nested properties with dot notation
• 🔄 State synchronization - Keep state in sync with props via dependencies array
• 🛠️ Utility functions - Includes discard, merge, and getter/setter functions

npm install use-state-pro
# or
yarn add use-state-pro

import useStatePro from 'use-state-pro';

function UserForm({ user }) {
	const { tmp, org, changed, set, discard, merge } = useStatePro(user);

	const handleSave = () => {
		// Save to API then merge changes
		merge();
	};

	return (
		<div>
			<input value={tmp.name} onChange={e => set.tmp('name', e.target.value)} />

			{changed && (
				<div>
					<button onClick={discard}>Discard Changes</button>
					<button onClick={handleSave}>Save Changes</button>
				</div>
			)}
		</div>
	);
}

const { tmp, set, get } = useStatePro({
	user: {
		name: 'John',
		address: {
			city: 'New York',
		},
	},
});

// Set nested value
set.tmp('user.address.city', 'Los Angeles');

// Get nested value
const city = get.tmp('user.address.city'); // 'Los Angeles'

function UserProfile({ user }) {
	// When the user prop changes, both org and tmp will update
	const state = useStatePro(user, [user]);

	// ... rest of component
}

useStatePro is written in TypeScript and provides full type support:

interface User {
	id: number;
	name: string;
	profile: {
		email: string;
		age?: number;
	};
}

const { tmp, set } = useStatePro<User>({
	id: 1,
	name: 'John',
	profile: {
		email: 'john@example.com',
	},
});

// Type-safe nested property access
set.tmp('profile.email', 'new@example.com');

• Form Management: Perfect for complex forms where you need to track changes and allow cancellation
• Edit UIs: Simplify edit workflows with built-in discard/merge functionality
• State Comparison: Easily compare current state with original values
• Deep Updates: No need to spread state manually for nested updates

Contributions are welcome! Please open an issue or submit a pull request.

MIT © MrDexign