From 9a26b1953e805a9dbd1616c693d21ea40fc1163d Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 6 Oct 2021 17:12:42 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20(Re)fix=20ResourceRouter=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/routing/ResourceRouter.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/routing/ResourceRouter.tsx b/frontend/src/components/routing/ResourceRouter.tsx
index 03e6578..a032f85 100644
--- a/frontend/src/components/routing/ResourceRouter.tsx
+++ b/frontend/src/components/routing/ResourceRouter.tsx
@@ -30,12 +30,14 @@ export interface ResourceRouterProps<Type, UnselectedProps = UnselectedRouteProp
 
 /**
  * A component which chooses between two sub-components:
- * - If {@link selection} is nullish, it renders {@link unselectedRoute} with the {@link UnselectedRouteProps}.
- * - If {@link selection} has a value, it renders {@link selectedRoute} with the {@link SelectedRouteProps}.
+ * - If {@link selection} is nullish, it renders `unselectedRoute` with the {@link UnselectedRouteProps}.
+ * - If {@link selection} has a value, it renders `selectedRoute` with the {@link SelectedRouteProps}.
  *
+ * @warning Due to some particular memoization, changes to `unselectedRoute` and `selectedRoute` will apply **only** when `selection` changes.
  * @constructor
  */
 export function ResourceRouter<Type>({selection, unselectedRoute: UnselectedRoute, selectedRoute: SelectedRoute}: ResourceRouterProps<Type>): JSX.Element {
+    // This component **intentionally** has a incomplete dependency array to avoid routes being re-rendered every time the parent changes.
     return React.useMemo(
         () => {
             if(selection) {
@@ -47,6 +49,7 @@ export function ResourceRouter<Type>({selection, unselectedRoute: UnselectedRout
                 <UnselectedRoute/>
             )
         },
-        [selection, UnselectedRoute, SelectedRoute],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [selection],
     )
 }