refactor: enhance closed layer management and rendering logic in Tile…#52
Conversation
…map component - Introduced useState to manage the readiness of the closed layer. - Updated useLayoutEffect to ensure proper handling of closed layer visibility based on window dimensions and tile size. - Improved the ref assignment for the closed layer container to set its readiness state correctly.
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the closed layer management in the Tilemap component to improve rendering reliability by introducing state-based readiness tracking. The changes ensure the closed layer container is properly initialized before attempting to populate it with sprites.
Key changes:
- Added state management for closed layer readiness using useState
- Consolidated closed layer pool management and sprite application into a single useLayoutEffect
- Enhanced ref assignment with readiness state setting
| while (usedIdx < current.length) current[usedIdx].outer.visible = current[usedIdx++].inner.visible = false; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [tiles]); | ||
| }, [tiles, windowWidth, windowHeight, tileSize, zoom, closedLayerReady]); |
There was a problem hiding this comment.
The dependency array includes closedLayerReady which will cause this effect to re-run every time the closed layer becomes ready. Since closedLayerReady only changes from false to true once, consider using a ref or removing this dependency to avoid unnecessary re-executions.
| }, [tiles, windowWidth, windowHeight, tileSize, zoom, closedLayerReady]); | |
| }, [tiles, windowWidth, windowHeight, tileSize, zoom]); |
| ref={node => { | ||
| closedLayerRef.current = node; | ||
| if (node) setClosedLayerReady(true); | ||
| }} |
There was a problem hiding this comment.
The ref callback function is recreated on every render, which can cause unnecessary re-renders. Consider using useCallback to memoize this function.
…map component