Additional wrappers via React.memo (#2377)

* More React.memo

* Last non-memo functional components in staking

packages/apps/src/Apps.tsx

@@ -103,7 +103,7 @@ function Apps ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Apps)`
+export default React.memo(styled(Apps)`
   align-items: stretch;
   box-sizing: border-box;
   display: flex;
@@ -219,4 +219,4 @@ export default styled(Apps)`
       opacity: 1;
     }
   }
-`;
+`);

packages/apps/src/Content/index.tsx

@@ -63,7 +63,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Content)`
+export default React.memo(styled(Content)`
   background: #fafafa;
   display: flex;
   flex-direction: column;
@@ -82,4 +82,4 @@ export default styled(Content)`
   .connecting {
     padding: 1rem 0;
   }
-`;
+`);

packages/apps/src/SideBar/ChainInfo.tsx

@@ -41,7 +41,7 @@ function ChainInfo ({ className, onClick }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(ChainInfo)`
+export default React.memo(styled(ChainInfo)`
   border-top: 0.5rem solid transparent;
   cursor: pointer;
   padding: 0.75rem 1rem;
@@ -75,4 +75,4 @@ export default styled(ChainInfo)`
       }
     }
   }
-`;
+`);

packages/apps/src/SideBar/NodeInfo.tsx

@@ -31,7 +31,7 @@ function NodeInfo ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(NodeInfo)`
+export default React.memo(styled(NodeInfo)`
   background: transparent;
   color: white;
   font-size: 0.75rem;
@@ -49,4 +49,4 @@ export default styled(NodeInfo)`
       margin-bottom: 0.5rem;
     }
   }
-`;
+`);

packages/apps/src/SideBar/index.tsx

@@ -152,7 +152,7 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, isMenuOpen,
 
 const sideBorderWidth = '0.65rem';
 
-export default styled(SideBar)`
+export default React.memo(styled(SideBar)`
   display: flex;
   position: relative;
   transition: width 0.3s linear;
@@ -287,4 +287,4 @@ export default styled(SideBar)`
       top: -2.9rem !important;
     `}
   }
-`;
+`);

packages/apps/src/TopBar.tsx

@@ -27,7 +27,7 @@ function TopBar ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(TopBar)`
+export default React.memo(styled(TopBar)`
   background: #f2f2f2;
   font-size: 0.85rem;
   line-height: 1rem;
@@ -53,4 +53,4 @@ export default styled(TopBar)`
       border-width: 0;
     }
   }
-`;
+`);

packages/apps/src/overlays/Base.tsx

@@ -46,7 +46,7 @@ function BaseOverlay ({ children, className, icon, type }: Props): React.ReactEl
   );
 }
 
-export default styled(BaseOverlay)`
+export default React.memo(styled(BaseOverlay)`
   border-bottom: 1px solid transparent;
   left: 0;
   line-height: 1.5em;
@@ -95,4 +95,4 @@ export default styled(BaseOverlay)`
     right: 0.75em;
     top: 0.75em;
   }
-`;
+`);

packages/page-123code/src/AccountSelector.tsx

@@ -40,10 +40,10 @@ function AccountSelector ({ className, onChange }: Props): React.ReactElement<Pr
   );
 }
 
-export default styled(AccountSelector)`
+export default React.memo(styled(AccountSelector)`
   align-items: flex-end;
 
   .summary {
     text-align: center;
   }
-`;
+`);

packages/page-123code/src/Summary.tsx

@@ -22,7 +22,7 @@ function Summary ({ children, className, style }: Props): React.ReactElement<Pro
   );
 }
 
-export default styled(Summary)`
+export default React.memo(styled(Summary)`
   opacity: 0.5;
   padding: 1rem 1.5rem;
-`;
+`);

packages/page-accounts/src/Account.tsx

@@ -428,7 +428,7 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
   );
 }
 
-export default styled(Account)`
+export default React.memo(styled(Account)`
   .accounts--Account-buttons {
     text-align: right;
   }
@@ -446,4 +446,4 @@ export default styled(Account)`
   .name--input {
     width: 16rem;
   }
-`;
+`);

packages/page-accounts/src/Banner.tsx

@@ -86,7 +86,7 @@ function Banner ({ className }: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default styled(Banner)`
+export default React.memo(styled(Banner)`
   padding: 0 0.5rem 0.5rem;
 
   .box {
@@ -100,4 +100,4 @@ export default styled(Banner)`
       max-width: 50rem;
     }
   }
-`;
+`);

packages/page-accounts/src/Overview.tsx

@@ -153,7 +153,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
   );
 }
 
-export default styled(Overview)`
+export default React.memo(styled(Overview)`
   .filter--tags {
     .ui--Dropdown {
       padding-left: 0;
@@ -163,4 +163,4 @@ export default styled(Overview)`
       }
     }
   }
-`;
+`);

packages/page-accounts/src/Vanity/Match.tsx

@@ -62,7 +62,7 @@ function Match ({ address, className, count, offset, onCreateToggle, onRemove, s
   );
 }
 
-export default styled(Match)`
+export default React.memo(styled(Match)`
   text-align: center;
 
   &:hover {
@@ -101,4 +101,4 @@ export default styled(Match)`
     opacity: 0.45;
     padding: 0 1rem;
   }
-`;
+`);

packages/page-accounts/src/modals/Create.tsx

@@ -318,8 +318,8 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
   );
 }
 
-export default styled(Create)`
+export default React.memo(styled(Create)`
   .accounts--Creator-advanced {
     margin-top: 1rem;
   }
-`;
+`);

packages/page-accounts/src/modals/Qr.tsx

@@ -101,9 +101,9 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
   );
 }
 
-export default styled(QrModal)`
+export default React.memo(styled(QrModal)`
   .qr-wrapper {
     margin: 0 auto;
     max-width: 30rem;
   }
-`;
+`);

packages/page-accounts/src/modals/Transfer.tsx

@@ -139,7 +139,7 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
   );
 }
 
-export default styled(Transfer)`
+export default React.memo(styled(Transfer)`
   article.padded {
     box-shadow: none;
     margin-left: 2rem;
@@ -158,4 +158,4 @@ export default styled(Transfer)`
   label.with-help {
     flex-basis: 10rem;
   }
-`;
+`);

packages/page-address-book/src/Address.tsx

@@ -306,7 +306,7 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
   );
 }
 
-export default styled(Address)`
+export default React.memo(styled(Address)`
   .addresses--Address-buttons {
     text-align: right;
   }
@@ -324,4 +324,4 @@ export default styled(Address)`
   .name--input {
     width: 16rem;
   }
-`;
+`);

packages/page-address-book/src/Overview.tsx

@@ -90,7 +90,7 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
   );
 }
 
-export default styled(Overview)`
+export default React.memo(styled(Overview)`
   .filter--tags {
     .ui--Dropdown {
       padding-left: 0;
@@ -100,4 +100,4 @@ export default styled(Overview)`
       }
     }
   }
-`;
+`);

packages/page-claims/src/Claim.tsx

@@ -78,7 +78,7 @@ function Claim ({ button, className, ethereumAddress }: Props): React.ReactEleme
   );
 }
 
-export default styled(Claim)`
+export default React.memo(styled(Claim)`
   font-size: 1.15rem;
   display: flex;
   flex-direction: column;
@@ -103,4 +103,4 @@ export default styled(Claim)`
     font-size: 2.5rem;
     font-weight: 200;
   }
-`;
+`);

packages/page-contracts/src/Contracts/Call.tsx

@@ -252,7 +252,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default styled(Call)`
+export default React.memo(styled(Call)`
   .rpc-toggle {
     margin-top: 1rem;
     display: flex;
@@ -262,4 +262,4 @@ export default styled(Call)`
   .clear-all {
     float: right;
   }
-`;
+`);

packages/page-contracts/src/Contracts/Outcome.tsx

@@ -55,7 +55,7 @@ function Outcome (props: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default styled(Outcome)`
+export default React.memo(styled(Outcome)`
   & {
     .info {
       display: inline-flex;
@@ -101,4 +101,4 @@ export default styled(Outcome)`
       }
     }
   }
-`;
+`);

packages/page-council/src/index.tsx

@@ -57,8 +57,8 @@ function CouncilApp ({ basePath, className }: Props): React.ReactElement<Props>
   );
 }
 
-export default styled(CouncilApp)`
+export default React.memo(styled(CouncilApp)`
   .council--hidden {
     display: none;
   }
-`;
+`);

packages/page-dashboard/src/Entry.tsx

@@ -34,8 +34,8 @@ function Entry ({ className, route: { i18n, icon, name } }: Props): React.ReactE
   );
 }
 
-export default styled(Entry)`
+export default React.memo(styled(Entry)`
   .name {
     margin-top: 0.75rem;
   }
-`;
+`);

packages/page-dashboard/src/index.tsx

@@ -52,7 +52,7 @@ function DashboardApp ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(DashboardApp)`
+export default React.memo(styled(DashboardApp)`
   .routes {
     display: flex;
     flex-direction: row;
@@ -65,4 +65,4 @@ export default styled(DashboardApp)`
       text-align: center;
     }
   }
-`;
+`);

packages/page-democracy/src/Overview/DispatchBlock.tsx

@@ -24,7 +24,7 @@ interface Entry {
   referendumIndex: ReferendumIndex;
 }
 
-export default function DispatchBlock ({ entries, keyPrefix, storageKey }: Props): React.ReactElement<Props> | null {
+function DispatchBlock ({ entries, keyPrefix, storageKey }: Props): React.ReactElement<Props> | null {
   const [blockNumber, setBlockNumber] = useState<BlockNumber | undefined>();
   const [expanded, setExpanded] = useState<Entry[]>([]);
 
@@ -67,3 +67,5 @@ export default function DispatchBlock ({ entries, keyPrefix, storageKey }: Props
     </>
   );
 }
+
+export default React.memo(DispatchBlock);

packages/page-democracy/src/Overview/DispatchEntry.tsx

@@ -23,7 +23,7 @@ interface Props {
   referendumIndex: ReferendumIndex;
 }
 
-export default function DispatchEntry ({ blockNumber, hash, referendumIndex }: Props): React.ReactElement<Props> {
+function DispatchEntry ({ blockNumber, hash, referendumIndex }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []) || new BN(0);
@@ -65,3 +65,5 @@ export default function DispatchEntry ({ blockNumber, hash, referendumIndex }: P
     </tr>
   );
 }
+
+export default React.memo(DispatchEntry);

packages/page-democracy/src/Overview/DispatchQueue.tsx

@@ -15,7 +15,7 @@ interface Props {
   className?: string;
 }
 
-export default function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null {
+function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const queued = useCall<[BlockNumber, Hash, ReferendumIndex][]>(api.query.democracy.dispatchQueue, []);
@@ -49,3 +49,5 @@ export default function DispatchQueue ({ className }: Props): React.ReactElement
     </div>
   );
 }
+
+export default React.memo(DispatchQueue);

packages/page-democracy/src/Overview/Externals.tsx

@@ -19,7 +19,7 @@ interface Props {
   className?: string;
 }
 
-export default function Externals ({ className }: Props): React.ReactElement<Props> | null {
+function Externals ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const external = useCall<Option<ITuple<[Hash, VoteThreshold]>>>(api.query.democracy.nextExternal, []);
@@ -84,3 +84,5 @@ export default function Externals ({ className }: Props): React.ReactElement<Pro
     </div>
   );
 }
+
+export default React.memo(Externals);

packages/page-democracy/src/Overview/PreImage.tsx

@@ -89,9 +89,9 @@ function PreImage ({ className, isImminent: propsIsImminent, matchHash, onClose
   );
 }
 
-export default styled(PreImage)`
+export default React.memo(styled(PreImage)`
   .toggleImminent {
     margin: 0.5rem 0;
     text-align: right;
   }
-`;
+`);

packages/page-democracy/src/Overview/PreImageButton.tsx

@@ -18,7 +18,7 @@ interface Props {
   withoutOr?: boolean;
 }
 
-export default function PreImageButton ({ hash, isImminent, proposal, withoutOr }: Props): React.ReactElement<Props> | null {
+function PreImageButton ({ hash, isImminent, proposal, withoutOr }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const [isPreimageOpen, togglePreimage] = useToggle();
 
@@ -45,3 +45,5 @@ export default function PreImageButton ({ hash, isImminent, proposal, withoutOr
     </>
   );
 }
+
+export default React.memo(PreImageButton);

packages/page-democracy/src/Overview/Proposal.tsx

@@ -77,7 +77,7 @@ function Proposal ({ className, value: { balance, hash, index, proposal, propose
   );
 }
 
-export default styled(Proposal)`
+export default React.memo(styled(Proposal)`
   .identityIcon {
     &:first-child {
       padding-top: 0;
@@ -87,4 +87,4 @@ export default styled(Proposal)`
       margin-bottom: 4px;
     }
   }
-`;
+`);

packages/page-democracy/src/Overview/ProposalCell.tsx

@@ -31,7 +31,7 @@ function formatDocs (meta?: FunctionMetadataLatest): React.ReactNode | null {
   return strings.slice(0, firstEmpty).join(' ');
 }
 
-export default function ProposalCell ({ className, proposal, proposalHash }: Props): React.ReactElement<Props> {
+function ProposalCell ({ className, proposal, proposalHash }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   if (!proposal) {
@@ -59,3 +59,5 @@ export default function ProposalCell ({ className, proposal, proposalHash }: Pro
     </td>
   );
 }
+
+export default React.memo(ProposalCell);

packages/page-democracy/src/Overview/Proposals.tsx

@@ -15,7 +15,7 @@ interface Props {
   className?: string;
 }
 
-export default function Proposals ({ className }: Props): React.ReactElement<Props> {
+function Proposals ({ className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const proposals = useCall<DeriveProposal[]>(api.derive.democracy.proposals, []);
@@ -43,3 +43,5 @@ export default function Proposals ({ className }: Props): React.ReactElement<Pro
     </div>
   );
 }
+
+export default React.memo(Proposals);

packages/page-democracy/src/Overview/Propose.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import BN from 'bn.js';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { Available } from '@polkadot/react-query';
 import { isHex } from '@polkadot/util';
@@ -15,16 +15,16 @@ interface Props {
   onClose: () => void;
 }
 
-export default function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
+function Propose ({ className, onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [balance, setBalance] = useState<BN | undefined>();
   const [{ isHashValid, hash }, setHash] = useState<{ isHashValid: boolean; hash?: string }>({ isHashValid: false, hash: '' });
 
-  const _onChangeHash = (hash?: string): void => setHash({
-    isHashValid: isHex(hash, 256),
-    hash
-  });
+  const _onChangeHash = useCallback(
+    (hash?: string): void => setHash({ isHashValid: isHex(hash, 256), hash }),
+    []
+  );
 
   return (
     <Modal
@@ -67,3 +67,5 @@ export default function Propose ({ className, onClose }: Props): React.ReactElem
     </Modal>
   );
 }
+
+export default React.memo(Propose);

packages/page-democracy/src/Overview/Referendum.tsx

@@ -138,7 +138,7 @@ function Referendum ({ className, idNumber, value }: Props): React.ReactElement<
   );
 }
 
-export default styled(Referendum)`
+export default React.memo(styled(Referendum)`
   .democracy--Referendum-results {
     margin-bottom: 1em;
 
@@ -146,4 +146,4 @@ export default styled(Referendum)`
       text-align: center;
     }
   }
-`;
+`);

packages/page-democracy/src/Overview/Referendums.tsx

@@ -15,7 +15,7 @@ interface Props {
   className?: string;
 }
 
-export default function Referendums ({ className }: Props): React.ReactElement<Props> {
+function Referendums ({ className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const referendums = useCall<DerivedReferendum[]>(api.derive.democracy.referendums, []);
@@ -44,3 +44,5 @@ export default function Referendums ({ className }: Props): React.ReactElement<P
     </div>
   );
 }
+
+export default React.memo(Referendums);

packages/page-democracy/src/Overview/Seconding.tsx

@@ -18,7 +18,7 @@ interface Props {
   proposalId: BN | number;
 }
 
-export default function Seconding ({ depositors, proposal, proposalId }: Props): React.ReactElement<Props> | null {
+function Seconding ({ depositors, proposal, proposalId }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const [accountId, setAccountId] = useState<string | null>(null);
@@ -73,3 +73,5 @@ export default function Seconding ({ depositors, proposal, proposalId }: Props):
     </>
   );
 }
+
+export default React.memo(Seconding);

packages/page-democracy/src/Overview/Summary.tsx

@@ -2,19 +2,18 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
 import BN from 'bn.js';
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
 const ZERO = new BN(0);
 
-function Summary ({ t }: Props): React.ReactElement<Props> {
+function Summary (): React.ReactElement<{}> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const activeProposals = useCall<any[]>(api.derive.democracy.proposals, []);
   const bestNumber = useCall<BN>(api.derive.chain.bestNumber, []);
@@ -56,4 +55,4 @@ function Summary ({ t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(Summary);
+export default React.memo(Summary);

packages/page-democracy/src/Overview/Voting.tsx

@@ -4,7 +4,7 @@
 
 import { PropIndex, Proposal } from '@polkadot/types/interfaces';
 
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Button, Dropdown, Modal, ProposedAction, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
 import { useAccounts, useApi, useToggle } from '@polkadot/react-hooks';
 import { isBoolean } from '@polkadot/util';
@@ -18,7 +18,7 @@ interface Props {
 
 const CONVICTIONS: [number, number][] = [1, 2, 4, 8, 16, 32].map((lock, index) => [index + 1, lock]);
 
-export default function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> | null {
+function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const { hasAccounts } = useAccounts();
@@ -43,12 +43,15 @@ export default function Voting ({ proposal, referendumId }: Props): React.ReactE
     }))
   ], [t, enact]);
 
+  const _onChangeVote = useCallback(
+    (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true),
+    []
+  );
+
   if (!hasAccounts) {
     return null;
   }
 
-  const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
-
   return (
     <>
       {isVotingOpen && (
@@ -91,3 +94,5 @@ export default function Voting ({ proposal, referendumId }: Props): React.ReactE
     </>
   );
 }
+
+export default React.memo(Voting);

packages/page-democracy/src/Overview/index.tsx

@@ -2,9 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { Button } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import DispatchQueue from './DispatchQueue';
@@ -21,11 +22,8 @@ interface Props {
 
 function Overview ({ className }: Props): React.ReactElement {
   const { t } = useTranslation();
-  const [isPreimageOpen, setIsPreimageOpen] = useState(false);
-  const [isProposeOpen, setIsProposeOpen] = useState(false);
-
-  const _togglePreimage = (): void => setIsPreimageOpen(!isPreimageOpen);
-  const _togglePropose = (): void => setIsProposeOpen(!isProposeOpen);
+  const [isPreimageOpen, togglePreimage] = useToggle();
+  const [isProposeOpen, togglePropose] = useToggle();
 
   return (
     <div className={className}>
@@ -35,21 +33,21 @@ function Overview ({ className }: Props): React.ReactElement {
           icon='add'
           isPrimary
           label={t('Submit preimage')}
-          onClick={_togglePreimage}
+          onClick={togglePreimage}
         />
         <Button.Or />
         <Button
           icon='add'
           isPrimary
           label={t('Submit proposal')}
-          onClick={_togglePropose}
+          onClick={togglePropose}
         />
       </Button.Group>
       {isPreimageOpen && (
-        <PreImage onClose={_togglePreimage} />
+        <PreImage onClose={togglePreimage} />
       )}
       {isProposeOpen && (
-        <Propose onClose={_togglePropose} />
+        <Propose onClose={togglePropose} />
       )}
       <Referendums />
       <Proposals />
@@ -59,8 +57,8 @@ function Overview ({ className }: Props): React.ReactElement {
   );
 }
 
-export default styled(Overview)`
+export default React.memo(styled(Overview)`
   .proposalSection {
     margin-bottom: 1.5rem;
   }
-`;
+`);

packages/page-explorer/src/BestHash.tsx

@@ -13,7 +13,7 @@ interface Props extends BareProps, CallProps {
   label?: React.ReactNode;
 }
 
-export default function BestHash ({ className, label, style }: Props): React.ReactElement<Props> {
+function BestHash ({ className, label, style }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const newHead = useCall<Header>(api.rpc.chain.subscribeNewHeads, []);
 
@@ -26,3 +26,5 @@ export default function BestHash ({ className, label, style }: Props): React.Rea
     </div>
   );
 }
+
+export default React.memo(BestHash);

packages/page-explorer/src/BlockHeader.tsx

@@ -82,7 +82,7 @@ function BlockHeader ({ className, isSummary, value, withExplorer, withLink }: P
   );
 }
 
-export default styled(BlockHeader)`
+export default React.memo(styled(BlockHeader)`
   .author {
     font-size: 1rem;
     text-align: right;
@@ -162,4 +162,4 @@ export default styled(BlockHeader)`
       }
     }
   }
-`;
+`);

packages/page-explorer/src/BlockHeaders.tsx

@@ -11,7 +11,7 @@ interface Props {
   headers: HeaderExtended[];
 }
 
-export default function BlockHeaders ({ headers }: Props): React.ReactElement<Props> {
+function BlockHeaders ({ headers }: Props): React.ReactElement<Props> {
   return (
     <>
       {headers.map((header, index): React.ReactNode => (
@@ -25,3 +25,5 @@ export default function BlockHeaders ({ headers }: Props): React.ReactElement<Pr
     </>
   );
 }
+
+export default React.memo(BlockHeaders);

packages/page-explorer/src/BlockInfo/ByHash.tsx

@@ -4,7 +4,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { EventRecord, SignedBlock } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -13,12 +12,12 @@ import { Columar } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 import BlockHeader from '../BlockHeader';
-import translate from '../translate';
 import Events from './Events';
 import Extrinsics from './Extrinsics';
 import Logs from './Logs';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   value: string;
 }
 
@@ -53,7 +52,7 @@ function BlockByHash ({ className, value }: Props): React.ReactElement<Props> |
   );
 }
 
-export default translate(
+export default React.memo(
   styled(BlockByHash)`
     .exporer--BlockByHash-BlockHeader {
       border: none;

packages/page-explorer/src/BlockInfo/ByNumber.tsx

@@ -14,7 +14,7 @@ interface Props {
   value: string;
 }
 
-export default function BlockByNumber ({ value }: Props): React.ReactElement<Props> | null {
+function BlockByNumber ({ value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const getBlockHash = useCall<Hash>(api.rpc.chain.getBlockHash as any, [value]);
 
@@ -26,3 +26,5 @@ export default function BlockByNumber ({ value }: Props): React.ReactElement<Pro
     <BlockByHash value={getBlockHash.toHex()} />
   );
 }
+
+export default React.memo(BlockByNumber);

packages/page-explorer/src/BlockInfo/Events.tsx

@@ -3,19 +3,20 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { EventRecord } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Column } from '@polkadot/react-components';
 
 import EventsDisplay from '../Events';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   value?: EventRecord[];
 }
 
-function Events ({ value, t }: Props): React.ReactElement<Props> | null {
+function Events ({ value }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+
   if (!value || !value.length) {
     return null;
   }
@@ -34,4 +35,4 @@ function Events ({ value, t }: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default translate(Events);
+export default React.memo(Events);

packages/page-explorer/src/BlockInfo/Extrinsics.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -11,16 +10,17 @@ import { registry } from '@polkadot/react-api';
 import { AddressMini, Call, Column, LinkExternal } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   blockNumber?: BlockNumber;
+  className?: string;
   label?: React.ReactNode;
   value?: Extrinsic[] | null;
 }
 
-function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number): React.ReactNode {
-  const { blockNumber, t } = props;
+function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number, t: (s: string, opt?: any) => string): React.ReactNode {
+  const { blockNumber } = props;
   const { meta, method, section } = registry.findMetaCall(extrinsic.callIndex);
   const isMortal = extrinsic.era.isMortalEra;
   let eraEnd;
@@ -81,7 +81,8 @@ function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number): Re
 }
 
 function Extrinsics (props: Props): React.ReactElement<Props> {
-  const { className, label, t, value } = props;
+  const { t } = useTranslation();
+  const { className, label, value } = props;
 
   return (
     <Column
@@ -91,18 +92,18 @@ function Extrinsics (props: Props): React.ReactElement<Props> {
     >
       {value?.map((extrinsic, index): React.ReactNode => {
         try {
-          return renderExtrinsic(props, extrinsic, index);
+          return renderExtrinsic(props, extrinsic, index, t);
         } catch (error) {
           console.error(error);
 
-          return props.t('Unable to render extrinsic');
+          return t('Unable to render extrinsic');
         }
       })}
     </Column>
   );
 }
 
-export default translate(styled(Extrinsics)`
+export default React.memo(styled(Extrinsics)`
   .explorer--BlockByHash-header {
     position: absolute;
     top: 0.25rem;

packages/page-explorer/src/BlockInfo/Logs.tsx

@@ -4,16 +4,15 @@
 
 import { DigestItem } from '@polkadot/types/interfaces';
 import { Codec, TypeDef } from '@polkadot/types/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Struct, Tuple, Raw, Vec, getTypeDef } from '@polkadot/types';
 import { Column } from '@polkadot/react-components';
 import Params from '@polkadot/react-params';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   value?: DigestItem[];
 }
 
@@ -86,7 +85,7 @@ function formatVector (vector: Vec<any>): React.ReactNode {
   );
 }
 
-function renderItem ({ t }: Props): (item: DigestItem, index: number) => React.ReactNode {
+function renderItem (t: (s: string, opt?: any) => string): (item: DigestItem, index: number) => React.ReactNode {
   return function LogItem (item: DigestItem, index: number): React.ReactNode {
     let content: React.ReactNode;
 
@@ -122,7 +121,8 @@ function renderItem ({ t }: Props): (item: DigestItem, index: number) => React.R
 }
 
 function Logs (props: Props): React.ReactElement<Props> | null {
-  const { t, value } = props;
+  const { value } = props;
+  const { t } = useTranslation();
 
   if (!value || !value.length) {
     return null;
@@ -130,9 +130,9 @@ function Logs (props: Props): React.ReactElement<Props> | null {
 
   return (
     <Column headerText={t('logs')}>
-      {value.map(renderItem(props))}
+      {value.map(renderItem(t))}
     </Column>
   );
 }
 
-export default translate(Logs);
+export default React.memo(Logs);

packages/page-explorer/src/BlockInfo/index.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { BlockNumber } from '@polkadot/types/interfaces';
-import { BareProps as Props } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -14,8 +13,7 @@ import Query from '../Query';
 import BlockByHash from './ByHash';
 import BlockByNumber from './ByNumber';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function Entry (props: Props): React.ReactElement<Props> | null {
+function Entry (): React.ReactElement<{}> | null {
   const { api } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
   const { value } = useParams();
@@ -47,3 +45,5 @@ export default function Entry (props: Props): React.ReactElement<Props> | null {
     </>
   );
 }
+
+export default React.memo(Entry);

packages/page-explorer/src/Events.tsx

@@ -2,23 +2,24 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
 import { KeyedEvent } from './types';
 
 import React from 'react';
 import { Event as EventDisplay } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
   emptyLabel?: React.ReactNode;
   events: KeyedEvent[];
   eventClassName?: string;
   withoutIndex?: boolean;
 }
 
-function Events ({ emptyLabel, eventClassName, events, withoutIndex, t }: Props): React.ReactElement<Props> {
+function Events ({ emptyLabel, eventClassName, events, withoutIndex }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   if (!events || events.length === 0) {
     return (
       <article>
@@ -72,4 +73,4 @@ function Events ({ emptyLabel, eventClassName, events, withoutIndex, t }: Props)
   );
 }
 
-export default translate(Events);
+export default React.memo(Events);

packages/page-explorer/src/Forks.tsx

@@ -4,7 +4,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ApiProps } from '@polkadot/react-api/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { Header } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useRef, useState } from 'react';
@@ -13,7 +12,7 @@ import { CardSummary, IdentityIcon, SummaryBox } from '@polkadot/react-component
 import { useApi } from '@polkadot/react-hooks';
 import { formatNumber } from '@polkadot/util';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
 interface LinkHeader {
   author: string | null;
@@ -33,7 +32,7 @@ interface Link {
   hdr: LinkHeader;
 }
 
-interface Props extends ApiProps, I18nProps {
+interface Props extends ApiProps {
   className?: string;
   finHead?: Header;
   newHead?: Header;
@@ -203,7 +202,8 @@ function renderRows (rows: Row[]): React.ReactNode[] {
   });
 }
 
-function Forks ({ className, t }: Props): React.ReactElement<Props> | null {
+function Forks ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const [tree, setTree] = useState<Link | null>(null);
   const childrenRef = useRef<Map<string, string[]>>(new Map([['root', []]]));
@@ -375,103 +375,101 @@ function Forks ({ className, t }: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default translate(
-  styled(Forks)`
-    margin-bottom: 1.5rem;
+export default React.memo(styled(Forks)`
+  margin-bottom: 1.5rem;
 
-    table {
-      border-collapse: separate;
-      border-spacing: 0.25rem;
-      font-family: monospace;
+  table {
+    border-collapse: separate;
+    border-spacing: 0.25rem;
+    font-family: monospace;
 
-      /* tr {
-        opacity: 0.05;
+    /* tr {
+      opacity: 0.05;
 
-        &:nth-child(1) { opacity: 1; }
-        &:nth-child(2) { opacity: 0.95; }
-        &:nth-child(3) { opacity: 0.9; }
-        &:nth-child(4) { opacity: 0.85; }
-        &:nth-child(5) { opacity: 0.8; }
-        &:nth-child(6) { opacity: 0.75; }
-        &:nth-child(7) { opacity: 0.70; }
-        &:nth-child(8) { opacity: 0.65; }
-        &:nth-child(9) { opacity: 0.6; }
-        &:nth-child(10) { opacity: 0.55; }
-        &:nth-child(11) { opacity: 0.6; }
-        &:nth-child(12) { opacity: 0.55; }
-        &:nth-child(13) { opacity: 0.5; }
-        &:nth-child(14) { opacity: 0.45; }
-        &:nth-child(15) { opacity: 0.4; }
-        &:nth-child(16) { opacity: 0.35; }
-        &:nth-child(17) { opacity: 0.3; }
-        &:nth-child(18) { opacity: 0.25; }
-        &:nth-child(19) { opacity: 0.2; }
-        &:nth-child(20) { opacity: 0.15; }
-        &:nth-child(21) { opacity: 0.1; }
-      } */
+      &:nth-child(1) { opacity: 1; }
+      &:nth-child(2) { opacity: 0.95; }
+      &:nth-child(3) { opacity: 0.9; }
+      &:nth-child(4) { opacity: 0.85; }
+      &:nth-child(5) { opacity: 0.8; }
+      &:nth-child(6) { opacity: 0.75; }
+      &:nth-child(7) { opacity: 0.70; }
+      &:nth-child(8) { opacity: 0.65; }
+      &:nth-child(9) { opacity: 0.6; }
+      &:nth-child(10) { opacity: 0.55; }
+      &:nth-child(11) { opacity: 0.6; }
+      &:nth-child(12) { opacity: 0.55; }
+      &:nth-child(13) { opacity: 0.5; }
+      &:nth-child(14) { opacity: 0.45; }
+      &:nth-child(15) { opacity: 0.4; }
+      &:nth-child(16) { opacity: 0.35; }
+      &:nth-child(17) { opacity: 0.3; }
+      &:nth-child(18) { opacity: 0.25; }
+      &:nth-child(19) { opacity: 0.2; }
+      &:nth-child(20) { opacity: 0.15; }
+      &:nth-child(21) { opacity: 0.1; }
+    } */
 
-      td {
-        padding: 0.25rem 0.5rem;
-        text-align: center;
+    td {
+      padding: 0.25rem 0.5rem;
+      text-align: center;
 
-        .author,
-        .contents {
-          display: inline-block;
-          vertical-align: middle;
+      .author,
+      .contents {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      .author {
+        margin-right: 0.25rem;
+      }
+
+      .contents {
+        .hash, .parent {
+          margin: 0 auto;
+          max-width: 6rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
-        .author {
-          margin-right: 0.25rem;
+        .parent {
+          font-size: 0.75rem;
+          line-height: 0.75rem;
+          max-width: 4.5rem;
+        }
+      }
+
+      &.blockNumber {
+        font-size: 1.25rem;
+      }
+
+      &.header {
+        background: #f5f5f5;
+        border: 1px solid #eee;
+        border-radius: 0.25rem;
+
+        &.isEmpty {
+          background: transparent;
+          border-color: transparent;
         }
 
-        .contents {
-          .hash, .parent {
-            margin: 0 auto;
-            max-width: 6rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          .parent {
-            font-size: 0.75rem;
-            line-height: 0.75rem;
-            max-width: 4.5rem;
-          }
+        &.isFinalized {
+          background: rgba(0, 255, 0, 0.1);
+          border-color: rgba(0, 255, 0, 0.17);
         }
 
-        &.blockNumber {
-          font-size: 1.25rem;
+        &.isLink {
+          background: transparent;
+          border-color: transparent;
+          line-height: 1rem;
+          padding: 0;
         }
 
-        &.header {
-          background: #f5f5f5;
-          border: 1px solid #eee;
-          border-radius: 0.25rem;
-
-          &.isEmpty {
-            background: transparent;
-            border-color: transparent;
-          }
-
-          &.isFinalized {
-            background: rgba(0, 255, 0, 0.1);
-            border-color: rgba(0, 255, 0, 0.17);
-          }
-
-          &.isLink {
-            background: transparent;
-            border-color: transparent;
-            line-height: 1rem;
-            padding: 0;
-          }
-
-          &.isMissing {
-            background: rgba(255, 0, 0, 0.05);
-            border-color: rgba(255, 0, 0, 0.06);
-          }
+        &.isMissing {
+          background: rgba(255, 0, 0, 0.05);
+          border-color: rgba(255, 0, 0, 0.06);
         }
       }
     }
-  `
-);
+  }
+`);

packages/page-explorer/src/Main.tsx

@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
 import { KeyedEvent } from './types';
 
 import React from 'react';
@@ -13,14 +12,16 @@ import BlockHeaders from './BlockHeaders';
 import Events from './Events';
 import Query from './Query';
 import Summary from './Summary';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
   events: KeyedEvent[];
   headers: HeaderExtended[];
 }
 
-function Main ({ events, headers, t }: Props): React.ReactElement<Props> {
+function Main ({ events, headers }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <>
       <Query />
@@ -37,4 +38,4 @@ function Main ({ events, headers, t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(Main);
+export default React.memo(Main);

packages/page-explorer/src/NodeInfo/Peers.tsx

@@ -3,15 +3,15 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { PeerInfo } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
 import { formatNumber } from '@polkadot/util';
 
-import translate from './translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   peers?: PeerInfo[] | null;
 }
 
@@ -28,7 +28,9 @@ const renderPeer = (peer: PeerInfo): React.ReactNode => {
   );
 };
 
-function Peers ({ className, peers, t }: Props): React.ReactElement<Props> {
+function Peers ({ className, peers }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <section className={`status--Peers ${className}`}>
       <h1>{t('connected peers')}</h1>
@@ -63,7 +65,7 @@ function Peers ({ className, peers, t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(
+export default React.memo(
   styled(Peers)`
     table {
       width: 100%;

packages/page-explorer/src/NodeInfo/Summary.tsx

@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
 import { Info } from './types';
 
 import BN from 'bn.js';
@@ -11,9 +10,9 @@ import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 import { BestNumber, Elapsed } from '@polkadot/react-query';
 
-import translate from './translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   nextRefresh: number;
   info: Info;
 }
@@ -21,7 +20,8 @@ interface Props extends I18nProps {
 const ZERO = new BN(0);
 const EMPTY_INFO = { extrinsics: null, health: null, peers: null };
 
-function Summary ({ info: { extrinsics, health, peers } = EMPTY_INFO, nextRefresh, t }: Props): React.ReactElement<Props> {
+function Summary ({ info: { extrinsics, health, peers } = EMPTY_INFO, nextRefresh }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [peerBest, setPeerBest] = useState(ZERO);
 
   useEffect((): void => {
@@ -88,4 +88,4 @@ function Summary ({ info: { extrinsics, health, peers } = EMPTY_INFO, nextRefres
   );
 }
 
-export default translate(Summary);
+export default React.memo(Summary);

packages/page-explorer/src/NodeInfo/index.tsx

@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps as Props } from '@polkadot/react-components/types';
 import { Info } from './types';
 
 import React, { useEffect, useState } from 'react';
@@ -10,9 +9,9 @@ import { ApiPromise } from '@polkadot/api';
 import { useApi } from '@polkadot/react-hooks';
 
 import Extrinsics from '../BlockInfo/Extrinsics';
+import { useTranslation } from '../translate';
 import Peers from './Peers';
 import Summary from './Summary';
-import translate from './translate';
 
 const POLL_TIMEOUT = 9900;
 
@@ -31,7 +30,8 @@ async function retrieveInfo (api: ApiPromise): Promise<Partial<Info>> {
   }
 }
 
-function NodeInfo ({ t }: Props): React.ReactElement<Props> {
+export default function NodeInfo (): React.ReactElement<{}> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const [info, setInfo] = useState<Partial<Info>>({});
   const [nextRefresh, setNextRefresh] = useState(Date.now());
@@ -68,5 +68,3 @@ function NodeInfo ({ t }: Props): React.ReactElement<Props> {
     </>
   );
 }
-
-export default translate(NodeInfo);

packages/page-explorer/src/NodeInfo/translate.ts

@@ -1,7 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-nodeinfo authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-explorer']);

packages/page-explorer/src/Query.tsx

@@ -2,16 +2,15 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
-
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Button, FilterOverlay, Input } from '@polkadot/react-components';
 import { isHex } from '@polkadot/util';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   value?: string;
 }
 
@@ -30,7 +29,8 @@ function stateFromValue (value: string): State {
   };
 }
 
-function Query ({ className, t, value: propsValue }: Props): React.ReactElement<Props> {
+function Query ({ className, value: propsValue }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [{ value, isValid }, setState] = useState(stateFromValue(propsValue || ''));
 
   const _setHash = (value: string): void => setState(stateFromValue(value));
@@ -60,7 +60,7 @@ function Query ({ className, t, value: propsValue }: Props): React.ReactElement<
   );
 }
 
-export default translate(styled(Query)`
+export default React.memo(styled(Query)`
   .explorer--query {
     width: 20em;
   }

packages/page-explorer/src/Summary.tsx

@@ -2,19 +2,19 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps as Props } from '@polkadot/react-components/types';
-
 import BN from 'bn.js';
 import React from 'react';
 import { SummaryBox, CardSummary } from '@polkadot/react-components';
 import { BestFinalized, BestNumber, BlockToTime, TimeNow, TotalIssuance } from '@polkadot/react-query';
 
 import SummarySession from './SummarySession';
-import translate from './translate';
+import { useTranslation } from './translate';
 
 const ONE_BLOCK = new BN(1);
 
-function Summary ({ t }: Props): React.ReactElement<Props> {
+function Summary (): React.ReactElement<{}> {
+  const { t } = useTranslation();
+
   return (
     <SummaryBox>
       <section>
@@ -49,4 +49,4 @@ function Summary ({ t }: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(Summary);
+export default React.memo(Summary);

packages/page-explorer/src/SummarySession.tsx

@@ -16,7 +16,7 @@ interface Props {
   withSession?: boolean;
 }
 
-export default function SummarySession ({ withEra = true, withSession = true }: Props): React.ReactElement<Props> {
+function SummarySession ({ withEra = true, withSession = true }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const sessionInfo = useCall<DerivedSessionInfo>(api.derive.session?.info, []);
@@ -74,3 +74,5 @@ export default function SummarySession ({ withEra = true, withSession = true }:
     </>
   );
 }
+
+export default React.memo(SummarySession);

packages/page-explorer/src/index.tsx

@@ -78,32 +78,4 @@ function ExplorerApp ({ basePath, className }: Props): React.ReactElement<Props>
   );
 }
 
-export default ExplorerApp;
-
-// export default styled(ExplorerApp)`
-//   .explorer--Container {
-//     color: inherit;
-
-//     .header {
-//       position: relative;
-//       vertical-align: middle;
-
-//       h3 {
-//         margin: 0;
-//       }
-//     }
-
-//     .description {
-//       color: rgba(0, 0, 0, 0.6);
-//       margin: 0rem 0 0.5rem 0;
-//       overflow: hidden;
-//       text-overflow: ellipsis;
-//       vertical-align: middle;
-//       white-space: nowrap;
-//     }
-
-//     > .details {
-//       word-break: break-all;
-//     }
-//   }
-// `;
+export default React.memo(ExplorerApp);

packages/page-js/src/Output.tsx

@@ -51,7 +51,7 @@ function Output ({ children, className, logs }: Props): React.ReactElement<Props
   );
 }
 
-export default styled(Output)`
+export default React.memo(styled(Output)`
   background-color: #4e4e4e;
   color: #ffffff;
   display: flex;
@@ -89,4 +89,4 @@ export default styled(Output)`
       color: #f88;
     }
   }
-`;
+`);

packages/page-js/src/Playground.tsx

@@ -238,7 +238,7 @@ function Playground ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Playground)`
+export default React.memo(styled(Playground)`
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -334,4 +334,4 @@ export default styled(Playground)`
       margin: 0;
     }
   }
-`;
+`);

packages/page-parachains/src/Overview/Parachain.tsx

@@ -84,7 +84,7 @@ function Parachain ({ className, parachain: { didUpdate, id, info, pendingSwapId
   );
 }
 
-export default styled(Parachain)`
+export default React.memo(styled(Parachain)`
   & {
     cursor: pointer !important;
   }
@@ -113,4 +113,4 @@ export default styled(Parachain)`
   .did-update {
     margin-bottom: 0;
   }
-`;
+`);

packages/page-parachains/src/Overview/Parachains.tsx

@@ -29,9 +29,10 @@ function Parachains ({ parachains }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Parachains)`
-tbody {
-  tr {
-    cursor: pointer;
+export default React.memo(styled(Parachains)`
+  tbody {
+    tr {
+      cursor: pointer;
+    }
   }
-}`;
+`);

packages/page-parachains/src/Parachain/Details.tsx

@@ -7,7 +7,6 @@ import { Bytes, Option } from '@polkadot/types';
 
 import FileSaver from 'file-saver';
 import React from 'react';
-import styled from 'styled-components';
 import { Card, IconLink, Labelled, Output, Static } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
@@ -81,5 +80,4 @@ function Details ({ parachain: { heads, info, id } }: Props): React.ReactElement
   );
 }
 
-export default styled(Details)`
-`;
+export default React.memo(Details);

packages/page-parachains/src/Parachain/DispatchQueue.tsx

@@ -66,8 +66,8 @@ function DispatchQueue ({ className, dispatchQueue = [] }: Props): React.ReactEl
   );
 }
 
-export default styled(DispatchQueue)`
+export default React.memo(styled(DispatchQueue)`
   .queue-message {
     margin-bottom: 2rem;
   }
-`;
+`);

packages/page-parachains/src/Parachain/index.tsx

@@ -134,10 +134,10 @@ function Parachain ({ className, basePath, isMine, paraInfoRef, sudoKey }: Props
   );
 }
 
-export default styled(Parachain)`
+export default React.memo(styled(Parachain)`
   & {
     .menu-button {
       margin-left: 1.4rem;
     }
   }
-`;
+`);

packages/page-parachains/src/ParachainInfo.tsx

@@ -46,7 +46,7 @@ function ParachainInfo ({ children, className, isBig, info }: Props): React.Reac
   );
 }
 
-export default styled(ParachainInfo)`
+export default React.memo(styled(ParachainInfo)`
   & {
     display: flex;
     align-items: center;
@@ -108,4 +108,4 @@ export default styled(ParachainInfo)`
       }
     }
   }
-`;
+`);

packages/page-settings/src/Developer.tsx

@@ -164,7 +164,7 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
   );
 }
 
-export default styled(Developer)`
+export default React.memo(styled(Developer)`
   .editor {
     height: 21rem;
     margin-left: 2rem;
@@ -174,4 +174,4 @@ export default styled(Developer)`
   .help {
     padding: 0.5rem 2rem;
   }
-`;
+`);

packages/page-settings/src/SelectUrl.tsx

@@ -4,7 +4,7 @@
 
 import { Option } from '@polkadot/apps-config/settings/types';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { availableEndpoints } from '@polkadot/apps-config/settings';
 import { Dropdown, Input, Toggle } from '@polkadot/react-components';
@@ -49,12 +49,14 @@ function makeUrl (_url: string): StateUrl {
 // validation on-top of the values retrieved
 function getInitialState (): State {
   const url = uiSettings.get().apiUrl;
-  const isCustom = availableEndpoints.reduce((isCustom: boolean, { value }): boolean => {
-    return isCustom && value !== url;
-  }, true);
-  const isValid = isValidUrl(url);
 
-  return { isCustom, isValid, url };
+  return {
+    isCustom: availableEndpoints.reduce((isCustom: boolean, { value }): boolean => {
+      return isCustom && value !== url;
+    }, true),
+    isValid: isValidUrl(url),
+    url
+  };
 }
 
 function SelectUrl ({ className, onChange }: Props): React.ReactElement<Props> {
@@ -71,16 +73,22 @@ function SelectUrl ({ className, onChange }: Props): React.ReactElement<Props> {
     onChange && info.isValid && onChange(info.url);
   }, [info]);
 
-  const _onChangeUrl = (url: string): void => setInfo({ ...info, ...makeUrl(url) });
-  const _onChangeCustom = (isCustom: boolean): void =>
-    setInfo({
+  const _onChangeUrl = useCallback(
+    (url: string): void =>
+      setInfo((info: State) => ({ ...info, ...makeUrl(url) })),
+    []
+  );
+  const _onChangeCustom = useCallback(
+    (isCustom: boolean): void => setInfo({
       ...makeUrl(
         isCustom
           ? info.url
           : (availableEndpoints.find(({ value }) => !!value) || { value: 'ws://127.0.0.1:9944' }).value as string
       ),
       isCustom
-    });
+    }),
+    []
+  );
 
   return (
     <div className={className}>
@@ -111,7 +119,7 @@ function SelectUrl ({ className, onChange }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(SelectUrl)`
+export default React.memo(styled(SelectUrl)`
   position: relative;
 
   .settings--customToggle {
@@ -119,4 +127,4 @@ export default styled(SelectUrl)`
     top: .5rem;
     right: 3.5rem;
   }
-`;
+`);

packages/page-society/src/Overview/Summary.tsx

@@ -73,7 +73,7 @@ function Summary ({ className, info }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Summary)`
+export default React.memo(styled(Summary)`
   .society--header--account {
     white-space: nowrap;
 
@@ -86,4 +86,4 @@ export default styled(Summary)`
       margin-right: 0.5rem;
     }
   }
-`;
+`);

packages/page-society/src/Overview/index.tsx

@@ -44,7 +44,7 @@ function Overview ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Overview)`
+export default React.memo(styled(Overview)`
   .overviewSection {
     margin-bottom: 1.5rem;
 
@@ -54,4 +54,4 @@ export default styled(Overview)`
       width: 1rem;
     }
   }
-`;
+`);

packages/page-staking/src/Actions/Account/InjectKeys.tsx

@@ -26,7 +26,7 @@ const CRYPTO_MAP: Record<string, KeypairType[]> = {
 
 const EMPTY_KEY = '0x';
 
-export default function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
+function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { queueRpc } = useContext(StatusContext);
   // this needs to align with what is set as the first value in `type`
@@ -120,3 +120,5 @@ export default function InjectKeys ({ onClose }: Props): React.ReactElement<Prop
     </Modal>
   );
 }
+
+export default React.memo(InjectKeys);

packages/page-staking/src/Actions/Account/InputValidateAmount.tsx

@@ -3,22 +3,22 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedBalancesAll } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import { Icon } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
 
-interface Props extends I18nProps {
+interface Props {
   accountId: string | null;
   onError: (error: string | null) => void;
   value?: BN | null;
 }
 
-function ValidateAmount ({ accountId, onError, value, t }: Props): React.ReactElement<Props> | null {
+function ValidateAmount ({ accountId, onError, value }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { api } = useApi();
   const allBalances = useCall<DerivedBalancesAll>(api.derive.balances.all as any, [accountId]);
   const [error, setError] = useState<string | null>(null);
@@ -51,4 +51,4 @@ function ValidateAmount ({ accountId, onError, value, t }: Props): React.ReactEl
   );
 }
 
-export default translate(ValidateAmount);
+export default React.memo(ValidateAmount);

packages/page-staking/src/Actions/Account/InputValidationController.tsx

@@ -21,7 +21,7 @@ interface Props {
 
 const DISTINCT = 'Distinct stash and controller accounts are recommended to ensure fund security.';
 
-export default function ValidateController ({ accountId, controllerId, defaultController, isUnsafeChain, onError }: Props): React.ReactElement<Props> | null {
+function ValidateController ({ accountId, controllerId, defaultController, isUnsafeChain, onError }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const bondedId = useCall<string | null>(api.query.staking.bonded, [controllerId], {
@@ -71,3 +71,5 @@ export default function ValidateController ({ accountId, controllerId, defaultCo
     </article>
   );
 }
+
+export default React.memo(ValidateController);

packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx

@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import React, { useEffect, useState } from 'react';
 import { Icon } from '@polkadot/react-components';
 
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
 
 interface Props extends I18nProps {
   controllerId: string;
@@ -16,7 +16,8 @@ interface Props extends I18nProps {
   stashId: string;
 }
 
-function ValidateSessionEd25519 ({ onError, sessionId, stashId, t }: Props): React.ReactElement<Props> | null {
+function ValidateSessionEd25519 ({ onError, sessionId, stashId }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const [error, setError] = useState<string | null>(null);
 
   useEffect((): void => {
@@ -43,4 +44,4 @@ function ValidateSessionEd25519 ({ onError, sessionId, stashId, t }: Props): Rea
   );
 }
 
-export default translate(ValidateSessionEd25519);
+export default React.memo(ValidateSessionEd25519);

packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx

@@ -13,7 +13,7 @@ interface Props {
   onError: (error: string | null) => void;
 }
 
-export default function InputValidationUnstakeThreshold ({ onError, unstakeThreshold }: Props): React.ReactElement<Props> | null {
+function InputValidationUnstakeThreshold ({ onError, unstakeThreshold }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const [error, setError] = useState<string | null>(null);
 
@@ -44,3 +44,5 @@ export default function InputValidationUnstakeThreshold ({ onError, unstakeThres
     </article>
   );
 }
+
+export default React.memo(InputValidationUnstakeThreshold);

packages/page-staking/src/Actions/Account/Nominate.tsx

@@ -101,7 +101,7 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
   );
 }
 
-export default styled(Nominate)`
+export default React.memo(styled(Nominate)`
   .shortlist {
     display: flex;
     flex-wrap: wrap;
@@ -148,4 +148,4 @@ export default styled(Nominate)`
       }
     }
   }
-`;
+`);

packages/page-staking/src/Actions/Account/SetSessionKey.tsx

@@ -14,7 +14,7 @@ interface Props {
 
 const EMPTY_PROOF = new Uint8Array();
 
-export default function SetSessionKey ({ controllerId, onClose }: Props): React.ReactElement<Props> | null {
+function SetSessionKey ({ controllerId, onClose }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const [keys, setKeys] = useState<string | null>(null);
 
@@ -54,3 +54,5 @@ export default function SetSessionKey ({ controllerId, onClose }: Props): React.
     </Modal>
   );
 }
+
+export default React.memo(SetSessionKey);

packages/page-staking/src/Actions/index.tsx

@@ -23,7 +23,7 @@ interface Props {
   stakingOverview?: DerivedStakingOverview;
 }
 
-export default function Actions ({ allRewards, allStashes, className, isVisible, next, stakingOverview }: Props): React.ReactElement<Props> {
+function Actions ({ allRewards, allStashes, className, isVisible, next, stakingOverview }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const activeEra = useCall<EraIndex | undefined>(api.query.staking?.activeEra, [], {
@@ -104,3 +104,5 @@ export default function Actions ({ allRewards, allStashes, className, isVisible,
     </div>
   );
 }
+
+export default React.memo(Actions);

packages/page-staking/src/Overview/CurrentList.tsx

@@ -64,7 +64,7 @@ function reduceDetails (state: Record<string, AddressDetails>, _details: Address
   }, { ...state });
 }
 
-export default function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAuthors, next, recentlyOnline, setNominators, stakingOverview }: Props): React.ReactElement<Props> | null {
+function CurrentList ({ authorsMap, hasQueries, isIntentions, isVisible, lastAuthors, next, recentlyOnline, setNominators, stakingOverview }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { allAccounts } = useAccounts();
   const [favorites, toggleFavorite] = useFavorites(STORE_FAVS_BASE);
@@ -169,3 +169,5 @@ export default function CurrentList ({ authorsMap, hasQueries, isIntentions, isV
     </div>
   );
 }
+
+export default React.memo(CurrentList);

packages/page-staking/src/Overview/Summary.tsx

@@ -70,7 +70,7 @@ function Summary ({ className, isVisible, next, nominators, stakingOverview, sty
   );
 }
 
-export default styled(Summary)`
+export default React.memo(styled(Summary)`
   .validator--Account-block-icon {
     margin-right: 0.75rem;
     margin-top: -0.25rem;
@@ -82,4 +82,4 @@ export default styled(Summary)`
       margin-left: -1.5rem;
     }
   }
-`;
+`);

packages/page-staking/src/Overview/index.tsx

@@ -20,7 +20,7 @@ interface Props extends BareProps {
   stakingOverview?: DerivedStakingOverview;
 }
 
-export default function Overview ({ hasQueries, isVisible, className, recentlyOnline, next, setNominators, stakingOverview }: Props): React.ReactElement<Props> {
+function Overview ({ hasQueries, isVisible, className, recentlyOnline, next, setNominators, stakingOverview }: Props): React.ReactElement<Props> {
   const { pathname } = useLocation();
   const { byAuthor, lastBlockAuthors } = useContext(BlockAuthorsContext);
   const isIntentions = pathname !== '/staking';
@@ -41,3 +41,5 @@ export default function Overview ({ hasQueries, isVisible, className, recentlyOn
     </div>
   );
 }
+
+export default React.memo(Overview);

packages/page-staking/src/Query/Validator.tsx

@@ -135,7 +135,7 @@ function extractStake (exposures: DeriveStakerExposure[], divisor: BN): ChartInf
   };
 }
 
-export default function Validator ({ className, validatorId }: Props): React.ReactElement<Props> {
+function Validator ({ className, validatorId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const [{ chart: pointChart, labels: pointLabels }, setPointChart] = useState<ChartInfo>({ chart: [], labels: [] });
@@ -218,3 +218,5 @@ export default function Validator ({ className, validatorId }: Props): React.Rea
     </Columar>
   );
 }
+
+export default React.memo(Validator);

packages/page-staking/src/Query/index.tsx

@@ -13,7 +13,7 @@ interface Props {
   className?: string;
 }
 
-export default function Query ({ className }: Props): React.ReactElement<Props> {
+function Query ({ className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { value } = useParams();
   const [validatorId, setValidatorId] = useState<string | null>(value || null);
@@ -49,3 +49,5 @@ export default function Query ({ className }: Props): React.ReactElement<Props>
     </div>
   );
 }
+
+export default React.memo(Query);

packages/page-staking/src/Targets/Summary.tsx

@@ -23,7 +23,7 @@ interface StakeInfo {
   percentage?: string;
 }
 
-export default function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Props): React.ReactElement<Props> {
+function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const totalInsurance = useCall<Balance>(api.query.balances.totalIssuance, []);
@@ -77,3 +77,5 @@ export default function Summary ({ lastReward, numNominators, numValidators, tot
     </SummaryBox>
   );
 }
+
+export default React.memo(Summary);

packages/page-staking/src/Targets/index.tsx

@@ -263,6 +263,6 @@ function Targets ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Targets)`
+export default React.memo(styled(Targets)`
   text-align: center;
-`;
+`);

packages/page-staking/src/index.tsx

@@ -136,7 +136,7 @@ function StakingApp ({ basePath, className }: Props): React.ReactElement<Props>
   );
 }
 
-export default styled(StakingApp)`
+export default React.memo(styled(StakingApp)`
   .staking--hidden {
     display: none;
   }
@@ -152,4 +152,4 @@ export default styled(StakingApp)`
   .staking--Chart+.staking--Chart {
     margin-top: 1.5rem;
   }
-`;
+`);

packages/page-storage/src/Query.tsx

@@ -214,7 +214,7 @@ function Query ({ className, onRemove, value }: Props): React.ReactElement<Props
   );
 }
 
-export default styled(Query)`
+export default React.memo(styled(Query)`
   margin-bottom: 0.25em;
 
   label {
@@ -234,4 +234,4 @@ export default styled(Query)`
   pre {
     margin: 0;
   }
-`;
+`);

packages/page-storage/src/index.tsx

@@ -5,7 +5,7 @@
 import { AppProps as Props } from '@polkadot/react-components/types';
 import { QueryTypes } from './types';
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
 import Queries from './Queries';
@@ -14,8 +14,18 @@ import Selection from './Selection';
 function StorageApp ({ basePath, className }: Props): React.ReactElement<Props> {
   const [queue, setQueue] = useState<QueryTypes[]>([]);
 
-  const _onAdd = (query: QueryTypes): void => setQueue([query, ...queue]);
-  const _onRemove = (id: number): void => setQueue(queue.filter((item): boolean => item.id !== id));
+  const _onAdd = useCallback(
+    (query: QueryTypes): void => setQueue((queue: QueryTypes[]) =>
+      [query, ...queue]
+    ),
+    []
+  );
+  const _onRemove = useCallback(
+    (id: number): void => setQueue((queue: QueryTypes[]) =>
+      queue.filter((item): boolean => item.id !== id)
+    ),
+    []
+  );
 
   return (
     <main className={`storage--App ${className}`}>
@@ -31,7 +41,7 @@ function StorageApp ({ basePath, className }: Props): React.ReactElement<Props>
   );
 }
 
-export default styled(StorageApp)`
+export default React.memo(styled(StorageApp)`
   .storage--actionrow {
     align-items: center;
     display: flex;
@@ -60,4 +70,4 @@ export default styled(StorageApp)`
     flex: 0;
     padding: 0 0.25rem;
   }
-`;
+`);

packages/page-sudo/src/SetKey.tsx

@@ -74,7 +74,7 @@ function SetKey ({ allAccounts, className, isMine, sudoKey }: Props): React.Reac
   );
 }
 
-export default styled(SetKey)`
+export default React.memo(styled(SetKey)`
   align-items: flex-end;
   justify-content: center;
 
@@ -89,4 +89,4 @@ export default styled(SetKey)`
   .sudoLabelled {
     align-items: center;
   }
-`;
+`);

packages/page-toolbox/src/Rpc/Account.tsx

@@ -59,7 +59,7 @@ function Account ({ className, defaultValue, isError, onChange }: Props): React.
   );
 }
 
-export default styled(Account)`
+export default React.memo(styled(Account)`
   box-sizing: border-box;
   padding-left: 2em;
-`;
+`);

packages/page-toolbox/src/Sign.tsx

@@ -205,7 +205,7 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
   );
 }
 
-export default styled(Sign)`
+export default React.memo(styled(Sign)`
   .toolbox--Sign-input {
     position: relative;
     width: 100%;
@@ -237,4 +237,4 @@ export default styled(Sign)`
       }
     }
   }
-`;
+`);

packages/react-components/src/AccountIndex.tsx

@@ -44,8 +44,8 @@ function AccountIndex ({ children, className, defaultValue, label, style, value
   );
 }
 
-export default styled(AccountIndex)`
+export default React.memo(styled(AccountIndex)`
   .account-index {
     font-family: monospace;
   }
-`;
+`);

packages/react-components/src/ActionItem.tsx

@@ -47,4 +47,4 @@ function ActionItem ({ className, children, accessory, idNumber, proposal, expan
   );
 }
 
-export default styled(ActionItem)`${styles}`;
+export default React.memo(styled(ActionItem)`${styles}`);

packages/react-components/src/AddressToggle.tsx

@@ -77,7 +77,7 @@ function AddressToggle ({ address, className, filter, isHidden, noToggle, onChan
   );
 }
 
-export default styled(AddressToggle)`
+export default React.memo(styled(AddressToggle)`
   align-items: flex-start;
   border: 1px solid transparent; /* #eee */
   border-radius: 0.25rem;
@@ -114,7 +114,6 @@ export default styled(AddressToggle)`
       filter: none;
       opacity: 1;
     }
-    /* border-color: #ccc; */
   }
 
   .ui--AddressToggle-address,
@@ -127,4 +126,4 @@ export default styled(AddressToggle)`
     margin-top: 0.1rem;
     text-align: right;
   }
-`;
+`);

packages/react-components/src/Bubble.tsx

@@ -36,7 +36,7 @@ function Bubble ({ color, children, className, icon, label }: Props): React.Reac
   );
 }
 
-export default styled(Bubble)`
+export default React.memo(styled(Bubble)`
   font-weight: normal;
   margin: 0.25rem;
   padding: 0;
@@ -75,4 +75,4 @@ export default styled(Bubble)`
       padding: 0 0 0 0.25rem;
     }
   }
-`;
+`);

packages/react-components/src/Button/Group.tsx

@@ -18,10 +18,9 @@ function ButtonGroup ({ children, className, isBasic = false, isCentered = false
       style={style}
     >
       <SUIButton.Group basic={isBasic}>
-        {
-          isBasic
-            ? null
-            : <Divider style={{ padding: '0em' }} />
+        {isBasic
+          ? null
+          : <Divider style={{ padding: '0em' }} />
         }
         {children}
       </SUIButton.Group>
@@ -29,9 +28,7 @@ function ButtonGroup ({ children, className, isBasic = false, isCentered = false
   );
 }
 
-(ButtonGroup as GroupType).Divider = Divider;
-
-export default styled(ButtonGroup)`
+const Memo = React.memo(styled(ButtonGroup)`
   text-align: right;
 
   :not(:first-child) {
@@ -42,4 +39,8 @@ export default styled(ButtonGroup)`
     margin-bottom: 0.5rem;
     text-align: center;
   }
-` as unknown as GroupType;
+`) as unknown as GroupType;
+
+Memo.Divider = Divider;
+
+export default Memo;

packages/react-components/src/Call.tsx

@@ -101,7 +101,7 @@ function Call ({ children, className, labelHash, mortality, onError, style, tip,
   );
 }
 
-export default styled(Call)`
+export default React.memo(styled(Call)`
   .hash .ui--Static {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -120,4 +120,4 @@ export default styled(Call)`
       }
     }
   }
-`;
+`);

packages/react-components/src/Card.tsx

@@ -23,7 +23,7 @@ function Card ({ children, className, isError, isSuccess, withBottomMargin }: Pr
   );
 }
 
-export default styled(Card)`
+export default React.memo(styled(Card)`
   position: relative;
   flex: 1 1;
   min-width: 24%;
@@ -84,4 +84,4 @@ export default styled(Card)`
       margin-left: 0.2em;
     }
   }
-`;
+`);