refactor: replace useState with useRef in textures context

src/context/Textures.tsx

@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useEffect, useState } from "react";
+import { createContext, ReactNode, useContext, useEffect, useRef } from "react";
 import * as PIXI from "pixi.js";
 
 import { LoadingContext } from "./Loading";
@@ -10,7 +10,7 @@ import _blockData from "@/data/blocks/data.json";
 const blockData: BlockData = _blockData;
 
 interface Context {
-	missingTexture: PIXI.Texture | undefined;
+	missingTexture: PIXI.Texture;
 	textures: Record<string, PIXI.Texture>;
 	programmerArtTextures: Record<string, PIXI.Texture>;
 	solidTextures: Record<string, PIXI.Texture>;
@@ -25,31 +25,32 @@ export const TexturesContext = createContext<Context>({} as Context);
 export const TexturesProvider = ({ children }: Props) => {
 	const { setLoading } = useContext(LoadingContext);
 
-	const [missingTexture, setMissingTexture] = useState<PIXI.Texture>();
-	const [textures, setTextures] = useState<Record<string, PIXI.Texture>>({});
-	const [programmerArtTextures, setProgrammerArtTextures] = useState<Record<string, PIXI.Texture>>({});
-	const [solidTextures, setSolidTextures] = useState<Record<string, PIXI.Texture>>({});
-
-	useEffect(() => {
 	// Load missing texture through data string just incase of network errors
-		const missingBaseTexture = new PIXI.BaseTexture(
+	const missingTextureRef = useRef<PIXI.Texture>(
+		new PIXI.Texture(
+			new PIXI.BaseTexture(
 				"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGUlEQVR42mPABX4w/MCKaKJhVMPgcOuoBgDZRfgBVl5QdQAAAABJRU5ErkJggg=="
+			)
+		)
 	);
-		setMissingTexture(new PIXI.Texture(missingBaseTexture));
+	const texturesRef = useRef<Record<string, PIXI.Texture>>({});
+	const programmerArtTexturesRef = useRef<Record<string, PIXI.Texture>>({});
+	const solidTexturesRef = useRef<Record<string, PIXI.Texture>>({});
 
 	// Load textures
+	useEffect(() => {
 		// Add air texture
 		const airBaseTexture = new PIXI.BaseTexture("/blocks/air.png");
 		const airTexture = new PIXI.Texture(airBaseTexture);
 
 		const sheet = new PIXI.Spritesheet(PIXI.BaseTexture.from("/blocks/spritesheet.png"), spritesheet);
 		sheet.parse().then((t) => {
-			setTextures({ ...t, "air.png": airTexture });
+			texturesRef.current = { ...t, "air.png": airTexture };
 		});
 
 		const programmerArtSheet = new PIXI.Spritesheet(PIXI.BaseTexture.from("/blocks/programmer-art/spritesheet.png"), programmerArtSpritesheet);
 		programmerArtSheet.parse().then((t) => {
-			setProgrammerArtTextures({ ...t, "air.png": airTexture });
+			programmerArtTexturesRef.current = { ...t, "air.png": airTexture };
 		});
 
 		// Load solid textures
@@ -74,9 +75,20 @@ export const TexturesProvider = ({ children }: Props) => {
 			solidTexturesCollection[blockName] = texture;
 		});
 
-		setSolidTextures(solidTexturesCollection);
+		solidTexturesRef.current = solidTexturesCollection;
 		setLoading(false);
 	}, []);
 
-	return <TexturesContext.Provider value={{ missingTexture, textures, programmerArtTextures, solidTextures }}>{children}</TexturesContext.Provider>;
+	return (
+		<TexturesContext.Provider
+			value={{
+				missingTexture: missingTextureRef.current,
+				textures: texturesRef.current,
+				programmerArtTextures: programmerArtTexturesRef.current,
+				solidTextures: solidTexturesRef.current,
+			}}
+		>
+			{children}
+		</TexturesContext.Provider>
+	);
 };