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
- https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately
- https://dmitripavlutin.com/react-hooks-stale-closures/
To solved it I rewrote the component as a Class Component,
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
That's [*property spread notation*][1]. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "[JSX spread attributes][2]" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" enumerable properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
<!-- language: lang-css -->
.first {
color: green;
}
.second {
color: blue;
}
<!-- language: lang-html -->
<div id="root"></div>
<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>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
<!-- language: lang-css -->
.as-console-wrapper {
max-height: 100% !important;
}
<!-- end snippet -->
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
[2]: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
