naver / egjs-flicking-plugins

Plugins for @egjs/flicking
https://naver.github.io/egjs-flicking/Plugins
MIT License
60 stars 12 forks source link

Component render empties flicking-pagination-bullets #56

Open kalkusa opened 4 months ago

kalkusa commented 4 months ago

Description

Component render empties the bullets container. If no re-render appears, the plugin works well. But if state change causes component re-render then bullets disappear.

The situation happens in React.js.

Steps to check or reproduce

const flickingRef = useRef<Flicking | null>(null);
const plugins = [new Pagination({ type: "bullet" })];
const [isMoving, setIsMoving] = useState(false);

const handleMoveStart = () => {
    setIsMoving(true);
};

const handleMoveEnd = () => {
    setIsMoving(false);
};

<Flicking
            ref={flickingRef}
            circular={true}
            align="prev"
            onMove={handleMoveStart}
            onMoveEnd={handleMoveEnd}
            plugins={plugins}
          >
            <div className="recommendation-box">
                container1
            </div>
            <div className="recommendation-box">
                container2
            </div>
            <div className="recommendation-box">
                container3
            </div>
            <div className="recommendation-box">
                container4
            </div>
            <ViewportSlot>
              <div className="flicking-pagination"></div>
            </ViewportSlot>
          </Flicking>

When onMove and onMoveEnd handlers modify state, causing component rerender, then

<div class="flicking-pagination flicking-pagination-bullets">
<span class="flicking-pagination-bullet flicking-pagination-bullet-active"></span>
<span class="flicking-pagination-bullet"></span>
<span class="flicking-pagination-bullet"></span>
<span class="flicking-pagination-bullet"></span>
</div>

becomes

<div class="flicking-pagination flicking-pagination-bullets"></div>
kalkusa commented 4 months ago

I found a workaround for this issue:

  const plugins = useMemo(() => {
    return [new Pagination({ type: "bullet" })];
  }, []);

Maybe it's not even workaround, but proper usage - anyway documentation shows only functional component example - https://naver.github.io/egjs-flicking/Plugins#pagination . Meanwhile functional components are most popular now.

If this shouldn't be fixed it would be at least valuable to provide proper example...