Flicking._panels array is unmatched to Flicking.panels array in react-flicking

Description

react-flicking 사용중 아래와 같은 에러가 발생합니다.

flicking.esm.js:5335 

Uncaught TypeError: Cannot read properties of null (reading '_reactInternals')
    at flicking.esm.js:5335:1
    at Array.map (<anonymous>)
    at flicking.esm.js:5335:1
    at Array.reduce (<anonymous>)
    at __proto.batchInsertDefer (flicking.esm.js:5310:1)
    at batchInsert (flicking.esm.js:8875:1)
    at sync (flicking.esm.js:8865:1)
    at __proto.componentDidUpdate (flicking.esm.js:596:9)
    at commitLayoutEffectOnFiber (react-dom.development.js:23333:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:24688:1)

디버깅 좀 해보니, _panels배열과 panels배열이 다르게 나온다는걸 알게되었고, 이 부분이 문제의 근원이라고 추측됩니다. (_panels는 최신 상태가 잘 반영되었고, panels는 반영이 안된 것으로 보입니다.)

좀 더 자세히 말하면, getRenderingPanels에서 , diffResult를 기반으로 새로운 children을 생성할 때 (diffResult는 제대로 나옵니다), flicking.panels배열을 기반으로 생성하는데, 이 flicking.panels배열이 최신화가 안된 상태라 엉뚱한 children이 나옵니다.

recoil과 함께 사용중인데, 혹시 recoil과의 이슈가 있는지도 확인해주시면 감사하겠습니다.

Steps to check or reproduce

아래와 같이 래핑해서 사용하고 있고, 필드값이 다른건 아래 코드처럼 로그를 찍어서 확인해봤습니다…

const Layout = ({
  children,
}) => {
  const flickingRef = useRef(null);

  console.log(flickingRef.current?._panels, flickingRef.current?.panels);

  return (
    <Flicking
      ref={flickingRef}
    >
      {children}
    </Flicking>
  );
};

코드베이스가 커서, 간추려서 재현해보려고했는데 재현이 안돼서 정보가 좀 부족할 수 있는데요… 혹시라도 위와 같은 문제가 발생하는 상황을 알고계신다면 알려주시면 감사하겠습니다 🙇🏻‍♂️

[neizzz]

@malangfox

https://github.com/neizzz/flicking-bug-reproduction

여기 레포에 재현해놨습니다. 한번 확인해주세요~

감사합니다.

[malangfox]

안녕하세요 @neizzz 님.

남겨주신 이슈의 원인을 정확하게 파악해보기 위해 본문의 오류 메시지가 정확히 어떠한 상황에서 발생하는지 재현을 거친 뒤 해결해보고자 합니다. react-flicking을 이용하며 패널 목록을 변경하셨을 때 오류가 발생하는 것으로 추정되는데요, 재현에 어려움이 있으시겠지만 해당 오류가 발생하는 상황에 대한 데모를 제공해주실 수 있다면 큰 도움이 될 것 같습니다. 또한 현재까지는 recoil과 병행하여 사용할 때 별도로 이슈가 되는 부분은 없었으나 이 부분에 대해서도 확인해보도록 하겠습니다.

감사합니다.