From 7ddd631b56dd2f49fa56e4efd3d9a818cb2a5b12 Mon Sep 17 00:00:00 2001 From: bh0fer Date: Mon, 19 Oct 2026 08:56:17 +0200 Subject: [PATCH 01/20] refactor: optimize mobx usage and performance --- src/components/Navbar/AccountSwitcher/index.tsx | 3 ++- .../documents/Assessable/ChoiceAnswer/index.tsx | 4 +++- src/hooks/useComputed.ts | 12 ++++++++++++ src/hooks/useDocumentRoot.ts | 6 ++++-- src/stores/ViewStores/AdminView.ts | 4 ++-- src/stores/ViewStores/index.ts | 5 +++-- src/theme/DocSidebarItem/index.tsx | 2 +- 7 files changed, 27 insertions(+), 9 deletions(-) create mode 100644 src/hooks/useComputed.ts diff --git a/src/components/Navbar/AccountSwitcher/index.tsx b/src/components/Navbar/AccountSwitcher/index.tsx index c00f2429a..f7c05cccb 100644 --- a/src/components/Navbar/AccountSwitcher/index.tsx +++ b/src/components/Navbar/AccountSwitcher/index.tsx @@ -12,6 +12,7 @@ import { } from '@mdi/js'; import LiveStatusIndicator from '@tdev-components/LiveStatusIndicator'; import Button from '@tdev-components/shared/Button'; +import { useComputed } from '@tdev-hooks/useComputed'; import { useStore } from '@tdev-hooks/useStore'; import User from '@tdev-models/User'; import _ from 'es-toolkit/compat'; @@ -27,7 +28,7 @@ interface SwitchToUserButtonProps { const SwitchToUserButton = observer(({ user, isInCurrentClass }: SwitchToUserButtonProps) => { const userStore = useStore('userStore'); - const active = userStore.viewedUserId === user.id; + const active = useComputed(() => userStore.viewedUserId === user.id, [userStore, user]); const icon = user.hasElevatedAccess ? mdiShieldAccount diff --git a/src/components/documents/Assessable/ChoiceAnswer/index.tsx b/src/components/documents/Assessable/ChoiceAnswer/index.tsx index af3c84379..7c5eac41b 100644 --- a/src/components/documents/Assessable/ChoiceAnswer/index.tsx +++ b/src/components/documents/Assessable/ChoiceAnswer/index.tsx @@ -3,6 +3,7 @@ import { DocContext } from '@tdev-components/documents/DocumentContext'; import Loader from '@tdev-components/Loader'; import UnknownDocumentType from '@tdev-components/shared/Alert/UnknownDocumentType'; import { useDocument } from '@tdev-hooks/useContextDocument'; +import { useComputed } from '@tdev-hooks/useComputed'; import { useDocumentRootId } from '@tdev-hooks/useContextDocumentRootId'; import { useNestedAssessableDocumentBy } from '@tdev-hooks/useNestedAssessableDocumentBy'; import { AssessableComponentProps } from '@tdev-models/documents/Assessable/AssessableMeta'; @@ -71,12 +72,13 @@ const onUpdateSelection = action((doc: ChoiceAnswerModel, optionIndex: number, c }); ChoiceAnswer.Option = observer((props: Omit, 'onChange'>) => { const doc = useDocument<'choice_answer'>(); + const isChecked = useComputed(() => doc.choices.has(props.optionIndex), [doc, props.optionIndex]); return (