Skip to content

⚠️ Avoid

1. Multiple Simultaneous Popups

jsx
// ❌ Confusing for users
openPopup('generic', { keepLast: true });
openPopup('confirm', { keepLast: true });
openPopup('form', { keepLast: true });

// ✅ Use sequential flow instead
openPopup('confirm', {
  data: {
    onChoose: (confirmed) => {
      if (confirmed) {
        openPopup('form', { /* ... */ });
      }
    }
  }
});

2. Overly Long Forms

jsx
// ❌ 20 fields in one popup
// ✅ Split into multi-step wizard

// ❌ Very large forms
components: [/* 25 fields */]

// ✅ Multi-step approach
const wizard = ['step1', 'step2', 'step3'];

3. Timeout on Important Actions

jsx
// ❌ User might lose important popup
openPopup('confirm', {
  timeout: 5000,
  data: { message: 'Confirm deletion?' }
});

// ✅ No timeout for critical actions
openPopup('confirm', {
  data: { message: 'Confirm deletion?' }
});

4. Missing Error Handling

jsx
// ❌ No error handling
onSubmit: async (data) => {
  await api.post('/save', data);
}

// ✅ Proper error handling
onSubmit: async (data) => {
  try {
    await api.post('/save', data);
  } catch (error) {
    openPopup('generic', {
      data: {
        title: 'Error',
        message: error.message,
        icon: '❌'
      }
    });
  }
}