1

I'm trying to use the InteractionObserver to show which items are currently in a div viewport,

but when I try to use a state variable inside the callback it always has the initial value, no matter how may times it was updated outside the callback

these are the component's variables

function _IntersectionObserverTest_( props ){
  const { data } = props
  const scrollDiv = useRef( null )
  const itemsRef = useRef( [] )
  const [ visible, setVisible ] = useState([])
  const visibilityThreshold = 0.5

this is the callback's code

  const onInteraction = (entries, opts)=>{
    console.log(visible) // <-- never gets updated, it's always []
    var onView = [ ...visible ]
    entries.forEach( e => {
      const key = e.target.getAttribute('itemKey')
      const t = e.intersectionRatio
      console.log(key, t)
      if( t < visibilityThreshold ){
        onView = onView.filter( k => k != key )
      } else {
        onView.push( key )
      }
    })

    setVisible( onView ) // <-- this updates the variable
  }

this is the code test

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

<script type="text/babel" defer>
// import React, { useState, useEffect } from "react";
// import ReactDOM from "react-dom";
const { useEffect, useRef, useState, useCallback } = React; // web-browser variant

function IntersectionObserverTest( props ){
  const { itemsCount=10 } = props
  const data = new Array(itemsCount).fill(null).map( (a, i) => `item ${i}`)

  return <_IntersectionObserverTest_ data={data}/> 
}

function _IntersectionObserverTest_( props ){
  const { data } = props
  const scrollDiv = useRef( null )
  const itemsRef = useRef( [] )
  const [ visible, setVisible ] = useState([])
  const visibilityThreshold = 0.5

  const getVisible = useCallback(() => {
    return visible
  }, [ visible ])

  useEffect(() => {
     itemsRef.current = itemsRef.current.slice(0, props.data.length);
  }, [props.data]);

  useEffect( () => {
    const observer = new IntersectionObserver( onInteraction, {
      root: scrollDiv.current,   
      threshold: visibilityThreshold,
    })

    for( var i = 0; i < data.length; i++ ){
      observer.observe( itemsRef.current[i] )
    }
  }, [ itemsRef ])

  const onInteraction = (entries, opts)=>{
    console.log(visible, getVisible())
    var onView = [ ...visible ]
    entries.forEach( e => {
      const key = e.target.getAttribute('itemKey')
      const t = e.intersectionRatio
      console.log(key, t)
      if( t < visibilityThreshold ){
        onView = onView.filter( k => k != key )
      } else {
        onView.push( key )
      }
    })

    setVisible( onView )
  }

  return <>
    <div ref={scrollDiv} style={{width: '100%', overflow: 'scroll'}}> 
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        { data.map( (d, di) => 
          <div 
            ref={el => itemsRef.current[di] = el} 
            style={{ display: 'block', minWidth: '200px', width: '200px', border: '1px solid black', padding: '1rem', textAlign: 'center'}} 
            key={di}
            itemKey={`item-${di}`}
          >
            {d}
          </div>
        )}
      </div>
    </div>
    <div>
      on view:
      <div>{visible.map( v => <div key={v}>{v} </div>)}</div>
    </div>
  </>
}


const rootElement = document.getElementById("root");
ReactDOM.render(<IntersectionObserverTest />, rootElement);
</script>

<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

4
  • Does this answer your question? The useState set method is not reflecting a change immediately Mar 17 at 16:47
  • FYI: You are creating a memory leak by creating many IntersectionObserver objects on each call to useEffect(). You should move new IntersectionObserver() to the root of your component and only use 'observer` inside the useEffect(). Mar 17 at 17:05
  • @RandyCasburn I think it doesn't, as I see the problem is that the refernce to visible ( the state variable ) it's different in the callback, somehow there are two scopes and one of them never gets updated. About the memory leak, I think if I move it to the root of the component it will be re-instantiated each time the component re-renders, am I wrong? Mar 17 at 17:25
  • @RandyCasburn I read again the question you commented before, and even if it didn't solve my issue helped me understand the problem, thanks. Mar 17 at 21:29

1 Answer 1

0

Well, this is how I solved it...

First of all the problem is caused by something called "stale closures" and it's an issue of lost references between re-renders.

Read more on this links

To solved it I rewrote the component as a Class Component,

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

<script type="text/babel" defer>
const { useEffect, useRef, useState, useCallback } = React; 

const visibilityThreshold = 0.5

class IntersectionObserverTest extends React.Component{
  constructor( props ){
    super(props)
    this.state = {
      data: new Array(props.itemsCount ?? 10).fill(null).map( (a, i) => `item ${i}`),
      visible: [],
    }

    this.scrollDiv = React.createRef( )
    this.itemsRef = React.createRef()
    this.itemsRef.current = []

    this.onInteraction = this.onInteraction.bind(this)
  }

  componentDidMount(){
    this.itemsRef.current = this.itemsRef.current.slice(0, this.state.data.length);

    const observer = new IntersectionObserver( this.onInteraction, {
      root: this.scrollDiv.current,   
      threshold: visibilityThreshold,
    })

    for( var i = 0; i < this.state.data.length; i++ ){
      observer.observe( this.itemsRef.current[i] )
    }

    console.log("INITIALIZED")

  }

  onInteraction(entries, opts){
    console.log("visible:", this.state.visible)
    var onView = [ ...this.state.visible ]
    entries.forEach( e => {
      const key = e.target.getAttribute('itemKey')
      const t = e.intersectionRatio
      console.log(key, t)
      if( t < visibilityThreshold ){
        onView = onView.filter( k => k != key )
      } else {
        onView.push( key )
      }
    })

    this.setState( { visible: onView } )
  }

  render( ){
    const { data } = this.props

    return <>
      <div ref={this.scrollDiv} style={{width: '100%', overflow: 'scroll'}}> 
        <div style={{ display: 'flex', flexDirection: 'row' }}>
          { this.state.data.map( (d, di) => 
            <div 
              ref={el => this.itemsRef.current[di] = el} 
              style={{ display: 'block', minWidth: '200px', width: '200px', border: '1px solid black', padding: '1rem', textAlign: 'center'}} 
              key={di}
              itemKey={`item-${di}`}
            >
              {d}
            </div>
          )}
        </div>
      </div>
      <div>
        on view:
        <div>{this.state.visible.map( v => <div key={v}>{v} </div>)}</div>
      </div>
    </>
  }

}


const rootElement = document.getElementById("root");
ReactDOM.render(<IntersectionObserverTest />, rootElement);
</script>

<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.