From 13df715bfdc8fcba313619a9ea0a36112753d9c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Fri, 9 Feb 2024 08:17:15 +0000 Subject: [PATCH] fix: prevent infinite rerenders in useIncomingWebhooks (#6176) React can sometimes be non-intuitive and behave erratically due to the way it detects changes in hook dependencies. This prevents infinite re-renders from `useIncomingWebhooks` by using a static `DEFAULT_DATA` constant, so that its reference is always the same, so no changes are detected when there are none. Unrelated scouting, but this PR also removes an unneeded dependency in the memoized columns in `ProjectActionsTable`. --- .../ProjectActionsTable/ProjectActionsTable.tsx | 2 +- .../api/getters/useIncomingWebhooks/useIncomingWebhooks.ts | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx index 7e3f012d18..441f729296 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ProjectActions/ProjectActionsTable/ProjectActionsTable.tsx @@ -182,7 +182,7 @@ export const ProjectActionsTable = ({ disableSortBy: true, }, ], - [actions, incomingWebhooks, serviceAccounts], + [incomingWebhooks, serviceAccounts], ); const [initialState] = useState({ diff --git a/frontend/src/hooks/api/getters/useIncomingWebhooks/useIncomingWebhooks.ts b/frontend/src/hooks/api/getters/useIncomingWebhooks/useIncomingWebhooks.ts index 724a6f7adf..2f33f7f4d3 100644 --- a/frontend/src/hooks/api/getters/useIncomingWebhooks/useIncomingWebhooks.ts +++ b/frontend/src/hooks/api/getters/useIncomingWebhooks/useIncomingWebhooks.ts @@ -8,13 +8,17 @@ import { useUiFlag } from 'hooks/useUiFlag'; const ENDPOINT = 'api/admin/incoming-webhooks'; +const DEFAULT_DATA = { + incomingWebhooks: [], +}; + export const useIncomingWebhooks = () => { const { isEnterprise } = useUiConfig(); const incomingWebhooksEnabled = useUiFlag('incomingWebhooks'); const { data, error, mutate } = useConditionalSWR( isEnterprise() && incomingWebhooksEnabled, - { incomingWebhooks: [] }, + DEFAULT_DATA, formatApiPath(ENDPOINT), fetcher, );