Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Use same ref for multiple `useInView()` with different options
See original GitHub issueHi! I have a use case where I’d like to use the same reference for more than one useInView(), each one with different options. When I try to do that I get an error because the library doesn’t allow to do it.
- Is there a reason for not supporting multiple observers to one reference?
- Do you have a suggestion on how to achieve what I’m trying to do?
In case it helps, here is a sandbox using two different divs to achieve this:
https://codesandbox.io/s/infinite-scroll-frqbq
But I’d rather avoid using more elements than the necessary! 😃
Thanks!
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
How to use multiple 'useInView' hooks in the same react ...
So you should do this instead. const [ref, inView ] = useInView() const [ref2, inView2 ] = useInView().
Read more >How to use multiple 'useInView' hooks in the same react ...
[Solved]-How to use multiple 'useInView' hooks in the same react component?- ... const [ref, inView ] = useInView() const [ref2, inView2 ] =...
Read more >Custom React Hooks: useInView - DEV Community
The Hook will now have another parameter: the React reference of the target element. const target = useRef(null) const options ...
Read more >react-intersection-observer - npm
Call the useInView hook with the (optional) options you need. It will return an array containing a ref , the inView status and...
Read more >How To Use an IntersectionObserver in a React Hook - Medium
By passing the setNode function, we are using the callback ref pattern instead of the new ref pattern (to learn more about the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
🎉 This issue has been resolved in version 8.28.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
Might make sense to start looking into refactoring the internals, so it doesn’t map observers to DOM elements.