You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
useInView stores its DOM target in React state and starts observation from an
effect. Attaching the ref therefore causes an additional commit before the
observer is active. The hook also updates its latest callback ref during render
and uses render-phase state-reset logic when the observed node disappears.
useOnInView already observes from a callback ref, but it has separate target,
option, and cleanup lifecycle machinery. The two hooks can share a small private
callback-ref observer core while keeping their public behavior distinct.
This follows the useful direction of PR #742, but that PR is outdated relative
to the current implementation and should not be merged as-is. The replacement
must include current options such as scrollMargin, preserve fallback behavior,
avoid broadening public option types, and remain compatible with React 17–19.
The extra-render concern was also previously raised in #592.
Problem
useInViewstores its DOM target in React state and starts observation from aneffect. Attaching the ref therefore causes an additional commit before the
observer is active. The hook also updates its latest callback ref during render
and uses render-phase state-reset logic when the observed node disappears.
useOnInViewalready observes from a callback ref, but it has separate target,option, and cleanup lifecycle machinery. The two hooks can share a small private
callback-ref observer core while keeping their public behavior distinct.
This follows the useful direction of PR #742, but that PR is outdated relative
to the current implementation and should not be merged as-is. The replacement
must include current options such as
scrollMargin, preserve fallback behavior,avoid broadening public option types, and remain compatible with React 17–19.
The extra-render concern was also previously raised in #592.
Prerequisites
triggerOnceobserve()cleanupBefore refactoring production code, add lifecycle characterization tests that
lock down the corrected behavior.
Proposed direction
changes, ref movement, detach/reattach,
skip,triggerOnce, fallback,merged refs, cleanup, and Strict Mode.
option-driven reattachment,
observe()registration, and idempotent cleanup.during render.
useOnInViewfirst without behavior changes, then migrateuseInViewand remove its target-element state/effect cycle.initialInView,skip, andtriggerOncesemantics.Acceptance criteria
warnings, and render/commit counts before the refactor.
useInViewno longer stores its target element in React state.useInViewref no longer causes the current extra commit.initialInView, first-false suppression,skip, threshold-awaretriggerOnce,fallbackInView, merged refs, and option changes retaintheir current corrected behavior.
React-export diagnostics.
useInView,useOnInView, andobservesize limits pass.Non-goals
useEffectEventfromIntersectionObservercallbacksInViewcomponentfallbackInViewor changing public option/return typesonChangetoIntersectionEffectOptions