pixi-fusion 2.0.0 → 2.0.4

package/README.md

@@ -14,14 +14,14 @@ npm i --save pixi-fusion
 
 # Basic Usage Example
 
-1. Create a component with `GameContextProvider` and `World`.
+1. Create a component with `GameContextProvider` and `Stage`.
 
 ```
 <GameContextProvider timeout={10}>
     <World size={{width: 300, height: 300}} eventMode="dynamic">
-        <layer>
+        <Layer>
             <MyAwesomeStage />
-        </Layer>
+        </layer>
     </World>
 </GameContextProvider>
 ```
@@ -76,12 +76,6 @@ export const MyAwesomeStage: React.FC<MazeHeroProps> = () => {
 };
 ```
 
-# Demos
-
--   [Maze](https://laverve.github.io/fusion/?path=/story/games-maze-gameplay--maze-story)
--   [WordSearch](https://laverve.github.io/fusion/?path=/story/games-wordsearch-gameplay--word-search-story)
--   [Spelling spree](https://laverve.github.io/fusion/?path=/story/games-spelling-spree-gameplay--spelling-spree)
-
 # Contribution guidelines
 
 You are encouraged to contribute to this project as soon as you see any defects or issues.

package/dist/src/assets-manager/AssetsManager.js

@@ -23,7 +23,7 @@ export const AssetsManager = ({ children }) => {
         finally {
             setIsFetching(false);
         }
-    }, [isFetching, isError, isFetched, error]);
+    }, []);
     const unload = useCallback((groupId) => {
         Assets.unloadBundle(groupId);
     }, []);

package/dist/src/camera/Camera.js

@@ -22,10 +22,10 @@ export const Camera = ({ children, clampZoom }) => {
         : null, [size, application]);
     const addObject = useCallback((thing) => {
         setThings((oldThings) => [...oldThings, thing]);
-    }, [things]);
+    }, []);
     const removeObject = useCallback((thing) => {
         setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
-    }, [application]);
+    }, []);
     const conextValue = useMemo(() => ({
         addObject,
         removeObject
@@ -34,7 +34,7 @@ export const Camera = ({ children, clampZoom }) => {
         if (viewport && clampZoom && application) {
             viewport.clampZoom(clampZoom);
         }
-    }, [clampZoom]);
+    }, [clampZoom, application, viewport]);
     useEffect(() => {
         if (viewport) {
             if (size.width) {
@@ -44,7 +44,7 @@ export const Camera = ({ children, clampZoom }) => {
                 viewport.height = size.height;
             }
         }
-    }, [size, viewport?.uid, application]);
+    }, [size, viewport, application]);
     useEffect(() => {
         if (!application || !viewport) {
             return;
@@ -61,7 +61,7 @@ export const Camera = ({ children, clampZoom }) => {
             removeObjectFromStage(viewport);
             setIsReady(false);
         };
-    }, [viewport?.uid]);
+    }, [viewport, addObjectToStage, removeObjectFromStage]);
     useEffect(() => {
         if (!viewport || !isReady) {
             return;
@@ -83,16 +83,16 @@ export const Camera = ({ children, clampZoom }) => {
     }, [isReady, viewport, ensureVisibleOptions]);
     const followCallback = useCallback((container) => {
         setFollowContainer(container);
-    }, [followContainer]);
+    }, []);
     const ensureVisibleCallback = useCallback((options) => {
         setEnsureVisibleOptions(options);
-    }, [followContainer]);
+    }, []);
     const value = useMemo(() => {
         return {
             follow: followCallback,
             ensureVisible: ensureVisibleCallback
         };
-    }, [followCallback]);
+    }, [followCallback, ensureVisibleCallback]);
     return (React.createElement(CameraContext.Provider, { value: value },
         React.createElement(LayerContext.Provider, { value: conextValue },
             React.createElement(Layer, null, children))));

package/dist/src/game-context/Game.context.js

@@ -1,4 +1,4 @@
-import React, { createContext, useMemo, useRef, useState } from "react";
+import React, { createContext, useCallback, useMemo, useRef, useState } from "react";
 import { GameStatus } from "../types";
 export const GameContext = createContext({
     reset: () => { },
@@ -19,7 +19,7 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
     const [endTime, setEndTime] = useState(null);
     const [pauseTime, setPauseTime] = useState(0);
     const [pausedAtTime, setPausedAtTime] = useState(null);
-    const onTimedOut = () => {
+    const onTimedOut = useCallback(() => {
         const newEndTime = +new Date();
         const newStatus = GameStatus.TIMEDOUT;
         setEndTime(newEndTime);
@@ -31,8 +31,8 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
             pausedAtTime: null,
             pauseTime
         });
-    };
-    const start = () => {
+    }, [events, pauseTime, startTime]);
+    const start = useCallback(() => {
         const newStartTime = startTime || +new Date();
         const newStatus = GameStatus.IN_PROGRESS;
         const newEndTime = null;
@@ -54,8 +54,8 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
             pausedAtTime: null,
             pauseTime: newPauseTime
         });
-    };
-    const reset = () => {
+    }, [events, onTimedOut, pauseTime, pausedAtTime, startTime, timeout]);
+    const reset = useCallback(() => {
         const newStartTime = null;
         const newStatus = GameStatus.READY;
         const newEndTime = null;
@@ -76,8 +76,8 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
             pausedAtTime: newPausedAtTime,
             pauseTime: newPauseTime
         });
-    };
-    const stop = () => {
+    }, [events]);
+    const stop = useCallback(() => {
         const newStatus = GameStatus.COMPLETED;
         const newEndTime = +new Date();
         if (timerRef.current) {
@@ -92,8 +92,8 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
             pausedAtTime,
             pauseTime
         });
-    };
-    const pause = () => {
+    }, [events, pauseTime, pausedAtTime, startTime]);
+    const pause = useCallback(() => {
         const newStatus = GameStatus.PAUSED;
         const newPausedAtTime = +new Date();
         if (timerRef.current) {
@@ -108,7 +108,7 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
             status: newStatus,
             pauseTime
         });
-    };
+    }, [events, pauseTime, startTime]);
     const contextValue = useMemo(() => ({
         status,
         startTime,
@@ -119,6 +119,6 @@ export const GameContextProvider = ({ children, timeout: inputTimeout = 0, event
         start,
         reset,
         pause
-    }), [timeout, status, startTime, endTime, pauseTime, pausedAtTime]);
+    }), [timeout, status, startTime, endTime, pauseTime, pause, reset, start, stop]);
     return React.createElement(GameContext.Provider, { value: contextValue }, children);
 };

package/dist/src/game-objects/usePhysicalObject.js

@@ -10,7 +10,7 @@ export const usePhysicalObject = ({ physicalObject }) => {
         return () => {
             removeBody(physicalObject);
         };
-    }, [physicalObject?.id]);
+    }, [physicalObject, addBody, removeBody]);
     return {
         physicalObject
     };

package/dist/src/game-objects/usePhysicalObjectFromConfig.js

@@ -7,7 +7,7 @@ export const usePhysicalObjectFromConfig = ({ position = { x: 0, y: 0 }, ...phys
             return Body.create({ position, ...physicalObjectConfig });
         }
         return null;
-    }, []);
+    }, [physicalObjectConfig, position]);
     usePhysicalObject({ physicalObject });
     return { physicalObject };
 };

package/dist/src/game-objects/useWalls.js

@@ -49,11 +49,11 @@ export const useWalls = ({ left = true, right = true, top = true, bottom = true
         }
         Composite.add(walls, parts);
         return walls;
-    }, [width, height]);
+    }, [width, height, bottom, center.x, center.y, left, right, top]);
     useEffect(() => {
         addBody(body);
         return () => {
             removeBody(body);
         };
-    }, [body.id]);
+    }, [body, addBody, removeBody]);
 };

package/dist/src/hooks/useAnimatedSprite.js

@@ -14,19 +14,19 @@ export const useAnimatedSprite = ({ texture, spritesheet: spritesheetJSON, anima
             return sheet;
         }
         return null;
-    }, [spritesheetJSON]);
+    }, [spritesheetJSON, isFetched, textures]);
     const sprite = useMemo(() => {
         if (spritesheet?.animations?.[animation]) {
             return new AnimatedSprite({ textures: spritesheet?.animations?.[animation] });
         }
         return null;
-    }, [texture, spritesheetJSON, animation]);
+    }, [animation, spritesheet?.animations]);
     useObject({ object: sprite, ...options });
     useEffect(() => {
         if (sprite) {
             sprite.animationSpeed = animationSpeed;
         }
-    }, [animationSpeed, sprite?.uid]);
+    }, [animationSpeed, sprite]);
     useEffect(() => {
         if (sprite) {
             if (isPlaying) {
@@ -36,6 +36,6 @@ export const useAnimatedSprite = ({ texture, spritesheet: spritesheetJSON, anima
                 sprite.stop();
             }
         }
-    }, [isPlaying, sprite?.uid]);
+    }, [isPlaying, sprite]);
     return sprite;
 };

package/dist/src/hooks/useCamera.d.ts

@@ -1 +1 @@
-export declare const useCamera: () => import("../camera").CameraContextValue;
+export declare const useCamera: () => import("..").CameraContextValue;

package/dist/src/hooks/useGame.d.ts

@@ -1 +1 @@
-export declare const useGame: () => import("../game-context").GameContextValue;
+export declare const useGame: () => import("..").GameContextValue;

package/dist/src/hooks/useObject.js

@@ -10,45 +10,45 @@ export const useObject = ({ object, anchor, position, skew, scale, width, angle,
         return () => {
             removeObject(object);
         };
-    }, [object?.uid]);
+    }, [object, addObject, removeObject]);
     useEffect(() => {
         if (anchor !== undefined && object) {
             object.anchor = anchor;
         }
-    }, [anchor, object?.uid]);
+    }, [anchor, object]);
     useEffect(() => {
         if (angle !== undefined && object) {
             object.angle = angle;
         }
-    }, [angle, object?.uid]);
+    }, [angle, object]);
     useEffect(() => {
         if (object && position !== undefined) {
             object.position = position;
         }
-    }, [position, object?.uid]);
+    }, [position, object]);
     useEffect(() => {
         if (object && skew !== undefined) {
             object.skew = skew;
         }
-    }, [skew, object?.uid]);
+    }, [skew, object]);
     useEffect(() => {
         if (object && alpha !== undefined) {
             object.alpha = alpha;
         }
-    }, [alpha, object?.uid]);
+    }, [alpha, object]);
     useEffect(() => {
         if (object && scale !== undefined) {
             object.scale = scale;
         }
-    }, [scale, object?.uid]);
+    }, [scale, object]);
     useEffect(() => {
         if (object) {
             object.visible = visible;
         }
-    }, [visible, object?.uid]);
+    }, [visible, object]);
     useEffect(() => {
         if (object && width !== undefined) {
             object.width = width;
         }
-    }, [width, object?.uid]);
+    }, [width, object]);
 };

package/dist/src/hooks/useSprite.js

@@ -15,7 +15,7 @@ export const useSprite = ({ texture = "", ...options }) => {
             return Sprite.from(texture);
         }
         return new Sprite({});
-    }, [texture, frames, isFetched]);
+    }, [texture, isFetched]);
     useObject({ object: sprite, ...options });
     return sprite;
 };

package/dist/src/hooks/useTexture.js

@@ -4,7 +4,7 @@ export const useTextures = ({ keys = [] }) => {
     const { getAsset, isFetched, isFetching, isError } = useAssetManager();
     const textures = useMemo(() => {
         return isFetched ? keys.map((key) => getAsset(key)) : [];
-    }, [keys, isFetched, isFetching, isError]);
+    }, [keys, isFetched, getAsset]);
     return useMemo(() => ({
         textures: textures,
         isFetched,

package/dist/src/hooks/useTickerCallback.js

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useWorld } from "../hooks";
+import { useWorld } from ".";
 export const useTickerCallback = ({ isEnabled = true, callback }) => {
     const { application } = useWorld();
     useEffect(() => {

package/dist/src/hooks/useTilingSprite.js

@@ -15,12 +15,12 @@ export const useTilingSprite = ({ texture = "", tilePosition, ...options }) => {
             return TilingSprite.from(texture);
         }
         return new TilingSprite({});
-    }, [texture, frames]);
+    }, [texture, isFetched]);
     useObject({ object: sprite, ...options });
     useEffect(() => {
         if (tilePosition && sprite) {
             sprite.tilePosition = tilePosition;
         }
-    }, [tilePosition, sprite?.uid]);
+    }, [tilePosition, sprite]);
     return sprite;
 };

package/dist/src/hooks/useWorld.d.ts

@@ -1 +1 @@
-export declare const useWorld: () => import("../world/World.context").WorldContextValue;
+export declare const useWorld: () => import("..").WorldContextValue;

package/dist/src/layer/Layer.js

@@ -19,16 +19,16 @@ export const Layer = ({ options, children }) => {
         return () => {
             removeObjectFromStaeg(container);
         };
-    }, [container?.uid]);
+    }, [container, addObjectIntoParent, addObjectIntoStage, removeObjectFromParent, removeObjectFromStaeg]);
     const addObject = useCallback((thing) => {
         container.addChild(thing);
-    }, [container?.uid]);
+    }, [container]);
     const removeObject = useCallback((thing) => {
         container.removeChild(thing);
-    }, [container?.uid]);
+    }, [container]);
     const conextValue = useMemo(() => ({
         addObject,
         removeObject
-    }), [container?.uid]);
+    }), [addObject, removeObject]);
     return React.createElement(LayerContext.Provider, { value: conextValue }, children);
 };

package/dist/src/physics/MatterPhysics.context.js

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Engine, Runner, World } from "matter-js";
 export const MatterPhysicsContext = createContext({
     config: {
@@ -31,28 +31,28 @@ export const MatterPhysicsContextProvider = ({ isRunning = false, children, conf
         });
     }, [world]);
     const runner = useMemo(() => Runner.create(), []);
-    const addBody = (body) => {
+    const addBody = useCallback((body) => {
         if (engine?.world) {
             World.add(engine?.world, body);
         }
-    };
-    const removeBody = (body) => {
+    }, [engine]);
+    const removeBody = useCallback((body) => {
         if (engine?.world) {
             World.remove(engine?.world, body);
         }
-    };
-    const run = () => {
+    }, [engine]);
+    const run = useCallback(() => {
         if (!isRunningRef.current) {
             Runner.run(runner, engine);
             isRunningRef.current = true;
         }
-    };
-    const stop = () => {
+    }, [runner, engine]);
+    const stop = useCallback(() => {
         if (isRunningRef.current) {
             Runner.stop(runner);
             isRunningRef.current = false;
         }
-    };
+    }, [runner]);
     const conextValue = useMemo(() => ({
         config: localConfig,
         runner,
@@ -61,7 +61,7 @@ export const MatterPhysicsContextProvider = ({ isRunning = false, children, conf
         stop,
         addBody,
         removeBody
-    }), [runner, engine, localConfig]);
+    }), [runner, engine, localConfig, addBody, removeBody, run, stop]);
     useEffect(() => {
         if (isRunning) {
             run();
@@ -69,6 +69,6 @@ export const MatterPhysicsContextProvider = ({ isRunning = false, children, conf
         return () => {
             stop();
         };
-    }, [isRunning]);
+    }, [isRunning, run, stop]);
     return React.createElement(MatterPhysicsContext.Provider, { value: conextValue }, children);
 };

package/dist/src/physics/useCollisionEventHandler.js

@@ -11,5 +11,5 @@ export const useCollisionEventHandler = ({ isEnabled = true, event, callback })
         return () => {
             Events.off(engine, event, callback);
         };
-    }, [isEnabled, callback, event]);
+    }, [isEnabled, callback, event, engine]);
 };

package/dist/src/physics/usePhysicsEngineEventHandler.js

@@ -11,5 +11,5 @@ export const usePhysicsEngineEventHandler = ({ isEnabled = true, event, callback
         return () => {
             Events.off(engine, event, callback);
         };
-    }, [isEnabled, event, callback]);
+    }, [isEnabled, event, callback, engine]);
 };

package/dist/src/physics/usePhysicsTickerCallback.js

@@ -11,5 +11,5 @@ export const usePhysicsTickerCallback = ({ isEnabled = true, callback }) => {
         return () => {
             Events.off(runner, "tick", callback);
         };
-    }, [isEnabled, callback]);
+    }, [isEnabled, callback, runner]);
 };

package/dist/src/stage/Stage.js

@@ -7,10 +7,10 @@ export const Stage = ({ children }) => {
     const [things, setThings] = useState([]);
     const addObject = useCallback((thing) => {
         setThings((oldThings) => [...oldThings, thing]);
-    }, [things]);
+    }, []);
     const removeObject = useCallback((thing) => {
         setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
-    }, [application]);
+    }, []);
     const conextValue = useMemo(() => ({
         addObject,
         removeObject

package/dist/src/world/World.js

@@ -27,7 +27,7 @@ export const World = ({ children, eventMode, size }) => {
             width: applicationRef.screen.width,
             height: applicationRef.screen.height
         };
-    }, [size, canvasRef.current, applicationRef]);
+    }, [size, canvasRef, applicationRef]);
     useEffect(() => {
         if (!applicationRef) {
             const application = new Application();
@@ -35,13 +35,13 @@ export const World = ({ children, eventMode, size }) => {
                 setApplicationRef(application);
             });
         }
-    }, []);
+    }, [applicationRef]);
     useEffect(() => {
         if (applicationRef && canvasRef.current) {
             applicationRef.resizeTo = canvasRef.current;
             applicationRef.resize();
         }
-    }, [canvasRef.current, applicationRef]);
+    }, [canvasRef, applicationRef]);
     const conextValue = useMemo(() => ({
         application: applicationRef,
         size: worldSize
@@ -50,13 +50,14 @@ export const World = ({ children, eventMode, size }) => {
         if (!applicationRef) {
             return;
         }
-        canvasRef.current?.appendChild(applicationRef.canvas);
+        const canvas = canvasRef.current;
+        canvas?.appendChild(applicationRef.canvas);
         return () => {
             if (applicationRef) {
-                canvasRef.current?.removeChild(applicationRef.canvas);
+                canvas?.removeChild(applicationRef.canvas);
             }
         };
-    }, [canvasRef.current, applicationRef]);
+    }, [canvasRef, applicationRef]);
     useEffect(() => {
         if (applicationRef) {
             applicationRef.stage.eventMode = eventMode;

package/package.json

@@ -5,14 +5,23 @@
         "url": "https://github.com/laverve/fusion/issues"
     },
     "dependencies": {
-        "@types/matter-js": "^0.19.8",
+        "@types/matter-js": "^0.20.0",
         "matter-js": "^0.20.0",
-        "pixi.js": "^8.6.6",
+        "pixi.js": "^8.8.0",
         "pixi-viewport": "^6.0.3"
     },
     "peerDependencies": {
         "react": "^19.0.0"
     },
+    "devDependencies": {
+        "@laverve/eslint-utils": "^5.1.11",
+        "@laverve/test-utils": "^5.1.11",
+        "@types/react": "^19.0.10",
+        "husky": "9.1.7",
+        "lint-staged": "^16.0.0",
+        "ts-node": "^10.9.1",
+        "typescript": "^5.7.3"
+    },
     "description": "This module offers a set of common components needed for playing games.",
     "keywords": [
         "game",
@@ -41,12 +50,14 @@
         "url": "https://github.com/laverve/fusion.git"
     },
     "scripts": {
-        "lint": "eslint .",
+        "lint": "eslint ./src/",
+        "lint:fix": "eslint ./src/ --fix",
         "lint:staged": "lint-staged",
+        "prepare": "husky",
         "test": "jest --passWithNoTests",
         "build": "tsc",
         "build:dev": "tsc -w"
     },
-    "version": "2.0.0",
+    "version": "2.0.4",
     "webpack": "./src/index.ts"
 }

package/src/assets-manager/AssetsManager.tsx

@@ -12,22 +12,19 @@ export const AssetsManager: React.FC<PropsWithChildren> = ({ children }) => {
         Assets.cache.reset();
     }, []);
 
-    const load = useCallback(
-        async (groupId: string, localAsset: Asset[]) => {
-            try {
-                Assets.addBundle(groupId, localAsset);
-                await Assets.loadBundle(groupId);
-                setIsFetched(true);
-            } catch (e) {
-                setIsError(true);
-                setIsFetched(false);
-                setError(e);
-            } finally {
-                setIsFetching(false);
-            }
-        },
-        [isFetching, isError, isFetched, error]
-    );
+    const load = useCallback(async (groupId: string, localAsset: Asset[]) => {
+        try {
+            Assets.addBundle(groupId, localAsset);
+            await Assets.loadBundle(groupId);
+            setIsFetched(true);
+        } catch (e) {
+            setIsError(true);
+            setIsFetched(false);
+            setError(e);
+        } finally {
+            setIsFetching(false);
+        }
+    }, []);
 
     const unload = useCallback((groupId: string) => {
         Assets.unloadBundle(groupId);

package/src/camera/Camera.tsx

@@ -32,19 +32,13 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
         [size, application]
     );
 
-    const addObject = useCallback(
-        (thing: Container) => {
-            setThings((oldThings) => [...oldThings, thing]);
-        },
-        [things]
-    );
+    const addObject = useCallback((thing: Container) => {
+        setThings((oldThings) => [...oldThings, thing]);
+    }, []);
 
-    const removeObject = useCallback(
-        (thing: Container) => {
-            setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
-        },
-        [application]
-    );
+    const removeObject = useCallback((thing: Container) => {
+        setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
+    }, []);
 
     const conextValue = useMemo<StageContextValue>(
         () => ({
@@ -58,7 +52,7 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
         if (viewport && clampZoom && application) {
             viewport.clampZoom(clampZoom);
         }
-    }, [clampZoom]);
+    }, [clampZoom, application, viewport]);
 
     useEffect(() => {
         if (viewport) {
@@ -69,7 +63,7 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
                 viewport.height = size.height;
             }
         }
-    }, [size, viewport?.uid, application]);
+    }, [size, viewport, application]);
 
     useEffect(() => {
         if (!application || !viewport) {
@@ -90,7 +84,7 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
             removeObjectFromStage(viewport);
             setIsReady(false);
         };
-    }, [viewport?.uid]);
+    }, [viewport, addObjectToStage, removeObjectFromStage]);
 
     useEffect(() => {
         if (!viewport || !isReady) {
@@ -122,26 +116,20 @@ export const Camera: React.FC<CameraProps & PropsWithChildren> = ({ children, cl
         }
     }, [isReady, viewport, ensureVisibleOptions]);
 
-    const followCallback = useCallback(
-        (container: Container) => {
-            setFollowContainer(container);
-        },
-        [followContainer]
-    );
+    const followCallback = useCallback((container: Container) => {
+        setFollowContainer(container);
+    }, []);
 
-    const ensureVisibleCallback = useCallback(
-        (options: EnsureVisibleOptions) => {
-            setEnsureVisibleOptions(options);
-        },
-        [followContainer]
-    );
+    const ensureVisibleCallback = useCallback((options: EnsureVisibleOptions) => {
+        setEnsureVisibleOptions(options);
+    }, []);
 
     const value = useMemo(() => {
         return {
             follow: followCallback,
             ensureVisible: ensureVisibleCallback
         };
-    }, [followCallback]);
+    }, [followCallback, ensureVisibleCallback]);
 
     return (
         <CameraContext.Provider value={value}>

package/src/game-context/Game.context.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, createContext, useMemo, useRef, useState } from "react";
+import React, { PropsWithChildren, createContext, useCallback, useMemo, useRef, useState } from "react";
 import { GameStatus, GameStatusChangeEvent } from "../types";
 
 export type GameContextValue = {
@@ -52,7 +52,7 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
     const [pauseTime, setPauseTime] = useState<number>(0);
     const [pausedAtTime, setPausedAtTime] = useState<number | null>(null);
 
-    const onTimedOut = () => {
+    const onTimedOut = useCallback(() => {
         const newEndTime = +new Date();
         const newStatus = GameStatus.TIMEDOUT;
 
@@ -66,9 +66,9 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             pausedAtTime: null,
             pauseTime
         });
-    };
+    }, [events, pauseTime, startTime]);
 
-    const start = () => {
+    const start = useCallback(() => {
         const newStartTime = startTime || +new Date();
         const newStatus = GameStatus.IN_PROGRESS;
         const newEndTime = null;
@@ -93,9 +93,9 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             pausedAtTime: null,
             pauseTime: newPauseTime
         });
-    };
+    }, [events, onTimedOut, pauseTime, pausedAtTime, startTime, timeout]);
 
-    const reset = () => {
+    const reset = useCallback(() => {
         const newStartTime = null;
         const newStatus = GameStatus.READY;
         const newEndTime = null;
@@ -119,9 +119,9 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             pausedAtTime: newPausedAtTime,
             pauseTime: newPauseTime
         });
-    };
+    }, [events]);
 
-    const stop = () => {
+    const stop = useCallback(() => {
         const newStatus = GameStatus.COMPLETED;
         const newEndTime = +new Date();
 
@@ -138,9 +138,9 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             pausedAtTime,
             pauseTime
         });
-    };
+    }, [events, pauseTime, pausedAtTime, startTime]);
 
-    const pause = () => {
+    const pause = useCallback(() => {
         const newStatus = GameStatus.PAUSED;
         const newPausedAtTime = +new Date();
 
@@ -157,7 +157,7 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             status: newStatus,
             pauseTime
         });
-    };
+    }, [events, pauseTime, startTime]);
 
     const contextValue = useMemo(
         () => ({
@@ -171,7 +171,7 @@ export const GameContextProvider: React.FC<GameContextProviderProps> = ({
             reset,
             pause
         }),
-        [timeout, status, startTime, endTime, pauseTime, pausedAtTime]
+        [timeout, status, startTime, endTime, pauseTime, pause, reset, start, stop]
     );
 
     return <GameContext.Provider value={contextValue}>{children}</GameContext.Provider>;

package/src/game-objects/usePhysicalObject.ts

@@ -16,7 +16,7 @@ export const usePhysicalObject = ({ physicalObject }: { physicalObject: Nullable
         return () => {
             removeBody(physicalObject);
         };
-    }, [physicalObject?.id]);
+    }, [physicalObject, addBody, removeBody]);
 
     return {
         physicalObject

package/src/game-objects/usePhysicalObjectFromConfig.ts

@@ -14,7 +14,7 @@ export const usePhysicalObjectFromConfig = <PhysicalObjectType extends Nullable<
         }
 
         return null;
-    }, []) as PhysicalObjectType;
+    }, [physicalObjectConfig, position]) as PhysicalObjectType;
 
     usePhysicalObject({ physicalObject });
 

package/src/game-objects/useWalls.ts

@@ -81,7 +81,7 @@ export const useWalls = ({ left = true, right = true, top = true, bottom = true
         Composite.add(walls, parts);
 
         return walls;
-    }, [width, height]);
+    }, [width, height, bottom, center.x, center.y, left, right, top]);
 
     useEffect(() => {
         addBody(body);
@@ -89,5 +89,5 @@ export const useWalls = ({ left = true, right = true, top = true, bottom = true
         return () => {
             removeBody(body);
         };
-    }, [body.id]);
+    }, [body, addBody, removeBody]);
 };

package/src/hooks/useAnimatedSprite.ts

@@ -33,7 +33,7 @@ export const useAnimatedSprite = ({
             return sheet;
         }
         return null;
-    }, [spritesheetJSON]);
+    }, [spritesheetJSON, isFetched, textures]);
 
     const sprite = useMemo(() => {
         if (spritesheet?.animations?.[animation]) {
@@ -41,7 +41,7 @@ export const useAnimatedSprite = ({
         }
 
         return null;
-    }, [texture, spritesheetJSON, animation]);
+    }, [animation, spritesheet?.animations]);
 
     useObject({ object: sprite, ...options });
 
@@ -49,7 +49,7 @@ export const useAnimatedSprite = ({
         if (sprite) {
             sprite.animationSpeed = animationSpeed;
         }
-    }, [animationSpeed, sprite?.uid]);
+    }, [animationSpeed, sprite]);
 
     useEffect(() => {
         if (sprite) {
@@ -59,7 +59,7 @@ export const useAnimatedSprite = ({
                 sprite.stop();
             }
         }
-    }, [isPlaying, sprite?.uid]);
+    }, [isPlaying, sprite]);
 
     return sprite;
 };

package/src/hooks/useObject.ts

@@ -29,53 +29,53 @@ export const useObject = ({
         return () => {
             removeObject(object);
         };
-    }, [object?.uid]);
+    }, [object, addObject, removeObject]);
 
     useEffect(() => {
         if (anchor !== undefined && object) {
             object.anchor = anchor;
         }
-    }, [anchor, object?.uid]);
+    }, [anchor, object]);
 
     useEffect(() => {
         if (angle !== undefined && object) {
             object.angle = angle;
         }
-    }, [angle, object?.uid]);
+    }, [angle, object]);
 
     useEffect(() => {
         if (object && position !== undefined) {
             object.position = position;
         }
-    }, [position, object?.uid]);
+    }, [position, object]);
 
     useEffect(() => {
         if (object && skew !== undefined) {
             object.skew = skew;
         }
-    }, [skew, object?.uid]);
+    }, [skew, object]);
 
     useEffect(() => {
         if (object && alpha !== undefined) {
             object.alpha = alpha;
         }
-    }, [alpha, object?.uid]);
+    }, [alpha, object]);
 
     useEffect(() => {
         if (object && scale !== undefined) {
             object.scale = scale;
         }
-    }, [scale, object?.uid]);
+    }, [scale, object]);
 
     useEffect(() => {
         if (object) {
             object.visible = visible;
         }
-    }, [visible, object?.uid]);
+    }, [visible, object]);
 
     useEffect(() => {
         if (object && width !== undefined) {
             object.width = width;
         }
-    }, [width, object?.uid]);
+    }, [width, object]);
 };

package/src/hooks/useSprite.ts

@@ -25,7 +25,7 @@ export const useSprite = ({ texture = "", ...options }: UseSpriteOptions) => {
         }
 
         return new Sprite({});
-    }, [texture, frames, isFetched]);
+    }, [texture, isFetched]);
 
     useObject({ object: sprite, ...options });
 

package/src/hooks/useTexture.ts

@@ -8,7 +8,7 @@ export const useTextures = ({ keys = [] }: { keys?: string[] }) => {
 
     const textures = useMemo(() => {
         return isFetched ? keys.map((key) => getAsset(key) as Texture) : [];
-    }, [keys, isFetched, isFetching, isError]);
+    }, [keys, isFetched, getAsset]);
 
     return useMemo(
         () => ({

package/src/hooks/useTickerCallback.ts

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { TickerCallback } from "pixi.js";
 
-import { useWorld } from "../hooks";
+import { useWorld } from ".";
 
 export const useTickerCallback = <T = unknown>({
     isEnabled = true,

package/src/hooks/useTilingSprite.ts

@@ -25,7 +25,7 @@ export const useTilingSprite = ({ texture = "", tilePosition, ...options }: UseT
         }
 
         return new TilingSprite({});
-    }, [texture, frames]);
+    }, [texture, isFetched]);
 
     useObject({ object: sprite, ...options });
 
@@ -33,7 +33,7 @@ export const useTilingSprite = ({ texture = "", tilePosition, ...options }: UseT
         if (tilePosition && sprite) {
             sprite.tilePosition = tilePosition;
         }
-    }, [tilePosition, sprite?.uid]);
+    }, [tilePosition, sprite]);
 
     return sprite;
 };

package/src/layer/Layer.tsx

@@ -29,20 +29,20 @@ export const Layer: React.FC<PropsWithChildren & LayerOptions> = ({ options, chi
         return () => {
             removeObjectFromStaeg(container);
         };
-    }, [container?.uid]);
+    }, [container, addObjectIntoParent, addObjectIntoStage, removeObjectFromParent, removeObjectFromStaeg]);
 
     const addObject = useCallback(
         (thing: Container) => {
             container.addChild(thing);
         },
-        [container?.uid]
+        [container]
     );
 
     const removeObject = useCallback(
         (thing: Container) => {
             container.removeChild(thing);
         },
-        [container?.uid]
+        [container]
     );
 
     const conextValue = useMemo<LayerContextValue>(
@@ -50,7 +50,7 @@ export const Layer: React.FC<PropsWithChildren & LayerOptions> = ({ options, chi
             addObject,
             removeObject
         }),
-        [container?.uid]
+        [addObject, removeObject]
     );
 
     return <LayerContext.Provider value={conextValue}>{children}</LayerContext.Provider>;

package/src/physics/MatterPhysics.context.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, createContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { PropsWithChildren, createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Matter, { Engine, Runner, World } from "matter-js";
 import { MatterPhysicsConfig, MatterPhysics } from "./types";
 
@@ -47,31 +47,37 @@ export const MatterPhysicsContextProvider: React.FC<PropsWithChildren & MatterPh
 
     const runner = useMemo(() => Runner.create(), []);
 
-    const addBody = (body: Matter.Body | Matter.Composite) => {
-        if (engine?.world) {
-            World.add(engine?.world, body);
-        }
-    };
+    const addBody = useCallback(
+        (body: Matter.Body | Matter.Composite) => {
+            if (engine?.world) {
+                World.add(engine?.world, body);
+            }
+        },
+        [engine]
+    );
 
-    const removeBody = (body: Matter.Body | Matter.Composite) => {
-        if (engine?.world) {
-            World.remove(engine?.world, body);
-        }
-    };
+    const removeBody = useCallback(
+        (body: Matter.Body | Matter.Composite) => {
+            if (engine?.world) {
+                World.remove(engine?.world, body);
+            }
+        },
+        [engine]
+    );
 
-    const run = () => {
+    const run = useCallback(() => {
         if (!isRunningRef.current) {
             Runner.run(runner, engine);
             isRunningRef.current = true;
         }
-    };
+    }, [runner, engine]);
 
-    const stop = () => {
+    const stop = useCallback(() => {
         if (isRunningRef.current) {
             Runner.stop(runner);
             isRunningRef.current = false;
         }
-    };
+    }, [runner]);
 
     const conextValue = useMemo(
         () => ({
@@ -83,7 +89,7 @@ export const MatterPhysicsContextProvider: React.FC<PropsWithChildren & MatterPh
             addBody,
             removeBody
         }),
-        [runner, engine, localConfig]
+        [runner, engine, localConfig, addBody, removeBody, run, stop]
     );
 
     useEffect(() => {
@@ -94,7 +100,7 @@ export const MatterPhysicsContextProvider: React.FC<PropsWithChildren & MatterPh
         return () => {
             stop();
         };
-    }, [isRunning]);
+    }, [isRunning, run, stop]);
 
     return <MatterPhysicsContext.Provider value={conextValue}>{children}</MatterPhysicsContext.Provider>;
 };

package/src/physics/useCollisionEventHandler.ts

@@ -22,5 +22,5 @@ export const useCollisionEventHandler = ({ isEnabled = true, event, callback }:
         return () => {
             Events.off(engine, event, callback);
         };
-    }, [isEnabled, callback, event]);
+    }, [isEnabled, callback, event, engine]);
 };

package/src/physics/usePhysicsEngineEventHandler.ts

@@ -26,5 +26,5 @@ export const usePhysicsEngineEventHandler = ({
         return () => {
             Events.off(engine, event, callback);
         };
-    }, [isEnabled, event, callback]);
+    }, [isEnabled, event, callback, engine]);
 };

package/src/physics/usePhysicsTickerCallback.ts

@@ -21,5 +21,5 @@ export const usePhysicsTickerCallback = ({ isEnabled = true, callback }: UsePhys
         return () => {
             Events.off(runner, "tick", callback);
         };
-    }, [isEnabled, callback]);
+    }, [isEnabled, callback, runner]);
 };

package/src/stage/Stage.tsx

@@ -8,19 +8,13 @@ export const Stage: React.FC<PropsWithChildren> = ({ children }) => {
     const { application } = useWorld();
     const [things, setThings] = useState<Container[]>([]);
 
-    const addObject = useCallback(
-        (thing: Container) => {
-            setThings((oldThings) => [...oldThings, thing]);
-        },
-        [things]
-    );
+    const addObject = useCallback((thing: Container) => {
+        setThings((oldThings) => [...oldThings, thing]);
+    }, []);
 
-    const removeObject = useCallback(
-        (thing: Container) => {
-            setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
-        },
-        [application]
-    );
+    const removeObject = useCallback((thing: Container) => {
+        setThings((oldThings) => oldThings.filter(({ uid }) => uid === thing.uid));
+    }, []);
 
     const conextValue = useMemo<StageContextValue>(
         () => ({

package/src/world/World.tsx

@@ -41,7 +41,7 @@ export const World: React.FC<PropsWithChildren & WorldProps> = ({ children, even
             width: applicationRef.screen.width,
             height: applicationRef.screen.height
         };
-    }, [size, canvasRef.current, applicationRef]);
+    }, [size, canvasRef, applicationRef]);
 
     useEffect(() => {
         if (!applicationRef) {
@@ -50,14 +50,14 @@ export const World: React.FC<PropsWithChildren & WorldProps> = ({ children, even
                 setApplicationRef(application);
             });
         }
-    }, []);
+    }, [applicationRef]);
 
     useEffect(() => {
         if (applicationRef && canvasRef.current) {
             applicationRef.resizeTo = canvasRef.current;
             applicationRef.resize();
         }
-    }, [canvasRef.current, applicationRef]);
+    }, [canvasRef, applicationRef]);
 
     const conextValue = useMemo<WorldContextValue>(
         () => ({
@@ -71,14 +71,15 @@ export const World: React.FC<PropsWithChildren & WorldProps> = ({ children, even
         if (!applicationRef) {
             return;
         }
-        canvasRef.current?.appendChild(applicationRef.canvas);
+        const canvas = canvasRef.current;
+        canvas?.appendChild(applicationRef.canvas);
 
         return () => {
             if (applicationRef) {
-                canvasRef.current?.removeChild(applicationRef.canvas);
+                canvas?.removeChild(applicationRef.canvas);
             }
         };
-    }, [canvasRef.current, applicationRef]);
+    }, [canvasRef, applicationRef]);
 
     useEffect(() => {
         if (applicationRef) {