feat(mobx): add sync back (do not look at the code)

src/pages/developer/Developer.tsx

@@ -1,6 +1,6 @@
 import { Wrench } from "@styled-icons/boxicons-solid";
 
-import { useContext, useState } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
 
 import PaintCounter from "../../lib/PaintCounter";
 import { TextReact } from "../../lib/i18n";
@@ -16,10 +16,14 @@ export default function Developer() {
     const userPermission = client.user!.permission;
     const [ping, setPing] = useState<undefined | number>(client.websocket.ping);
 
-    setInterval(
-        () => setPing(client.websocket.ping),
-        client.options.heartbeat * 1e3,
-    );
+    useEffect(() => {
+        const timer = setInterval(
+            () => setPing(client.websocket.ping),
+            client.options.heartbeat * 1e3,
+        );
+
+        return () => clearInterval(timer);
+    }, []);
 
     return (
         <div>

src/pages/settings/panes/Notifications.tsx

@@ -1,3 +1,5 @@
+import { observer } from "mobx-react-lite";
+
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
@@ -11,7 +13,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import Checkbox from "../../../components/ui/Checkbox";
 
-export function Notifications() {
+export const Notifications = observer(() => {
     const client = useContext(AppContext);
     const { openScreen } = useIntermediate();
     const settings = useApplicationState().settings;
@@ -118,4 +120,4 @@ export function Notifications() {
             ))}
         </div>
     );
-}
+});