FormidableLabs / FormidableLabs/react-live

Address remaining React hooks lint warnings in LiveProvider and Editor

Ouverte
#417 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
TypeScript
Étoiles
4.6k
Forks
260
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

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.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par les tests de LiveProvider, qui ne couvrent actuellement que les changements de code, puis examinez les points d’entrée de LiveProvider et Editor ainsi que .oxlintrc.json. Ajoutez une couverture pour les changements de scope, noInline, transformCode et enableTypeScript, puis traitez les avertissements restants tout en préservant le contrat controlled/uncontrolled de contentEditable ; prenez d’abord en compte #415.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react, typescript
Domaine
frontend, testing
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.