مزامنة عنوان الصفحة بإستخدام useEffect

ال useEffect بتزامن المكون مع نظام خارج React زي عنوان document

المثال داخل مشروع React يدعم JSX و Hooks

تطبيق الفكرة

الاعتمادية count بتخلي التأثير يتحدث عند تغيير العداد ومعاه تنظيف يعيد العنوان

ملف App.jsx

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 <button onClick={() => setCount(value => value + 1)}>{count}</button>;
}

النتيجة

عنوان الصفحة بيتغير مع العداد وبيترجع أثناء التنظيف

ملحوظة

ال Effects بتشتغل على العميل وفي Strict Mode ممكن يتكرر الإعداد والتنظيف أثناء التطوير