Effects والمزامنة الخارجية

import { useEffect, useState } from "react";
export default function App() { const [online, setOnline] = useState(() => navigator.onLine); useEffect(() => { const yes = () => setOnline(true); const no = () => setOnline(false); window.addEventListener("online", yes); window.addEventListener("offline", no); return () => { window.removeEventListener("online", yes); window.removeEventListener("offline", no); }; }, []); return <main><h1>Browser status</h1><p>{online ? "Online" : "Offline"}</p></main>; }

After synthetic offline: Offline. After synthetic online: Online.

تملك Effect المستمعين لا طلب شبكة وتختبر الأحداث المصطنعة الحالة والعمر.

import { useEffect, useState } from "react";
export default function App() { const [count, setCount] = useState(0); useEffect(() => { const previous = document.title; document.title = `Count ${count}`; return () => { document.title = previous; }; }, [count]); return <main><h1>Title owner</h1><button type="button" onClick={() => setCount(c => c + 1)}>Increment</button><p>{count}</p></main>; }

Initial document title: Count 0. After Increment: Count 1.

تصبح كل قيمة ملتزم بها عنوانا لدى مالك معزول ويعيد التنظيف ما استبدله.