LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix render loop

Browse Source
This commit is contained in:
Matthew Russell 2022-03-01 23:40:38 -08:00
parent a66ac23122
commit da80f8848c
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/trading/pages/markets/grid-tabs.tsx
View File

@ -27,18 +27,16 @@ export const GridTabs = ({ children, group }: GridTabsProps) => {
return children[0].props.name; return children[0].props.name;
}); });
// Using replace inside an effect causes a render loop. Seems like its not using useCallback
// eslint-disable-next-line
const safeReplace = useCallback((path: string) => replace(path), []);
// Update the query string in the url when the active tab changes // Update the query string in the url when the active tab changes
// uses group property as the query stirng key // uses group property as the query stirng key
useEffect(() => { useEffect(() => {
const [url, queryString] = asPath.split('?'); const [url, queryString] = asPath.split('?');
const searchParams = new URLSearchParams(queryString); const searchParams = new URLSearchParams(queryString);
searchParams.set(group, activeTab as string); searchParams.set(group, activeTab as string);
safeReplace(`${url}?${searchParams.toString()}`); replace(`${url}?${searchParams.toString()}`);
}, [activeTab, group, asPath, safeReplace]); // replace and using asPath causes a render loop
// eslint-disable-next-line
}, [activeTab, group]);
return ( return (
<Tabs.Root <Tabs.Root