Reactive event handlers are not working

[ostapoff]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to React Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.7.12 and earlier

Description

event handlers using state do not work. Bound once during the first render never reassigned later:

  const [counter, setCounter] = useState(0);
  const onMove = useCallback(() => {
    console.log("should increment but always 0:", counter);
    setCounter((counter) => counter + 1);
  }, [counter]);


<Splide onMove={onMove}>

Reproduction Link

https://codesandbox.io/s/event-forked-mmd2vd

Steps to Reproduce

try to use a component state in event handler. It will be always equal to the initial state.

Expected Behaviour

<Splide> component should track the event handler changes

[ostapoff]

useEvent can solve the problem but it will be available only in next 18.3.0 React solution with useEvent