Performance and Acceessibility

Performance Optiomization

Minimize Unnecessary Re-renders

• Use useMemo and useCallback to stabilize handlers and derived values.
• Avoid recreating inline objects and arrays on every render (e.g., style objects, validation configs, option arrays). Extract them outside render scope or memoize them.
• Memoize expensive field renderers and complex derived state.

Use Stable Keys in Lists

• Always use consistent, stable key values when rendering dynamic field arrays.
• Avoid index-based keys when list order can change — this prevents unnecessary remounting and state loss.

Component Isolation

• Split large forms into smaller memoized subcomponents.
• Use controlled rendering boundaries to limit propagation of updates.

Debouncing & Throttling

Frequent updates (typing, validation, autosave) can degrade performance if not controlled.

Recommended Practices

Use useDebouncedCallback for:

• Live validation
• Expensive formatting
• API-backed validation

Avoid triggering full form validation on every keystroke unless explicitly required.

Throttle resize or scroll-driven computations.

CSS & Paint Performance

Styling in Formitiva is optimized for minimal layout cost:

• Uses CSS variables for theme consistency.
• Uses a small, shared set of flat class selectors.
• Avoids deep descendant selectors.
• Prevents layout thrashing (no repeated read/write layout cycles).
• Prefers transform/opacity-based animations over layout-triggering properties.

Concrete Optimization Checklist

Area	Action
Rendering	Memoize large derived objects
Lists	Use stable keys
Validation	Debounce live validation
Styling	Keep selectors shallow
Profiling	Use React DevTools Profiler before optimizing

---

Accessibility

Accessibility is a core principle of Formitiva. Forms must be usable by keyboard users, screen readers, and assistive technologies.

Semantic Structure

• Native label elements associated with inputs via htmlFor and id.
• Native form controls preferred over custom role-based components.
• fieldset and legend used for grouped fields.

Keyboard Accessibility

All interactive components

• are keyboard reachble.
• Maintain logical tab order.
• Include visible focus indicators.
• Support Enter/Space interactions where applicable.
• Avoid keyboard traps.

Custom components implement explicit keyboard event handling when needed.

ARIA Integration

Use ARIA only when native HTML is insufficient.

Common Patterns Used

Formitiva includes structured ARIA usage:

• aria-invalid applied to invalid fields.
• aria-describedby links inputs to error messages.
• aria-label defines a text label for an element when no visible label is available.
• aria-labelledby references another element’s id to use its text as the accessible label.
• aria-checked indicates whether a checkable element is checked (true), not checked (false), or partially checked

ARIA is only used when native semantics are insufficient.

Error Handling & Validation

• Clear and descriptive error messages provided.
• Validation errors are announced to screen readers.
• Maintain consistent error placement.