TheSnegok

.avatar {
	position: relative;
	width: 150px;
	height: 150px;
-	border-radius: 50%;
-	overflow: hidden;
+	clip-path: circle(50%);
}

Т.к sort НЕ возвращает новую ссылку на массив а сортирует текущий реакт не тригерит ререндер. Ререндер из-за чего то другого происходит. Попробуй

setMatched(findInput.matchFound.sort((first, second) => first.price[0] - second.price[0]));

заменить на

setMatched([...findInput.matchFound.sort((first, second) => first.price[0] - second.price[0])]);

Потому что окно не всегда на фуллскрин.
А ещё в окне могут быть всякие скроллы и панельки,уменьшающие вьюпорт.

Вот тут подробно с картинками.
https://www.quirksmode.org/mobile/viewports.html

И там ещё продолжение, про мобилы.
https://www.quirksmode.org/mobile/viewports2.html

Статья старая, и не учитывает ретину, которую придумали чтобы окончательно моск снести.

return <Navigate to="/" />

Пропсы вверх по DOM дереву не меняются. Чтобы реализовать схожий функционал, вам нужно воспользоваться контекстом (useState, useContext). В верхнем компоненте объявляете стейт (state, setState), в нижние компоненты через Context.Provider передаете этот стейт (state, setState). В нижних компонентах используете useContext для получения стейта сверху. Теперь чтобы изменить стейт верхнего компонента у вас есть setState из контекста. Надеюсь понятно объяснил.

сериализовать нужные параметры в url, а внутри ArcticleItem выловить через useParams. Это самый здравый и каноничный вариант.

если что-то не сериализуемое, то надо передавать через стейт-манагер или ещё как-то.

тут прям написано чем и что это deprecated https://developer.mozilla.org/en-US/docs/Web/API/M...

https://developer.mozilla.org/en-US/docs/Web/API/M...

1. Нет никакой синхронизации. Сервер может только указать клиенту, что ему нужно установить куку X в значение Y хэдером Set-Cookie и считать с пришедшего на сервер запроса куки (все куки отправляются в каждом запросе на сервер).
2. Сессии могут храниться на клиенте (signed cookie session). При этом используется подпись куки с помощью HMAC, чтобы данные сессии не могли быть свободно изменены клиентом. Но обычно сессии хранятся на сервере. Тут выбор огромный: от баз данных и key-value хранилищ (Redis, например) до простых файлов. При этом, клиенту посылается кука ID сессии (так сервер идентифицирует юзера), которую злоумышленник может стащить. Таким кукам, дабы защитить юзеров от XSS, ставится флаг HttpOnly, который советует браузеру не давать эту куку скриптам вроде JS. В этом случае, стащить куку получится только завладев браузером, файловой системой юзера или через багу браузера.
3. Смотри второй ответ. В некоторых случаях - да. Но редко.
4. Можно передавать значение session id в строке URL (GET - параметром), вроде такого: example.com/some/page/?session_id=2af26905dcf31a1d... Некоторые сервисы используют это, как fallback вариант, однако, он очень небезопасен, т.к. любой XSS или простой безобидный JS вроде Яндекс.Метрика видит весь URL. Так что, посылаем юзера включать куки.

А мне нравится такое на комплексных числах считать. То же, что и с синусами, но элегантнее.
Вот пример на питоне:

from math import e, pi
f=lambda c, r, n=3, fi0=0: [c+r*e**(1j*(2*pi/n*i+fi0)) for i in range(n)]

Получим функцию f которая может рассчитать точки любого вписанного n-угольника:

>>> f(c=250+250j, r=250)
[(500+250j),
 (375+466.50635094610965j),
 (125.00000000000006+466.5063509461097j),
 250.00000000000003j,
 (124.99999999999989+33.49364905389041j),
 (374.99999999999983+33.49364905389024j)]

А если надо обяательно кортежами, а не комплексными точками. то вот:

>>> [(round(p.real), round(p.imag)) for p in f(c=250+250j, r=250, n=5, fi0=pi/2)]
[(250, 500), (12, 327), (103, 48), (397, 48), (488, 327)]

Тут, заметьте, пятиугольник, причем вершинкой вниз (при оси Y, направленной вниз).

Чтобы было понятно как это работает...
Представим, что центр окружности в нуле координат. Нам нужно 6 точек, смещенных относительно нуля на радиус под нужными углами: 0, 60, 120, 180, 240 и 300 градусов. В формулах мы. конечно используем радианы: pi - это 180 градусов.
Чтобы повернуть единичный вектор на какой-то угол, нужно его просто домножить на e в степени мнимая единица, умноженная на угол. Поскольку единичный вектор на комплексной плоскости это просто 1, то его даже писать не надо. Просто возводим e в нужную степень и получаем нужный вектор в виде комплексного числа. Осталось его домножить на требуемый радиус (он при этом удлинится: был длиной 1, а станет r) и добавить к нему желаемый центр (тоже в виде комплексного числа, где реальная часть - X, а мнимая - Y).
Вот и всё!
Красота же?..

Да, забыл сказать, что если нужно повернуть весь n-угольник на какой-то угол, то для этого есть там параметр fi0, который по умолчанию ноль.
c - это координаты центра в комплексной форме. Например если X=30, а Y=40, то c=30+40j.
n - это число вершин.
r - радиус.
И да, в javascript'е нет такого элегантного способа работать с комплексными числами, как в питоне. Но для js есть много библиотек для работы с комплексными числами. Будет не так компактно и красиво, как на питоне, но в целом всё точно так же в плане математики.

UPD: Исправил функцию. Там скобочек не хватало, поэтому поворот на fi0 работал неверно. Теперь все как надо.

ну можно сделать так:
V_ix = 250 + 250*sin (2*i*PI/n)
V_iy = 250 + 250*cos (2*i*PI/n),
где V_ix, V_iy - координаты икс, игрек у i-той вершины (всего n вершин)
n - количество вершин

Если что-то не понятно, то спрашивай

При создании таймера значение stroke было равно 0, таковое попадает в замыкание. Вызовы setStroke, конечно, меняют значение в хуке, но переменная в замыкании от этого не меняется.

Надо внести всю логику "внутрь" setStroke.

const updateStroke = () => {
    let timer = setInterval(() => {
        setStroke(stroke => {
            console.log(stroke);
            if (stroke > 1250) {
                clearInterval(timer);
                return 1256;
            } else {
                return stroke + 250;
            }
        });
    }, 1000);
};

не проверял, но навскидку должно работать.

Не надо менять DOM вручную. Тебе не нужен slideRef и вся та содомия, в которой он участвует.
Сделай position как state, меняй благочестиво, а style.left указывай в зависимости от него:

<div className={s.slides} style={{left: position + '%'}}>

Используется рамка, в которой размещается один элемент карусели (как правило, он является картинкой). Задается свойство overflow: hidden, что скрывает все за пределами границ элемента (то есть элементов, например, восемь, они все восемь существуют, перемещаются вправо и влево при кручении, но отображается только тот, который в этой зоне видимости). Далее элементы, например, если пользователь нажал кнопку 'влево', перемещаются влево и, когда последний элемент доходит и встает в зону отображения блока, в которой мы указали overflow: hidden, создается клон всего слайдера (то есть клон всех элементов в виде такой же строки, который встает сразу за последним элементом оригинального слайдера). После, когда пользователь нажимает кнопку 'влево' оригинальный слайдер смещается влево, а за ним следует клон, первый элемент которого встает на место видимости и впоследствии мы удаляем тот слайдер, который вышел за пределы (он был оригинальным) и также удаляем клон, ставим на его место оригинальный слайдер. Также работает и с логикой кручения вправо).
Вообще, делая бесконечный слайдер можно сделать переменную, которая будет содержать длину картинки в слайдере и в функции кручения надо увеличивать или уменьшать margin/padding, задав блоку слайдера Position: relative.
А вообще, посоветую канал на ютубе, там хорошо объясняется интересующий тебя вопрос https://www.youtube.com/watch?v=gBgD9ieCJpE&t=623s...
Там, правда, только вправо крутит, но додумаешь как надо и влево сделать, я написал тебе основную логику)

{MenuItems.map((item) => Object.entries(item).map(([headers, headersItems]) => (
    <div className={s.wrapperSections}>
        <img src={tile} alt={Object.entries(headersItems)[0][0]} />
        <span>{headers}</span>
   </div>
))}

Привет!
В постскриптуме ты все правильно описал.

1. Берем styles.scss, туда импортируем наши commonStyles - переменные, миксины и прочее.
2. Этот файл подключаем в App или аналогичный компонент - все переменные станут доступными для использования.
3. К компоненте подключаем модульный файл стилей, используем миксины и переменные как обычно.
4. PROFIT!