(\n \n Failed to render component: {error.message}\n
\n )}\n >\n \n \n );\n}\n```\n\n## ๐ Performance Optimization\n\n### Memoization\n\n```tsx\nimport { memoizedRenderer } from '@damarkuncoro/ui-renderers';\n\n// Automatically memoizes rendered components\nconst MemoizedContractRenderer = memoizedRenderer(ContractRenderer);\n```\n\n### Lazy Loading\n\n```tsx\nimport { lazyRenderer } from '@damarkuncoro/ui-renderers';\n\n// Load components on demand\nconst LazyButtonRenderer = lazyRenderer(() =>\n import('./ButtonRenderer')\n);\n```\n\n### Renderer Caching\n\n```tsx\nimport { createRendererCache } from '@damarkuncoro/ui-renderers';\n\nconst rendererCache = createRendererCache();\n\n// Cache rendered components\nconst cachedRenderer = rendererCache.get(contract.id) ||\n rendererCache.set(contract.id, createRenderer(contract));\n```\n\n## ๐งช Testing Renderers\n\n### Unit Testing\n\n```tsx\nimport { render, screen } from '@testing-library/react';\nimport { ContractRenderer } from '@damarkuncoro/ui-renderers';\nimport { buttonContract } from '@damarkuncoro/ui-core/contracts';\n\ntest('renders button from contract', () => {\n const runtimeProps = {\n children: 'Test Button',\n onClick: jest.fn()\n };\n\n render(\n \n );\n\n const button = screen.getByRole('button', { name: 'Test Button' });\n expect(button).toBeInTheDocument();\n});\n```\n\n### Integration Testing\n\n```tsx\nimport { render, fireEvent, waitFor } from '@testing-library/react';\nimport { FormRenderer } from '@damarkuncoro/ui-renderers';\n\ntest('form submission works', async () => {\n const onSubmit = jest.fn();\n const formConfig = {\n fields: [\n { contract: 'input', props: { name: 'email', required: true } },\n { contract: 'button', props: { type: 'submit', children: 'Submit' } }\n ],\n onSubmit\n };\n\n render();\n\n const emailInput = screen.getByLabelText('email');\n const submitButton = screen.getByRole('button', { name: 'Submit' });\n\n fireEvent.change(emailInput, { target: { value: 'test@example.com' } });\n fireEvent.click(submitButton);\n\n await waitFor(() => {\n expect(onSubmit).toHaveBeenCalledWith({\n email: 'test@example.com'\n });\n });\n});\n```\n\n## ๐ง Advanced Features\n\n### Custom Renderer Plugins\n\n```tsx\nimport { createRendererPlugin } from '@damarkuncoro/ui-renderers';\n\n// Create analytics plugin\nconst analyticsPlugin = createRendererPlugin({\n name: 'analytics',\n beforeRender: (contract, props) => {\n // Track component render\n analytics.track('component_render', {\n contractId: contract.id,\n props: Object.keys(props)\n });\n },\n afterRender: (contract, element) => {\n // Add tracking attributes\n return React.cloneElement(element, {\n 'data-analytics-id': contract.id\n });\n }\n});\n\n// Register plugin\nregisterRendererPlugin(analyticsPlugin);\n```\n\n### Internationalization (i18n)\n\n```tsx\nimport { createI18nRenderer } from '@damarkuncoro/ui-renderers';\n\nconst i18nRenderer = createI18nRenderer({\n locale: 'id',\n translations: {\n 'button.submit': 'Kirim',\n 'input.placeholder': 'Masukkan teks...'\n }\n});\n\n// Use i18n-aware renderer\n\n```\n\n### Server-Side Rendering (SSR)\n\n```tsx\nimport { renderToString } from 'react-dom/server';\nimport { SSRContractRenderer } from '@damarkuncoro/ui-renderers';\n\nfunction renderPage(config) {\n const html = renderToString(\n \n );\n\n return `\n \n \n \n ${html}
\n \n \n \n `;\n}\n```\n\n## ๐ Use Cases\n\n### CMS-Driven Interfaces\n\n```typescript\n// Content Management System integration\nconst cmsConfig = await fetch('/api/page-config').then(r => r.json());\n\nfunction CMSPage() {\n return (\n \n );\n}\n```\n\n### A/B Testing Components\n\n```typescript\n// Dynamic component testing\nconst experimentConfig = {\n experimentId: 'button-color-test',\n variants: {\n control: { contract: 'button', props: { variant: 'primary' } },\n variant1: { contract: 'button', props: { variant: 'success' } }\n }\n};\n\n\n```\n\n### Progressive Web Apps (PWA)\n\n```typescript\n// Offline-capable dynamic UI\nconst offlineConfig = {\n fallback: {\n contract: 'offline-message',\n props: { message: 'You are currently offline' }\n },\n components: isOnline ? onlineComponents : offlineComponents\n};\n\n\n```\n\n## ๐ Migration Guide\n\n### From Static to Dynamic Rendering\n\n```tsx\n// Before: Static component\nfunction UserProfile({ user }) {\n return (\n \n \n \n
{user.name}
\n
{user.email}
\n