refactor: apply React best practices and migrate to ESLint CLI

- Dynamic import for WordCloud component (code splitting)
- Fix waterfall in handleRefresh with Promise.all
- Memoize data prep functions in overview page (7 useMemo hooks)
- Replace useState+useEffect with useMemo in CountryDisplay/LanguageDisplay
- Memoize navigationCards and class getters in dashboard page
- Extract inline handlers with useCallback
- Fix missing index parameter in TopQuestionsChart map
- Migrate from next lint to ESLint CLI (Next.js 16 deprecation)
This commit is contained in:
2026-01-20 07:05:27 +01:00
parent 5042a6c016
commit 8b3846539f
7 changed files with 298 additions and 288 deletions

View File

@@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { useMemo } from "react";
import { getLocalizedCountryName } from "../lib/localization";
interface CountryDisplayProps {
@@ -16,16 +16,11 @@ export default function CountryDisplay({
countryCode,
className,
}: CountryDisplayProps) {
const [countryName, setCountryName] = useState<string>(
countryCode || "Unknown"
// Compute directly - Intl.DisplayNames is synchronous
const countryName = useMemo(
() => (countryCode ? getLocalizedCountryName(countryCode) : "Unknown"),
[countryCode]
);
useEffect(() => {
// Only run in the browser and if we have a valid code
if (typeof window !== "undefined" && countryCode) {
setCountryName(getLocalizedCountryName(countryCode));
}
}, [countryCode]);
return <span className={className}>{countryName}</span>;
}