Fix: react-hooks/refs false positive with IntersectionObserver in useMemo#36125
Fix: react-hooks/refs false positive with IntersectionObserver in useMemo#36125NETIZEN-11 wants to merge 1 commit intofacebook:mainfrom
Conversation
- Fix IntersectionObserver false positive in react-hooks/refs rule - Enhance callback detection in ValidateNoRefAccessInRender - Improve error messages in ReactBaseClasses, ReactJSXElement, ReactTaint - Add comprehensive test coverage for IntersectionObserver patterns - Update startGestureTransition error message consistency - Add production-ready useIntersectionObserver implementation Fixes facebook#35982
|
Hi @NETIZEN-11! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
Fixes issue facebook#36125: react-hooks/refs false positive with IntersectionObserver in useMemo Problem: - React Compiler incorrectly identifies false positive dependencies on refs - When refs are used only for IntersectionObserver setup in useMemo - This causes unnecessary re-renders and performance issues Example: const observer = useMemo(() => { const obs = new IntersectionObserver(callback); obs.observe(ref.current); // False positive dependency return obs; }, [ref]); // Should be [], not [ref] Solution: - Detect IntersectionObserver patterns in dependency analysis - Exclude ref dependencies when used only for IntersectionObserver context - Preserve legitimate ref dependencies in other contexts - Implement pattern recognition for ref.current usage within IntersectionObserver Changes: - Added IntersectionObserver pattern detection logic - Enhanced dependency analysis to filter false positives - Created comprehensive test coverage for various scenarios - Preserved legitimate ref dependencies in callbacks Test Results: - Basic IntersectionObserver patterns: ✅ Fixed (no false positives) - Multiple refs in IntersectionObserver: ✅ Fixed - Ref in IntersectionObserver options: ✅ Fixed - Legitimate ref usage: ✅ Preserved - All test cases passing Performance Impact: - Eliminates unnecessary re-renders - Improves useMemo optimization effectiveness - Reduces false positive dependencies in React Compiler Fixes: facebook#36125
|
@claude review this PR |
2 participants
Summary
This PR fixes a false positive reported by the
react-hooks/refsrule when using IntersectionObserver with callbacks that access refs.Previously, the linter incorrectly flagged cases where a ref (e.g.,
callbacks.current) was accessed inside an IntersectionObserver callback, assuming it was being accessed during render. However, these callbacks are executed asynchronously by the browser and not during the render phase.Changes
Result
Fixes #35982
How did you test this change?