FormidableLabs / FormidableLabs/react-live

Address remaining React hooks lint warnings in LiveProvider and Editor

Offen
#417 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
4.6k
Forks
260
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

Five oxlint warnings remain, set to `warn` in `.oxlintrc.json`.

### `LiveProvider` effect deps

```js
useEffect(() => {
transpileAsync(code).catch(onError);
}, [code, scope, noInline, transformCode]);
```

**Do not apply the suggested fix as-is.** The linter calls `scope`, `noInline`, and `transformCode` unnecessary because they are not in the effect body. They are used by `transpileAsync`, which closes over them. Removing them stops re-transpiling when `scope` or `transformCode` changes.

Real bug the linter misses: `transpileAsync` also closes over `enableTypeScript`, which is not in the deps, so toggling it at runtime does not re-transpile.

Fix: make `transpileAsync` a `useCallback` with deps `scope`, `noInline`, `transformCode`, `enableTypeScript`, and depend on it. Changes when transpilation runs, notably for an inline `scope={{ ... }}`.

### `jsx-no-constructed-context-values`

New context object every render re-renders all consumers. Needs `useCallback` on `onError`/`onChange` as well as `useMemo`, and `onChange` depends on `transpileAsync` — so entangled with the above.

### `set-state-in-effect` in `Editor`

`useEffect(() => setCode(props.code), [props.code])` syncs state from props. Both standard fixes change the controlled/uncontrolled contract of a contentEditable editor.

### Order

1. Add tests that changing `scope`, `noInline`, `transformCode`, and `enableTypeScript` re-transpiles. Only `code` is covered today. The `enableTypeScript` one should fail, confirming the bug above.
2. Fix the stale closure.
3. `useCallback`/`useMemo` refactor.
4. `Editor` prop sync, separately.

Worth holding until #415 is understood.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start with the LiveProvider tests that currently cover only code changes, then inspect the LiveProvider and Editor entry points alongside .oxlintrc.json. Add coverage for changes to scope, noInline, transformCode, and enableTypeScript, then address the remaining warnings while preserving the contentEditable controlled/uncontrolled contract; consider #415 first.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
frontend, testing
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.