DZHAMBUALT

Ответ Антон Иванов - популярный костыль, но от того не менее ошибочный.
Токен имеет время жизни. Это время жизни можно достать на клиетне из самого токена.
Правильное решение - просто по таймеру за 5-15 минут до устаревания обновлять оный в фоне. В таком случае все нормальные запросы вообще не затронуты.
Чуть менее правильное - проверять на устаревание при каждом обращении к токену и если устарел прямо тут же, в процессе, получать новый.
Все популярные библиотеки умеют это из коробки.

Не в том направлении думаете. Когда вы бросаете запрос с истекшим токеном, вам бек должен ответить, что токен истёк. Далее уже вы фронтом кидаете запрос на новый токен и повторяете первый запрос.

Проверять токен на фронте, это неверный шаг. Всё что прилетело на фронт, заведомо нельзя доверять.

В пределах одного компонента твой хук должен работать. Но если два разных компонента используют useTranslation, то разумеется смена языка в одном не повлияет на второй. Хотя ты это и сам знаешь, я так, на всякий напомнил. Обычно текущий выбранный language хранят в контексте на весь апп.

У вас бак в хуке следующий:
в useEffect вы реагируете на смену языка, и задаёте новый texts. НО в useCallback у вас в зависимостях тоже language, в результате после смены texts он уже не отрабатывает. Замените в useCallback зависимость на texts.
PS если это не в рамках обучения, то не советую писать свой инструмент для локализации сайта, лучше возьмите готовый, например i18n
PPS для подсказки в таких багах пусть и ненадёжно, но полезно использовать нейронные сети, к примеру chatgpt в целом хорошо расписывает если дать ему код вашего Хука и попросить найти баг, только что проверил даёт неплохие подсказки для начала. НО помните, что без опыта с нейронками легко выстрелить себе в ногу, тк не заметите где она там напридумывала всякую дичь.

при изменении language у меня не меняются переводы

Меняются. С запаздыванием на один шаг. Потому что texts обновляется в эффекте, т.е., после того, как новая версия t будет создана. Так что t получает ссылку на старую версию texts.

Никакого texts не надо, доставайте в t нужный объект из translations напрямую:

const t = useCallback(
  key => key
    .split('.')
    .reduce((p, c) => p?.[c], translations[language]),
  [ language ]
);

Как вариант маска:

Боль-мене универсально с помощью clip-path и трюка с позиционированием:

Параметры заданы в коде: 380 и 44 – они приоритетные. Если их убрать, то всё получится. Или в css прописать 100% !important. Ну и в комментариях верно заметили про aspectRatio (поздно прочитал). =)

Возможно ли это?

Оо, это Вы по адресу, чего изволите?
- Обычная статика без шаблонизатора.
- Статика с шаблонизатором.
- Статика с шаблонизатором и внедрением react.
- React фронт без api.

Как мне это сделать я очень сильно запутался и ничего не понимаю. Возможно ли это?

Возможно, необходимо:
1. Собрать статику.
2. Перебить пути до изображений (если используется шаблонизатор).
3. Срезать шапку и подвал у каждого html из п1.
4. Конвертировать п1 и п3 в php файлы.
5. Врезать wp/php код из п4.
6. Врезать wp/php код с метатегами в header.php.
7. (опционально) встряхнуть (tree-shaking) css и js файлы, вырезав весь не используемый код.
8. (опционально) произвести оптимизацию статики, не только вес, но и размер изображений под разные размеры дисплеев устройств.

Мне хочется посадить сайт созданный с помощью webpack

Webpack не создаёт сайт, а собирает.

Эта тема очень обширна, нужен более точный вопрос.

Поиграть со селекторами nth-child и nth-last-child.

Для начала попробуем выбрать первый элемент последнего неполного ряда. Селектор :nth-child(3n + 1) выберет нам первые элементы каждого ряда.

Теперь надо ограничить этот список только последним рядом. Видно что нужный нам элемент всегда первый или второй с конца. Так и запишем :nth-last-child(-n + 2).

В итоге получили селектор :nth-child(3n + 1):nth-last-child(-n + 2).
Ну а дальше воспользуемся селектором ~ что бы выбрать все (в вашем случае не больше одного) элементы которые идут после уже выбранного.

Получается вот такой код:

li:nth-child(3n + 1):nth-last-child(-n + 2),
li:nth-child(3n + 1):nth-last-child(-n + 2) ~ li {
  .....
}

UPD: если надо что бы последний ряд выбирался всегда, даже если он полный, то надо заменить -n + 2 на -n + 3.

UPD2: можно пойти немного другим путём и выбирать все элементы после последнего элемента в полном ряду. Получится вот так:

li:nth-child(3n):nth-last-child(-n + 3) ~ li {
  .....
}

Как-то так:

function findSequence(input) {
    const adjacencyList = {}, indegree = {};

    input.forEach(([from, to]) => {
        adjacencyList[from] = (adjacencyList[from] || []).concat(to);
        indegree[to] = (indegree[to] || 0) + 1;
    });

    const start = Object.keys(adjacencyList).find(country => !indegree[country]);
    if (!start) {
        return false;
    }

    const result = [], visited = {};

    function dfs(node) {
        visited[node] = true;
        result.push(node);
        adjacencyList[node]?.forEach(neighbor => !visited[neighbor] && dfs(neighbor));
    }

    dfs(start);
    return result.join(', ');
}
findSequence([["USA", "BRA"], ["JPN", "PHL"], ["BRA", "UAE"], ["UAE", "JPN"]])//"USA, BRA, UAE, JPN, PHL"

Логика основана на гридах. Добавляются классы 'slim1, slim2, slim2, которые задают элементам определенное положение в сетке в правой части А у того, что слева добавляется класс 'active' .
Пример на codepen

Потому что у кажого импортированного модуля - своя область видимости переменных.
Импортируйте getPageTitle в getHeader . А если же getPageTitle отдельно не используется, можете его реэкспортировать из getHeader, а в основном скрипте не импортировать вообще.

Все делается довольно просто.

height:100% у этого дива убери

100% не будет работать, потому что у main тоже 100%, а у его родителя нет высоты. Значит и у main нет высоты, а значит и у дива тоже нет.

Используешь флексы - используй флексы, не надо костылять.

100% величина относительно родителя, у родителя высоты тоже своей нет, она не может быть высчитана, переход от 0 к ничему соответственно не может быть плавным. У тебя классический баян должен получиться. Если можно гарантировать что текст не будет выше какой-либо высоты (как в комменте 300 пикселей например) то проще всего менять max-height с нуля до этой величины, а так по хорошему текст надо кинуть в обертку, у нее менять высоту/максимальную высоту с нуля до ее scrollHeight, которая будет равна высоте ее контента - текста. Есть еще хак с grid-template-rows 0fr/1fr но не везде работает