Best Practices
| Version: 1.0.0 |
Comprehensive guide to writing efficient, maintainable Eleva components. |
Overview
This guide covers best practices organized by topic:
Quick Reference: Do’s and Don’ts
Do’s
- Keep components focused - One responsibility per component
- Use meaningful names -
UserProfileCard not Card1
- Clean up in onUnmount - Prevent memory leaks
- Use signals for UI state - Enables reactivity
- Keep selectors simple - Prefer IDs and classes
- Use keys in lists - Enable efficient DOM diffing
Don’ts
- Don’t mutate arrays/objects in place - Replace for reactivity
- Don’t forget
.value - Always access signal values correctly
- Don’t over-nest components - Keep hierarchy shallow
- Don’t use generic selectors - Be specific, avoid bare
div, span
- Don’t skip cleanup - Always unsubscribe and clear timers
- Don’t call handlers directly in templates - Use arrow functions for params
- Batch signal updates - Multiple updates in one function
- Use memoization - Cache expensive computations
- Lazy load components - Load on demand when possible
- Keep templates simple - Complex logic in setup, not template
- Minimize DOM queries - Use efficient selectors
- Use keyed reconciliation for lists - Add
key attribute
Quick Syntax Reference
Template Context Rules
Quick Rule: ${} needs ctx. — @events and :props don’t.
template: (ctx) => `
<!-- ${} interpolation needs ctx. -->
<p>${ctx.count.value}</p>
<!-- @events don't need ctx. -->
<button @click="handleClick">Click</button>
<!-- :props don't need ctx. -->
<child :data="items.value"></child>
`
Signal Updates
// Primitives - direct assignment
count.value++;
// Objects - replace entire object
user.value = { ...user.value, name: "Jane" };
// Arrays - replace with new array
items.value = [...items.value, newItem]; // Add
items.value = items.value.filter(i => i.id !== id); // Remove
Event Handlers with Parameters
// Without params - reference directly
<button @click="handleClick">Click</button>
// With params - use arrow function
<button @click="() => removeItem(${item.id})">Remove</button>
Next Steps