Exhaustive hooks (#300)

package.json

@@ -32,7 +32,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/runtime": "^7.9.2",
-    "@polkadot/dev": "^0.51.7",
+    "@polkadot/dev": "^0.51.9",
     "@polkadot/ts": "^0.3.14",
     "@types/jest": "^25.1.4",
     "babel-plugin-transform-vue-template": "^0.4.2",

packages/example-react/src/index.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import Identicon from '@polkadot/react-identicon';
 import keyring from '@polkadot/ui-keyring';
@@ -24,19 +24,23 @@ function App ({ className }: Props): React.ReactElement<Props> | null {
   const [phrase, setPhrase] = useState<string | null>(null);
   const [ss58Format, setSS58Format] = useState(42);
 
-  const _onClickNew = (): void => {
-    const phrase = mnemonicGenerate(12);
-    const { address } = keyring.createFromUri(phrase);
+  const _onClickNew = useCallback(
+    (): void => {
+      const phrase = mnemonicGenerate(12);
+      const { address } = keyring.createFromUri(phrase);
 
-    setAddress(keyring.encodeAddress(address, ss58Format));
-    setPhrase(phrase);
-  };
+      setAddress(keyring.encodeAddress(address, ss58Format));
+      setPhrase(phrase);
+    },
+    [ss58Format]
+  );
   const _onChangeSS58Format = ({ currentTarget: { value } }: React.SyntheticEvent<HTMLSelectElement>): void => {
     setSS58Format(parseInt(value, 10));
   };
 
   useEffect((): void => {
     _onClickNew();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect((): void => {

packages/exampleReactNative/App.tsx

@@ -47,7 +47,7 @@ const styles = StyleSheet.create({
 const globalAny = global as unknown as Window;
 
 export default function App (): React.ReactElement<{}> | null {
-  const [ready, setReady] = useState(false);
+  const [isReady, setReady] = useState(false);
   const [address, setAddress] = useState<string | null>(null);
   const [phrase, setPhrase] = useState<string | null>(null);
   const [ss58Format, setSS58Format] = useState(42);
@@ -65,12 +65,13 @@ export default function App (): React.ReactElement<{}> | null {
   };
 
   useEffect((): void => {
-    ready && _onClickNew();
-  }, []);
+    isReady && _onClickNew();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isReady]);
 
   useEffect((): void => {
-    ready && address && setAddress(keyring.encodeAddress(address, ss58Format));
-  }, [address, ss58Format]);
+    isReady && address && setAddress(keyring.encodeAddress(address, ss58Format));
+  }, [address, isReady, ss58Format]);
 
   const initialize = async (): Promise<void> => {
     try {
@@ -84,11 +85,11 @@ export default function App (): React.ReactElement<{}> | null {
     _onClickNew();
   };
 
-  if (!ready) {
+  if (!isReady) {
     initialize();
   }
 
-  if (!ready || !address || !phrase) {
+  if (!isReady || !address || !phrase) {
     return null;
   }
 

packages/exampleReactNative/package.json

@@ -40,9 +40,9 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/runtime": "^7.9.2",
-    "@polkadot/keyring": "^2.6.2",
-    "@polkadot/util": "^2.6.2",
-    "@polkadot/util-crypto": "^2.6.2",
+    "@polkadot/keyring": "^2.7.0-beta.8",
+    "@polkadot/util": "^2.7.0-beta.8",
+    "@polkadot/util-crypto": "^2.7.0-beta.8",
     "@react-native-community/cli-platform-ios": "^4.3.0",
     "@types/react-test-renderer": "16.9.2",
     "babel-jest": "^25.1.0",

packages/react-identicon/package.json

@@ -26,9 +26,9 @@
     "react-is": "*"
   },
   "devDependencies": {
-    "@polkadot/keyring": "^2.6.2",
-    "@polkadot/util": "^2.6.2",
-    "@polkadot/util-crypto": "^2.6.2",
+    "@polkadot/keyring": "^2.7.0-beta.8",
+    "@polkadot/util": "^2.7.0-beta.8",
+    "@polkadot/util-crypto": "^2.7.0-beta.8",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.9.5",
     "@types/styled-components": "^5.0.1",

packages/reactnative-identicon/package.json

@@ -19,7 +19,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@polkadot/util-crypto": "^2.6.2",
+    "@polkadot/util-crypto": "^2.7.0-beta.8",
     "@types/react-native": "^0.61.23"
   }
 }

packages/ui-keyring/package.json

@@ -27,9 +27,9 @@
     "store": "^2.0.12"
   },
   "devDependencies": {
-    "@polkadot/keyring": "^2.6.2",
-    "@polkadot/types": "^1.8.1",
-    "@polkadot/util": "^2.6.2",
+    "@polkadot/keyring": "^2.7.0-beta.8",
+    "@polkadot/types": "^1.9.0-beta.12",
+    "@polkadot/util": "^2.7.0-beta.8",
     "@types/ledgerhq__hw-transport-node-hid": "^4.22.1",
     "@types/ledgerhq__hw-transport-u2f": "^4.21.1",
     "@types/mkdirp": "^1.0.0",

packages/ui-settings/package.json

@@ -14,7 +14,7 @@
     "store": "^2.0.12"
   },
   "devDependencies": {
-    "@polkadot/util": "^2.6.2",
+    "@polkadot/util": "^2.7.0-beta.8",
     "@types/store": "^2.0.2"
   },
   "peerDependencies": {

packages/ui-shared/package.json

@@ -17,8 +17,8 @@
     "@polkadot/util-crypto": "*"
   },
   "devDependencies": {
-    "@polkadot/util": "^2.6.2",
-    "@polkadot/util-crypto": "^2.6.2",
+    "@polkadot/util": "^2.7.0-beta.8",
+    "@polkadot/util-crypto": "^2.7.0-beta.8",
     "@types/color": "^3.0.1"
   }
 }

packages/vue-identicon/package.json

@@ -18,7 +18,7 @@
     "vue": "*"
   },
   "devDependencies": {
-    "@polkadot/util-crypto": "^2.6.2",
+    "@polkadot/util-crypto": "^2.7.0-beta.8",
     "vue": "^2.6.11"
   }
 }