usePreferredLanguage.ts

import { useSyncExternalStore } from 'react';

const subcribe = (cb: any) => {
  addEventListener('languagechange', cb);
  return () => removeEventListener('languagechange', cb);
};

const getSnapshot = () => {
  return navigator.language;
};

const getServerSnapshot = () => {
  throw Error('usePreferredLanguage is a client component');
};

export default function usePreferredLanguage() {
  return useSyncExternalStore(subcribe, getSnapshot, getServerSnapshot);
}

Stackblitz Link: https://stackblitz.com/edit/vitejs-vite-hshkva?file=src%2FusePreferredLanguage.ts