pmndrs/react-three-fiber

RFC: @react-three/eslint-plugin rules

Open

#2,701 opened on Jan 10, 2023

View on GitHub
 (15 comments) (10 reactions) (0 assignees)TypeScript (1,464 forks)batch import
help wantedrequest for commentsv10

Repository metrics

Stars
 (25,748 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Aligning with our docs for general performance pitfalls and API usage around context (use R3F hooks within Canvas):

  • no-clone-in-frame-loop: Prefer creating temporary objects in global space and copy rather than clone in hot paths. This should be restricted to three.js classes to avoid collisions. https://github.com/pmndrs/react-three-fiber/pull/2710
  • no-fast-state: Don't set state within loops or continuous events (startTransition can be used if you must, this can be disabled for specific polling cases)
  • prefer-useloader: Prefer useLoader for suspense and caching rather than calling Loader.load or Loader.loadAsync in an effect. This will de-dup resources on both the CPU and GPU and avoid later expensive runtime compilation.

Contributor guide

Research direction
Study the existing eslint plugin react three fiber or the official ESLint custom rule documentation. Look at the three proposed rules: no clone in frame loop (already done) requires detecting calls to .clone() inside render loops; no fast state requires detecting state updates inside loops or continuous events; prefer useloader requires detecting direct Loader.load calls inside effects. Write a rule that uses AST selectors to identify these patterns.
Tech stack
javascripttypescriptreact
Domain
tooling
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
JavaScriptESLintReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65