RichTextEditor: useState nach bedingtem return (Lint-Fehler rules-of-hooks) #97

New issue

Closed

opened 2026-10-14 20:10:36 +00:00 by claude · 1 comment

claude commented

2026-10-14 20:10:36 +00:00

Collaborator

Was falsch ist

content/src/components/RichTextEditor.tsx ruft zuerst useEditor(…), dann if (!editor) return null; (Zeile 48) und erst danach useState (Zeile 61, imageError). ESLint meldet das als Fehler: React Hook "useState" is called conditionally (react-hooks/rules-of-hooks). npm run lint im content-Workspace ist darum rot.

Warum es heute nicht knallt

React verlangt dieselbe Zahl Hooks in jedem Render. Wäre editor beim ersten Render null und danach gesetzt, bräche die Komponente mit „Rendered more hooks than during the previous render“ ab. TipTap 3 erzeugt den Editor im Browser aber sofort (immediatelyRender ist ohne Angabe true, @tiptap/react 3.29), editor ist also nie null – solange das so bleibt. Ein Update von TipTap oder ein Server-Rendering der Komponente würde es auslösen.

Was es werden soll

useState vor das return null ziehen (alle Hooks zuerst), danach ist npm run lint in content grün. Kein sichtbarer Unterschied.

Gefunden beim Nachziehen der Redaktions-E2E (ADR 0026); der Fehler bestand schon vorher.

## Was falsch ist `content/src/components/RichTextEditor.tsx` ruft zuerst `useEditor(…)`, dann `if (!editor) return null;` (Zeile 48) und erst danach `useState` (Zeile 61, `imageError`). ESLint meldet das als Fehler: *React Hook "useState" is called conditionally* (`react-hooks/rules-of-hooks`). `npm run lint` im content-Workspace ist darum rot. ## Warum es heute nicht knallt React verlangt dieselbe Zahl Hooks in jedem Render. Wäre `editor` beim ersten Render `null` und danach gesetzt, bräche die Komponente mit „Rendered more hooks than during the previous render“ ab. TipTap 3 erzeugt den Editor im Browser aber sofort (`immediatelyRender` ist ohne Angabe `true`, `@tiptap/react` 3.29), `editor` ist also nie `null` – solange das so bleibt. Ein Update von TipTap oder ein Server-Rendering der Komponente würde es auslösen. ## Was es werden soll `useState` vor das `return null` ziehen (alle Hooks zuerst), danach ist `npm run lint` in content grün. Kein sichtbarer Unterschied. Gefunden beim Nachziehen der Redaktions-E2E (ADR 0026); der Fehler bestand schon vorher.

claude added the

Kind

Bug

Priority

labels

2026-10-14 20:10:36 +00:00

claude added the

Status

Zur Abnahme

label

2026-10-18 14:22:24 +00:00

claude commented

2026-10-18 14:22:24 +00:00

Author

Collaborator

Mit #96 behoben, seit 18.10. in main (544b0d7): Die Hooks in RichTextEditor.tsx stehen jetzt vor dem bedingten return, npx eslint meldet dort keinen rules-of-hooks-Fehler mehr. Nichts zu klicken — kann geschlossen werden, sobald Olli einverstanden ist.

Mit #96 behoben, seit 18.10. in `main` (`544b0d7`): Die Hooks in `RichTextEditor.tsx` stehen jetzt vor dem bedingten `return`, `npx eslint` meldet dort keinen `rules-of-hooks`-Fehler mehr. Nichts zu klicken — kann geschlossen werden, sobald Olli einverstanden ist.

claude

2026-10-18 14:27:52 +00:00