чтобы не загромождать компонент, а просто вызвать хук, например: const data = useData()

лол

const data = useSelector(dataSelector) уже не православно?

тоже вариант, спасибо

Всем привет, можете помочь - как обновлять компонент по изменению хэша? Визуально он обновляется, но данные нет.

Структура такая - есть основной компонент, в котором есть другой, который грузит список, допустим, новостей.
Все это обернуто в Layout, в котором есть Link to в котором передаются pathname и hash.

Задача - нужно обновить компонент по изменению хэша.

Как я сделал:
Ввел функцию hashDetect() в которой есть свитч который возвращает нужную строку (active, past). Данная строка необходима потом для загрузки объектов с нужным стейтом через экшен и репозиторий из БД рельсов.
Затем ввел константу hashState, которой присваиваю возвращаемого функцией hashDetect() значения
Затем идут стейты - стейт объектов (news, setNews).
Стейт стейта объекта (поле из БД) в котором значение по умолчанию используется константа hashState
Затем стейт для пагинации, для подзагрузки объектов по кнопке.
И еще стейт вкладки, который, по идее, должен меняться если переключается вкладка новостей из Layout` (active, past)

Затем функция для инкрементации страницы - в ней просто сеттер, который меняет значение стейта на +1. И он, кстати, спокойно работает и добавляет данные.

После идет функция изменения хэша hashChanged() в которой запускается функция hashDetect(), затем сеттер, который присваивает значение хэша объектам (`hashState) сеттер на вкладки и добавил еще консоль лог для того чтобы проверить, что хэш изменился.

Дальше вот вопрос, у меня стоит вот такое присваивание -
window.onhashchange = hashChanged; , где hashChanged- функция, которую описывал выше. То есть это такой лисенер.

Дальше уже идет хук useEffect в котором сеттер hashState и экшен, который возвращает промис, обрабатывает его и подгружает данные.

И вот инкрементация работает - данные приходят.
Если я просто хэш меняю в адресной строке - тоже обновляется. А вот просто по клику - не работает.
Нужен нормальный лисенер?

Если соотношение сторон всегда одинаково, то можно задать вертикальный пропорциональный падинг

https://css-tricks.com/aspect-ratio-boxes/

а нельзя просто дать размер картинке???

мне кажется проще было бы если бы вы просто код скинули, чем его объяснение))

Думаю, вам это не нужно, но если прям захотелось и эти картинки появляются по мере скролла или нажатия кнопки, то бэк может заранее выдавать размеры следующих элементов (соответственно они должны сохраняться в базу данных при загрузке на сервак)

Но обычно даже в масонри гридах юзают определенные стандарты, а изображения кропаются автоматом через background-size: cover.

Окей :)
https://gist.github.com/StellarProcy/d55a8321e29234077f96e5a57143654c

дратути

Действует пятничное разрешение на оффтоп?🌚😁

от темы зависит, я думаю

Капец ты не ленивый

Просто по клику куда?

Я делал простую кнопку в самом компоненте, и онклик в рендере - с ним все работает

А надо, чтобы работало по клику с лэйаут компонента :/

if ("onhashcnahge" in window) {
    console.log('Hash was changed')
}

Вот здесь например опечаточку нашел пока

Так стоп. А layout компонент ты можешь скинуть?