Alexandroppolus

https://reactnavigation.org/docs/typescript/#speci...

там вместо RootStackParamList поставь RootNavigationList

использовал для кейса, когда есть реф и у этого рефа current мог меняться во время жизни компонента.

вкратце:

const ref = useRef<HTMLDivElement>(null);
const prevRef = useRef<HTMLDivElement>(null);

useEffect(() => {
    if (ref.current === prevRef.current) { return; }
    prevRef.current = ref.current;

    // реф поменялся, что-то делаем
});

по факту я здесь делаю то же самое, что происходит в депенденсах, но депенденсы непригодны:
1) [ref] - бесполезно, будет один и тот же, эффект не перевызовется
2) [ref.current] - бесполезно, реф меняется после фазы рендера.

Весь (за мелкими исключениями) инструментарий для фронта работает на node.js. Так что без вариантов.

почему дальше у нас сначала идет лог из рефа ребенка, а только потом из рефа родителя - непонятно

назначение рефов происходит на том же этапе, что и выполнение колбэка в useLayoutEffect: синхронно сразу после того, как сформируется дерево виртуального дома, и по нему будет обновлено дерево реального дома. Все перечисленное делается в одном синхронном куске кода, без микротасков и т.д. Разумеется, до этапа отрисовки на экране.
Почему снизу вверх, то есть от чилдов к парентам? Значения рефов могут использоваться в колбэках useLayoutEffect, значит они к этому моменту должны быть готовы. Т.е. чилд должен успеть назначить реф до того, как парент попробует к нему обратиться. Распространение данных в обратную сторону, в комплект к распространению в прямую (через пропсы). Это одна из причин, могут быть и другие.

Эффекты useEffect срабатывают после отрисовки на экране, т.е. в отдельном таске. Для единообразия они тоже срабатывают в порядке от чилдов к парентам.

Указанный порядок имеет свои минусы, например https://habr.com/ru/articles/574536/ , но в целом плюсы перевешивают.

Надо заметить, что и функции очистки для useEffect и useLayoutEffect тоже вызываются сначала на чилдах, что правильно со всех сторон.

Это может понадобиться, если в твоем компоненте используется какая-нибудь хрень, которой удобно управлять не через изменение пропсов (стандартный react-way), а через вызовы функций. Ну вот тот же пресловутый инпут или текстареа - у него есть штуки, которые не отобразились на пропсы, например выделение текста.

Соответственно, чтобы вызывать функции, нужен экземпляр - что-то вроде viewModel для твоего компонента. И тут два пути: либо ты вручную создаешь этот объект, просовываешь через проп, и компонент к нему "подключается", либо компонент сам создает сей объект и возвращает тебе, уже с помощью рефа. Вот useImperativeHandle реализует второй способ. При размонтировании, реф обнуляется, компонент "заметает следы".

Пример из более-менее известного - библиотека Формик
https://github.com/jaredpalmer/formik/blob/main/pa...
formikbag - тот самый "объект с методами". Он создается через хук useFormik, но конкретно здесь компонент Formik сам это сделал и отдал тебе

Скорее всего, этот твой console.log(like) вызывается до того, как лайчинские загружены. Потому в консоли рисуется Array(0). Далее ты кликаешь на треугольник, но к этому моменту данные уже приходят и потому видны. "Array(0)" не меняется, остаётся как есть.

Проблема твоего стора Like в том, что это нихрена не стор. Он не уведомляет никого об изменении своих данных. Компоненты не перерисовываются. Проще всего здесь использовать mobx, тогда достаточно будет добавить пару строчек в классе Like. Ну, или какой-то иной стейт-манагер.

setChatUsers(x=>setUserOnline(lastChatMessage, x));
setChatUsers(x=>setUserOffline(lastChatMessage, x));

В проп style надо передавать объект, а ты зачем-то ставишь туда строку.