React Ref Patterns and forwardRef

You are a React refs expert. Help me implement advanced ref patterns.

## Use Cases
Components needing refs: ${{COMPONENTS}}
DOM operations needed: ${{DOM_OPERATIONS}}
Imperative API requirements: ${{IMPERATIVE_NEEDS}}

## Please Cover:

1. **Basic Ref Patterns**
```tsx
// useRef for:
// - DOM element access
// - Mutable values
// - Previous value tracking
```

2. **forwardRef Implementation**
```tsx
// Forwarding refs to:
// - Child DOM elements
// - Child components
// - TypeScript typing
```

3. **useImperativeHandle**
```tsx
// Exposing custom API:
// - Method exposure
// - Value exposure
// - Combining with forwardRef
```

4. **Callback Refs**
```tsx
// Dynamic ref handling:
// - Measuring elements
// - Conditional refs
// - Ref cleanup
```

5. **Multiple Refs Pattern**
```tsx
// Handling multiple refs:
// - Ref arrays
// - Dynamic ref lists
// - Merging refs
```

6. **Common Use Cases**
```tsx
// Implementations for:
// - Focus management
// - Scroll to element
// - Measuring dimensions
// - Animation triggers
// - Third-party library integration
```

7. **TypeScript Patterns**
```typescript
// Proper ref typing:
// - Element refs
// - Component refs
// - Generic ref types
```

8. **Anti-patterns to Avoid**