Vague UI feedback without clear actionable items
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.
React version: 17.0.2 eslint-plugin-react: 7.37.5 eslint-plugin-react-hooks: 7.0.1
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 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 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
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!