useMem to replace useEffect/useState (#365)

packages/react-qr/src/Display.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, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
@@ -46,9 +46,13 @@ function getDataUrl (value: Uint8Array): string {
 
 function Display ({ className, size, skipEncoding, style, value }: Props): React.ReactElement<Props> | null {
   const [{ image }, setFrameState] = useState<FrameState>({ frameIdx: 0, frames: [], image: null, valueHash: null });
-  const [containerStyle, setContainerStyle] = useState(createImgSize(size));
   const timerRef = useRef<TimerState>({ timerDelay: FRAME_DELAY, timerId: null });
 
+  const containerStyle = useMemo(
+    () => createImgSize(size),
+    [size]
+  );
+
   // run on initial load to setup the global timer and provide and unsubscribe
   useEffect((): () => void => {
     const nextFrame = () => setFrameState((state): FrameState => {
@@ -86,10 +90,6 @@ function Display ({ className, size, skipEncoding, style, value }: Props): React
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect((): void => {
-    setContainerStyle(createImgSize(size));
-  }, [size]);
-
   useEffect((): void => {
     setFrameState((state): FrameState => {
       const valueHash = xxhashAsHex(value);

packages/react-qr/src/DisplayAddress.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, { useMemo } from 'react';
 
 import { createAddressPayload } from './util';
 import QrDisplay from './Display';
@@ -16,11 +16,10 @@ interface Props {
 }
 
 function DisplayExtrinsic ({ address, className, genesisHash, size, style }: Props): React.ReactElement<Props> | null {
-  const [data, setData] = useState<Uint8Array | null>(null);
-
-  useEffect((): void => {
-    setData(createAddressPayload(address, genesisHash));
-  }, [address, genesisHash]);
+  const data = useMemo(
+    () => createAddressPayload(address, genesisHash),
+    [address, genesisHash]
+  );
 
   if (!data) {
     return null;

packages/react-qr/src/DisplayPayload.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, { useMemo } from 'react';
 
 import { createSignPayload } from './util';
 import QrDisplay from './Display';
@@ -18,11 +18,10 @@ interface Props {
 }
 
 function DisplayPayload ({ address, className, cmd, genesisHash, payload, size, style }: Props): React.ReactElement<Props> | null {
-  const [data, setData] = useState<Uint8Array | null>(null);
-
-  useEffect((): void => {
-    setData(createSignPayload(address, cmd, payload, genesisHash));
-  }, [address, cmd, payload, genesisHash]);
+  const data = useMemo(
+    () => createSignPayload(address, cmd, payload, genesisHash),
+    [address, cmd, payload, genesisHash]
+  );
 
   if (!data) {
     return null;

packages/react-qr/src/NetworkSpecs.tsx

@@ -4,7 +4,7 @@
 
 import { NetworkSpecsStruct } from '@polkadot/ui-settings';
 
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import QrDisplay from './Display';
 
 import { encodeString } from './util';
@@ -17,11 +17,10 @@ interface Props {
 }
 
 function DisplayNetworkSpecs ({ className, networkSpecs, size, style }: Props): React.ReactElement<Props> | null {
-  const [data, setData] = useState<Uint8Array | null>(null);
-
-  useEffect((): void => {
-    setData(encodeString(JSON.stringify(networkSpecs)));
-  }, [networkSpecs]);
+  const data = useMemo(
+    () => encodeString(JSON.stringify(networkSpecs)),
+    [networkSpecs]
+  );
 
   if (!data) {
     return null;

packages/react-qr/src/Scan.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, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Reader from 'react-qr-reader';
 import styled from 'styled-components';
 
@@ -24,11 +24,10 @@ const DEFAULT_ERROR = (error: Error): void => {
 };
 
 function Scan ({ className, delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style }: Props): React.ReactElement<Props> {
-  const [containerStyle, setContainerStyle] = useState(createImgSize(size));
-
-  useEffect((): void => {
-    setContainerStyle(createImgSize(size));
-  }, [size]);
+  const containerStyle = useMemo(
+    () => createImgSize(size),
+    [size]
+  );
 
   const _onError = useCallback(
     (error: Error) => onError(error),