Strange Scrollyteller v2.0 behaviour disregarding useState changes

[phocks]

When you use a Scrollyteller component and pass an onMarker function... and then try to use a useState state variable eg [year, setYear] = useState(1999) the onMarker function will not respond to changes to year when we call setYear and will always show the original value "1999".

Seems to be something to do with the way function components work..... had to revert to version 1 of scrollyteller

[katiaeirin]

I ran into the same issue using scrollyteller inside a functional component .

I think this is related to facebook/react#14066 and not passing dependencies inside useEffect array in Scrollyteller. If I pass onScroll or this.props.onMarker inside the array, I can get the updated state inside my onMarker callback, but that introduces all sorts of other issues because useEffect runs more than once and scroll listeners are attached every time.

Did you work out a way to fix it?

I think one way would be to update Scrollyteller component to be a class and use componentDidMount instead.

For now I changed my parent component to class and it seems to be working fine.

[phocks]

Yeah it used to be a class component in version 1 before Nathan upgraded it to be a function component. Maybe it was the wrong way to go.... unless we can find a fix.

[drzax]

I'm not at all familiar with this issue, but I'd say that's almost certainly the problem @katiaeirin (if it's not, it's bound to be causing other problems).

The onScroll function should really be defined inside the useEffect hook. Could we do that, then wrap this.props.onMarker in a useRef hook and pass the resulting reference in the dependency array on useEffect?

[phocks]

Seems like it could work. I'd have to try reproducing the problem to test, unless @katiaeirin you have some time to work on this a bit?

[katiaeirin]

Yep I can try doing that.