Address remaining React hooks lint warnings in LiveProvider and Editor

Open
#417 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
frontend, testing

Research direction

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.

Written by the indexing model from the issue text.

Description

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

LiveProvider effect deps
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.

Dominant language
TypeScript
Stars
4.6k
Forks
260
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from FormidableLabs/react-live

All issues in FormidableLabs/react-live

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.