Merge pull request #1374 from decent-dao/dc/request-relief-01

Fix Multiple Re-render caused by `useEffect`

src/components/pages/DaoHierarchy/DaoNode.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@chakra-ui/react';
 import { utils } from 'ethers';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useLoadDAONode } from '../../../hooks/DAO/loaders/useLoadDAONode';
 import { useLoadDAOData } from '../../../hooks/DAO/useDAOData';
 import { useFractal } from '../../../providers/App/AppProvider';
@@ -26,6 +26,7 @@ export function DaoNode({
   daoAddress?: string;
   depth: number;
 }) {
+  const onMountOnly = useRef(true);
   const [fractalNode, setNode] = useState<FractalNode>();
   const { loadDao } = useLoadDAONode();
   const { daoData } = useLoadDAOData(fractalNode, parentAddress);
@@ -38,7 +39,7 @@ export function DaoNode({
   const isCurrentDAO = daoAddress === currentDAOAddress;
 
   useEffect(() => {
-    if (daoAddress) {
+    if (daoAddress && onMountOnly.current) {
       loadDao(utils.getAddress(daoAddress)).then(_node => {
         const errorNode = _node as WithError;
         if (!errorNode.error) {
@@ -79,6 +80,7 @@ export function DaoNode({
           });
         }
       });
+      onMountOnly.current = false;
     }
   }, [loadDao, daoAddress, fractalNode?.nodeHierarchy.childNodes, depth]);