steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-22 14:54:22 +00:00
Code Activity

🐛 (Re)fix ResourceRouter bug

Browse source
This commit is contained in:
Steffo 2021-10-06 17:12:42 +02:00
parent 6bdfaf22c7
commit 8eb5f3780a
1 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/components/routing/ResourceRouter.tsx
View file

@ -30,12 +30,14 @@ export interface ResourceRouterProps<Type, UnselectedProps = UnselectedRouteProp
/** /**
* A component which chooses between two sub-components: * A component which chooses between two sub-components:
* - If {@link selection} is nullish, it renders {@link unselectedRoute} with the {@link UnselectedRouteProps}. * - If {@link selection} is nullish, it renders `unselectedRoute` with the {@link UnselectedRouteProps}.
* - If {@link selection} has a value, it renders {@link selectedRoute} with the {@link SelectedRouteProps}. * - 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 * @constructor
*/ */
export function ResourceRouter<Type>({selection, unselectedRoute: UnselectedRoute, selectedRoute: SelectedRoute}: ResourceRouterProps<Type>): JSX.Element { 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( return React.useMemo(
() => { () => {
if(selection) { if(selection) {
@ -47,6 +49,7 @@ export function ResourceRouter<Type>({selection, unselectedRoute: UnselectedRout
<UnselectedRoute/> <UnselectedRoute/>
) )
}, },
[selection, UnselectedRoute, SelectedRoute], // eslint-disable-next-line react-hooks/exhaustive-deps
[selection],
) )
} }