Why is my react-three-fiber application gets stuck by doing some action on it?

[hammadsatti16]

I am very new to react-three-fiber and three.js. I don't have total concepts of the whole library and I am making a 3d application by looking up examples and documentation.

So basically I have a mesh component:

const Mesh= memo (forwardRef(({ ...props }, ref) => {

  const { camera } = useThree();

  const imageTextures = useLoader(TextureLoader, props.img);

  useEffect(() => {
    return () => {
      // Dispose of the texture
      imageTextures.dispose();

      // Dispose of the geometry
      if (ref.current && ref.current.object) {
        ref.current.object.geometry.dispose();
      }
    };
  }, []);
  

  useFrame(() => {
      ref.current.material.color.set(props.highlight);
    }
  });

  
  return (
    <>
      <mesh  {...props} ref={ref} receiveShadow >
        <planeGeometry args={props.clicked?[3,3]:[1, 1]} />
        <meshStandardMaterial map={imageTextures} side={THREE.DoubleSide} />
      </mesh>
    </>
  );
})
)`

And in my Home component, I have around 1000 images on my local Frontend application, and I am mapping my Mesh component for each of the image. The image is being textured onto the Mesh component.

const Home = memo(({ handleNodeClick, clickImg }) => {

  const { metaData, setMetaData,selectedImages, cluster, searchImages}=useContext(AppContext);
  const [refs, setRefs] = useState([]);
  const [thumbnails, setThumbnails] = useState(null);

  const coordinatesArray = useMemo(() => {
    const coordinates = [];
    let x = -30;
    let y = -15;

    for (let i = 0; i < 1000; i++) {
      if ((i + 1) % 50 === 0) {
        x += 1.2;
      } else if ((i + 1) % 50 === 1) {
        x = -30;
        y += 1.2;
      } else {
        x += 1.2;
      }
      coordinates.push({ x: x, y: y });
    }
    return coordinates;
  }, []);

  const checkPosition = (value, index, check) => {
    if (cluster === "3d" && check) {
      return [value[0], value[1] + 5, value[2] - 10];
    }
    if (cluster === "3d") {
      return value;
    }

    if (cluster === "2d" && check) {
      return [value[0], value[1], Math.random() * 7];
    }
    if (cluster === "2d") {
      return [value[0], value[1], (Math.random() * 7) - 5];
    }

    if (cluster === "grid" && check) {
      return [coordinatesArray[index].x, coordinatesArray[index].y, 3];
    }
    if(cluster === "grid"){
      return [coordinatesArray[index].x, coordinatesArray[index].y, 0]
    }
  };

  const connectedNodes = (currentNode) => {
    if (
      selectedImages.length === 0 ||
      selectedImages.length === 1 ||
      selectedImages[selectedImages.length - 1] === currentNode
    ) {
      return [];
    }

    const index = selectedImages.indexOf(currentNode);
    if (index !== -1) {
      const nextNodeKey =
        "ref" + parseInt(selectedImages[index + 1].match(/^\d+/)[0]).toString();
      return [refs[nextNodeKey]];
    } else {
      return [];
    }
  };

  useEffect(() => {
    const images = import.meta.glob("../../assets/thumbnails/*");
    setThumbnails(Object.keys(images));
  }, []);

  const cam = useRef();

  useEffect(() => {
    axios
      .post("http://localhost:8000/get-meta-data", {
        index_name: "myindex",
      })
      .then((res) => {
        setMetaData(res.data.meta_data);
        const refsObject = {};
        res.data.meta_data.forEach((metaItem) => {
          refsObject[
            "ref" + parseInt(metaItem.image_name.match(/^\d+/)[0]).toString()
          ] = createRef();
        });
        setRefs(refsObject);
      });
  }, []);

  return (
    <>
      <PerspectiveCamera
        ref={cam}
        zoom={2}
        makeDefault
        position={
          cluster === "grid"
            ? [15, -11, 110]
            : cluster === "2d"
            ? [50, 50, 100]
            : [51, 50, 100]
          // metaData.length > 0 && [
          //   metaData[metaData.length - 1].umap_coordinates.value[0] + 10,
          //   metaData[metaData.length - 1].umap_coordinates.value[1] + 10,
          //   metaData[metaData.length - 1].umap_coordinates.value[2] + 10,
          // ]
        }
      />
      <OrbitControls minDistance={1} maxDistance={200} />
          {thumbnails &&
            metaData.map((metaItem, metaIndex) => {
              return thumbnails.map((thumbItem) => {
                const thumbName = thumbItem.split("/");
                return (
                  thumbName[thumbName.length - 1] === metaItem.image_name && (
                    <Mesh
                      ref={
                        refs[
                          "ref" +
                            parseInt(
                              metaItem.image_name.match(/^\d+/)[0]
                            ).toString()
                        ]
                      }
                      position={checkPosition(
                        metaItem.umap_coordinates.value,
                        metaIndex,
                        parseInt(metaItem.image_name.match(/^\d+/)[0]) ==
                          clickImg
                      )}
                      highlight={
                        selectedImages.length > 0 || clickImg || searchImages.length >0
                          ? selectedImages.includes(metaItem.image_name) ||
                            parseInt(metaItem.image_name.match(/^\d+/)[0]) ==
                              clickImg || searchImages.includes(metaItem.image_name)
                            ? "#ff6666"
                            : "#4f4f4f"
                          : "#d2d2d2"
                      }
                      clicked={
                        parseInt(metaItem.image_name.match(/^\d+/)[0]) ==
                        clickImg
                      }
                      connectedTo={connectedNodes(metaItem.image_name)}
                      img={"/" + thumbName[thumbName.length - 1]}
                      onClick={(e) =>
                        handleNodeClick(
                          e,
                          parseInt(metaItem.image_name.match(/^\d+/)[0])
                        )
                      }
                    />
                  )
                );
              });
            })}
         
      <ambientLight intensity={1} />
    </>
  );
});

Why does my application gets stuck for about 10-20 seconds whenever I do something in my application eg if I click on one image mesh, it get stuck and does processing for about 10 20 seconds and then displays my required output.

As I said, I am very new to react-three-fiber and three.js, Am I doing something wrong? This is the idea that I am trying to achieve. https://explore.diffusionarchitecture.com/

Sorry that I cannot share the full code.