fix: stack overflow when effect has recursion

closes
#49

Author: NickvanDyke

src/util/ast.js

@@ -191,8 +191,10 @@ export const isImmediateCall = (node) => {
  *
  * @returns {Scope.Reference[]}
  */
-export const getUpstreamRefs = (context, ref) => {
-  if (!ref.resolved) {
+export const getUpstreamRefs = (context, ref, visited = new Set()) => {
+  if (visited.has(ref)) {
+    return [];
+  } else if (!ref.resolved) {
     // I think this only happens when:
     // 1. Import statement is missing
     // 2. ESLint globals are misconfigured
@@ -208,6 +210,10 @@ export const getUpstreamRefs = (context, ref) => {
     return [];
   }
 
+  // TODO: Probably best to track this here but let the downstream `traverse()` handle it.
+  // Especially if we can simplify/eliminate `getDownstreamRefs()` -> `findDownstreamNodes()` from the path.
+  visited.add(ref);
+
   const upstreamRefs = ref.resolved.defs
     // TODO: https://github.com/NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect/issues/34
     // `init` covers for arrow functions; also needs `body` to descend into function declarations
@@ -220,7 +226,7 @@ export const getUpstreamRefs = (context, ref) => {
     // May not be necessary if we adapt the check in `isState()`?
     .filter((def) => !isUseState(def.node))
     .flatMap((def) => getDownstreamRefs(context, def.node.init))
-    .flatMap((ref) => getUpstreamRefs(context, ref));
+    .flatMap((ref) => getUpstreamRefs(context, ref, visited));
 
   // Ultimately return only leaf refs
   return upstreamRefs.length === 0 ? [ref] : upstreamRefs;

test/real-world.test.js

@@ -332,6 +332,88 @@ describe("recommended rules on real-world code", () => {
           };
         `,
       },
+      {
+        // https://github.com/NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect/issues/49
+        name: "Effect with recursion", // Particularly likely for `no-manage-parent` because it checks *all* refs in the effect
+        code: js`
+        function Component() {
+          useEffect(() => {
+            const container = ctnDom.current
+            if (!container) return
+
+            // WebGL setup (~30 lines)
+            const renderer = new Renderer({ alpha: true, premultipliedAlpha: false })
+            const gl = renderer.gl
+            const program = new Program(gl, {
+              vertex: vert,
+              fragment: frag,
+              uniforms: {
+                iTime: { value: 0 },
+                iResolution: { value: new Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height) },
+                hue: { value: hue },
+                hover: { value: 0 },
+                rot: { value: 0 },
+                hoverIntensity: { value: hoverIntensity },
+              },
+            })
+            const mesh = new Mesh(gl, { geometry, program })
+
+            // Nested function 4: animation loop with recursion
+            let rafId
+            let lastTime = 0
+            let currentRot = 0
+            const rotationSpeed = 0.3
+
+            const update = (t) => {
+              rafId = requestAnimationFrame(update) // Recursive call
+              const dt = (t - lastTime) * 0.001
+              lastTime = t
+              const currentTime = t * 0.001
+              program.uniforms.iTime.value = currentTime
+
+              // Color cycle
+              if (cycleHue) {
+                const cyclicHue = (hue + currentTime * hueCycleSpeed) % 360
+                program.uniforms.hue.value = cyclicHue
+              } else {
+                program.uniforms.hue.value = hue
+              }
+
+              program.uniforms.hoverIntensity.value = hoverIntensity
+
+              const effectiveHover = forceHoverState ? 1 : targetHover
+              program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1
+
+              if (rotateOnHover && effectiveHover > 0.5) {
+                currentRot += dt * rotationSpeed
+              }
+              program.uniforms.rot.value = currentRot
+
+              renderer.render({ scene: mesh })
+            }
+            rafId = requestAnimationFrame(update)
+
+            // Cleanup function
+            return () => {
+              cancelAnimationFrame(rafId)
+              window.removeEventListener("resize", resize)
+              container.removeEventListener("mousemove", handleMouseMove)
+              container.removeEventListener("mouseleave", handleMouseLeave)
+              container.removeChild(gl.canvas)
+              gl.getExtension("WEBGL_lose_context")?.loseContext()
+            }
+          }, [
+            hue,
+            hoverIntensity,
+            rotateOnHover,
+            forceHoverState,
+            cycleHue,
+            hueCycleSpeed,
+            size,
+          ])
+        }
+      `,
+      },
     ].forEach(({ name, code }) => {
       it(name, async () => {
         const results = await eslint.lintText(code);