HeroUI Chat

Performance prompts

5 snippets

Memoize HeroUI Lists

Use `React.memo` or `useMemo` for HeroUI components rendering large lists.

Reduce re-renders in HeroUI lists. Steps: - Wrap repeated components in `React.memo` - Memoize computed props (like formatted data) - Example: ```js const OptimizedRow = memo(({ item }) => <ListItem {...item} />) ```

Lazy Load HeroUI Components

Improve performance by dynamically importing HeroUI components only when needed.

Use dynamic import to lazy-load HeroUI components. Example (Next.js or React): ```js const Modal = dynamic(() => import('@heroui/react').then(mod => mod.Modal)) ``` Use: - For modals, dropdowns, large components - Add loading fallback for...

Split HeroUI Code by Route

Apply route-level code splitting so HeroUI components are only bundled per-page.

Apply route-based code splitting. Use: - Dynamic import inside each page/component - Avoid importing all HeroUI UI in global layout - For example, only import Tabs on `/settings` route Bonus: - Use `loadable-components` or React.lazy for control

Debounce Expensive Handlers

Improve input performance by debouncing state updates for HeroUI components.

Debounce frequent updates (e.g., onChange) in HeroUI forms. Steps: - Use lodash.debounce or custom debounce hook - Apply to: - Autocomplete - Search bar - Filter inputs Example: ```js const debounced = useMemo(() => debounce(handleChange,...

Reduce Tailwind Bundle Size

Purge unused Tailwind classes in production to reduce CSS size when styling HeroUI.

Reduce bundle size by removing unused Tailwind styles. Steps: - Enable `content` purge in tailwind.config.js: ```js content: ['./src/**/*.{js,ts,jsx,tsx}'] ``` - Avoid dynamic class names with string interpolation - Use safelist if needed