Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Bug: react-hooks/refs false positive using IntersectionObserver | GoodFirstPicks

Bug: react-hooks/refs false positive using IntersectionObserver

frappe/frappe 0 comments 1mo ago
View on GitHub
lowopenScope: unclearSkill match: maybeFrappe / ERPNextPython

Why this is a good first issue

Vague UI feedback without clear actionable items

AI Summary

The issue provides video feedback about the V16 UI, highlighting both positive aspects and potential confusion points. However, it lacks specific, actionable items or clear reproduction steps. The feedback is valuable but needs more concrete details to be actionable for contributors.

Issue Description

React version: 17.0.2 eslint-plugin-react: 7.37.5 eslint-plugin-react-hooks: 7.0.1

Steps To Reproduce

Attempting to create a simple hook to wrap IntersectionObserver:

function useIntersectionObserver(options: Partial<IntersectionObserverInit>) {

  const callbacks = useRef(new Map<string, IntersectionCallback>());

  const onIntersect = useCallback((entries: ReadonlyArray<IntersectionObserverEntry>) => {
    entries.forEach(entry => callbacks.current.get(entry.target.id)?.(entry.isIntersecting)) },
    []
  );

  const observer = useMemo(() => 
    // This line incorrectly reports "Error: Cannot access refs during render"
    new IntersectionObserver(onIntersect, options),
    [onIntersect, options]
  );

  // Some other stuff here
}

Link to code example:

The current behavior

The above code reports the following when running eslint:

error  Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, 
such as in event handlers or effects. Accessing a ref value (the `current` property) during render can 
cause your component not to update as expected (https://react.dev/reference/react/useRef).

common\ReactHooks.ts:97:30
|
|   const observer = useMemo(() =>
|     new IntersectionObserver(onIntersect, options), [onIntersect, options]);
|                              ^^^^^^^^^^^ Cannot access ref value during render
|

The expected behavior

The code is not using a ref (at least, not directly) and anyway it isn't rendering - so it's a mystery as to why the error is reported, unless I'm missing

GitHub Labels

Status: Unconfirmed

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • video feedback only
  • no concrete steps to reproduce
Loading labels...

Details

Points10 pts
Difficultylow
Scopeunclear
Skill Matchmaybe
Test Focusedno