Skip to content

Address remaining React hooks lint warnings in LiveProvider and Editor #417

Description

@ryan-roemer

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions