---
description: React-Komponenten bevorzugt als Class Components schreiben
globs: src/**/*.{jsx,js,tsx,ts}
alwaysApply: false
---

# Class Components bevorzugen

Neue und geänderte React-Komponenten als **Class Components** (`extends PureComponent`), nicht als Function Components.

```js
// ❌
export default function ArticlePhoto({ photo }) {
  return <Box>{photo?.thumbHash}</Box>;
}

// ✅
class ArticlePhoto extends Component {
  render() {
    const { photo } = this.props;
    return <Box>{photo?.thumbHash}</Box>;
  }
}
export default ArticlePhoto;
```

## Konventionen

- `import { Component } from 'react'`
- Event-Handler im Constructor binden (`this.handleX = this.handleX.bind(this)`)
- State über `this.state` / `this.setState`
- Lifecycle: `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` statt Hooks
- Keine neuen Function Components und keine neuen Hooks (`useState`, `useEffect`, …), außer der Bestandscode ist bereits so und bleibt unangetastet