feat(useIsVersionAtLeast): improved to useMemo

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altiore/twa",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "React components for Telegram WebApp",
   "source": "./src/index.ts",
   "type": "module",

src/TwaLoader.tsx

@@ -3,6 +3,8 @@ import React, { FC, useEffect } from 'react';
 import { useTwa } from './useTwa';
 import { useVersionAtLeast } from './useVersionAtLeast';
 import useWebApp from './useWebApp';
+import { useIsVersionAtLeast } from './useIsVersionAtLeast';
+import useShowPopup from './useShowPopup';
 
 interface IProps {
 	loading?: React.JSX.Element;
@@ -30,6 +32,24 @@ export const TwaLoader: FC<IProps> = ({
 
 	const isCorrectVersion = useVersionAtLeast(minVersion ?? '6.2');
 
+	const isVersionAtLeast = useIsVersionAtLeast();
+
+	const showPopup = useShowPopup();
+
+	useEffect(() => {
+		if (
+			isVersionAtLeast('6.2') &&
+			minVersion &&
+			parseFloat(minVersion.toString()) > 6.2
+		) {
+			showPopup({
+				message: `Please update your Telegram app to the latest version to use this app. Minimum supported version is "${minVersion}"`,
+			})
+				.then()
+				.catch(console.error);
+		}
+	}, [minVersion, isVersionAtLeast, showPopup]);
+
 	const webApp = useWebApp();
 
 	if (isLoading) {

src/useIsVersionAtLeast.ts

@@ -1,5 +1,5 @@
 import { useWebApp } from './core';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 /**
  * A hook that shows version minimum check
@@ -13,8 +13,12 @@ export type VersionAtLeastFunction = (version: string | number) => boolean;
 export const useIsVersionAtLeast = (): VersionAtLeastFunction => {
 	const WebApp = useWebApp();
 
+	const _isVersionAtLeast = useMemo(() => {
+		return WebApp?.isVersionAtLeast;
+	}, [WebApp]);
+
 	return useCallback(
-		(version: string | number) => WebApp?.isVersionAtLeast?.(version) ?? false,
-		[WebApp],
+		(version: string | number) => _isVersionAtLeast?.(version) ?? false,
+		[_isVersionAtLeast],
 	);
 };