usePick

const userStore = createStore({
  name: "John",
  age: 30,
  email: "john@example.com",
  avatar: "avatar.jpg",
  preferences: { theme: "dark", language: "en" },
  lastLogin: new Date(),
});

// ❌ Inefficient: Re-renders on ANY store change
function UserName() {
  const user = useStoreValue(userStore);
  return <h1>{user.name}</h1>; // Only uses name, but subscribes to everything
}

// ✅ Efficient: Only re-renders when name changes
function OptimizedUserName() {
  const { name } = usePick(userStore, "name");
  return <h1>{name}</h1>; // Perfect - minimal subscriptions
}

const selectedFields = usePick(store, ...keys);
const selectedFields = usePickDeeply(store, ...keys); // Deep equality checking

function UserName() {
  const { name } = usePick(userStore, "name");
  return <h1>{name}</h1>;
}

function UserContact() {
  const { name, email } = usePick(userStore, "name", "email");

  return (
    <div>
      <h2>{name}</h2>
      <p>Email: {email}</p>
    </div>
  );
}

const settingsStore = createStore({
  theme: {
    colors: { primary: "#blue", secondary: "#gray" },
    fonts: { heading: "Arial", body: "Helvetica" },
  },
  notifications: {
    email: true,
    push: false,
  },
});

function ThemeSettings() {
  // Deep comparison for nested objects
  const { theme } = usePickDeeply(settingsStore, "theme");

  return (
    <div
      style={{
        color: theme.colors.primary,
        fontFamily: theme.fonts.heading,
      }}
    >
      Current theme configuration
    </div>
  );
}

// ❌ Bad: Pick nothing (same as useStoreValue)
const { name } = usePick(userStore);

// ❌ Bad: Pick too many fields
const { name } = usePick(userStore, "name", "age", "email", "avatar");

// ✅ Good: Only pick what you need
const { name, status } = usePick(userStore, "name", "status");

// ❌ Bad: Too granular
const { name } = usePick(userStore, "name");
const { email } = usePick(userStore, "email");
const { age } = usePick(userStore, "age");

// ✅ Good: Group related fields
const { name, email, age } = usePick(userStore, "name", "email", "age");