🆔 Bài 15: useId & useSyncExternalStore

import { useId } from 'react';

function FormField({ label, type = 'text' }) {
    const id = useId(); // Tạo unique ID, safe cho SSR

    return (
        <div>
            <label htmlFor={id}>{label}</label>
            <input id={id} type={type} />
            <p id={`${id}-hint`}>Hint text</p>
        </div>
    );
}

// Sử dụng: mỗi instance có ID khác nhau
<FormField label="Email" />     {/* id=":r1:" */}
<FormField label="Password" />  {/* id=":r2:" */}

import { useSyncExternalStore } from 'react';

// Custom hook: theo dõi online status
function useOnlineStatus() {
    return useSyncExternalStore(
        // subscribe: đăng ký listener
        (callback) => {
            window.addEventListener('online', callback);
            window.addEventListener('offline', callback);
            return () => {
                window.removeEventListener('online', callback);
                window.removeEventListener('offline', callback);
            };
        },
        // getSnapshot: lấy giá trị hiện tại
        () => navigator.onLine,
        // getServerSnapshot (SSR)
        () => true
    );
}

function StatusBar() {
    const isOnline = useOnlineStatus();
    return <p>{isOnline ? '🟢 Online' : '🔴 Offline'}</p>;
}

// Window size hook
function useWindowWidth() {
    return useSyncExternalStore(
        (cb) => { window.addEventListener('resize', cb); return () => window.removeEventListener('resize', cb); },
        () => window.innerWidth,
        () => 1024
    );
}