Lingui Best Practices

# Lingui Best Practices for React Applications

## 1. Project Structure
Organize your i18n files logically:
```
/src/
  /locales/
    /en/
      messages.js
    /fr/
      messages.js
  /components/
    Button/
      Button.jsx
      Button.i18n.js
```

## 2. Dynamic Messages with Variables
Use ICU MessageFormat syntax for dynamic content:
```jsx
// Button.i18n.js
export const messages = {
  greeting: 'Hello {name}!',
  items_count: '{count, plural, one {1 item} other {{count} items}}'
};

// Button.jsx
import { t } from '@lingui/macro';
const Button = ({ name, count }) => (
  <button>
    {t`Hello ${name}!`}
    {t`You have ${count} items`}
  </button>
);
```

## 3. Context for Disambiguation
Add context when messages have multiple meanings:
```jsx
// In your message catalog:
{ 'message': 'Bank' }
{ 'message@financial': 'Financial institution' }
{ 'message@river': 'Side of a river' }

// Usage:
t`message` // -> 'Bank'
t`message@financial` // -> 'Financial institution'
```

## 4. Performance Optimization
- Use `@lingui/macro` for compile-time extraction
- Mark static messages with `/*i18n-disable*/` when needed
- Avoid inline message definitions in render methods:
  ❌ Bad: `t('Hello {name}', { name })`
  ✅ Good: Extract to message catalog first

## 5. Testing Strategy
```javascript
import { i18n } from '@lingui/core';
import { setupI18n } from '@lingui/react';

test('renders localized content', () => {
  const i18n = setupI18n({ locale: 'en', messages: { en: {} } });
  render(<Component />, { wrapper: ({ children }) => <I18nProvider i18n={i18n}>{children}</I18nProvider> });
  expect(screen.getByText(/hello/i)).toBeInTheDocument();
});
```

## Key Takeaways
- Centralize message definitions in catalog files
- Use ICU syntax for complex messages
- Implement context when needed
- Optimize performance with macros and proper structure
- Test with mocked i18n providers