Зачем нужен useSyncExternalStore

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

Эта штука в целом работает с внешними источниками состояний.

Что такое этот источник состояния? В целом интерфейс евойный состоит из двух трех функций:

1. subsribe - которая используется, чтобы подписаться на изменение чегобытонибыло
2. getSnapshot - которая используется, чтобы получить то самое чтобытонибыло
3. getServerSnapshot - которая используется, чтобы это самое чтобытонибыло на стороне сервере

При ближайшем рассмотрении весьма и весьма полезная штукенция...

Рассмотрим пример с созданием хука для отслеживания изменения ширины окна

//Без  useSyncExternalStore
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
}

export default function WindowWidthComponent() {
  const width = useWindowWidth();

  return <div>Ширина окна: {width}px</div>;
}

//Вариант с useSyncExternalStore

import { useSyncExternalStore } from "react";

function useWindowWidth() {
  // Подписка на изменения
  const subscribe = (callback) => {
    window.addEventListener("resize", callback);
    return () => window.removeEventListener("resize", callback);
  };

  // Читаем текущее состояние
  const getSnapshot = () => window.innerWidth;

  return useSyncExternalStore(subscribe, getSnapshot);
}

export default function WindowWidthComponent() {
  const width = useWindowWidth();

  return <div>Ширина окна: {width}px</div>;
}

Или вот восхитительная тема с mediaQuery

import { useSyncExternalStore } from "react";

function useMediaQuery(query) {
  const mediaQuery= window.matchMedia(query);

  const subscribe = (callback) => {
    mediaQuery.addEventListener("change", callback);
    return () => mediaQuery.removeEventListener("change", callback);
  };

  const getSnapshot = () => mediaQuery.matches;

  return useSyncExternalStore(subscribe, getSnapshot);
}

export default function MediaQueryComponent() {
  const isLargeScreen = useMediaQuery("(min-width: 1024px)");

  return (
    <div>
      {isLargeScreen ? "Большой экран" : "Маленький экран"}
    </div>
  );
}

А в чем разница под капотом? Она как суслик, ее не видно, но она есть.

1. Поддержка Concurrent Rendering — гарантирует согласованность состояния даже при приостановке или перезапуске рендера.
2. Мгновенная синхронизация — состояние всегда актуально на момент рендера, без задержек, свойственных setState.
3. Меньше лишних ререндеров — React сравнивает значения из getSnapshot и вызывает рендер только при изменении.
4. Поддержка SSR и гидрации — позволяет задать серверное состояние через getServerSnapshot, устраняя расхождения между сервером и клиентом.

В общем, интересная тема, на мой взгляд, нужно брать!

Подготовлю к собесам, помогу с рабочими задачами и росту хардов/софтов. Уперся в потолок с з/п, ответственностью?
Если необходимо менторство - пишите @bearlogin

BEARlogin dev — подпишись!

#собеседования #react

Тут пишем отзывы по менторской работе со мной. Только отзывы, остальные сообщения удаляю.

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

Если вам нужно подписаться на изменение какой то части стора, то используйте миддлварь subscribeWithSelector

import { create } from "zustand";
import { subscribeWithSelector } from "zustand/middleware";

const useStore = create(
  subscribeWithSelector((set) => ({
    count: 0,
    user: { name: "Alice", age: 25 },
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

// Подписка ТОЛЬКО на `count`
useStore.subscribe(
  (state) => state.count,
  (newCount, prevCount) => {
    console.log(`Счётчик изменился: ${prevCount} → ${newCount}`);
  }
);

Теперь подписка сработает только при изменении count, а изменения user её не триггерят.
--
Подготовлю к собесам, помогу с рабочими задачами и росту хардов/софтов. Уперся в потолок с з/п, ответственностью? Помогу с ростом грейда от миддла до синьора.
Если необходимо менторство - пишите @bearlogin

BEARlogin dev — подпишись!

#react #zustand

Экзитнулся

Вчера я принял решение выйти из стартапа Funlee, которому отдал 2,5 года.

В итоге — дырка от бублика, испорченные отношения с семьей из-за постоянной занятости, бесконечные созвоны. Полное отсутствие заботы о людях, манипуляции в духе "чёрное — это белое", жизнь в режиме ожидания и обещания "вот-вот выстрелит, скоро в тайланде жить будем, порш поедем покупать тебе", игнорирование фактов и всех практик создания и вывода на рынок SaaS продуктов, а главное — полное отрицание фаундерами необходимости платить команде, пока стартап не начнёт генерировать миллионы.

В общем, кушать что то нужно и детей с женой кормить, поэтому выхожу на рынок.

- CTO, технический лидер, тимлид или архитектор. Код писать не стесняюсь и люблю.
- Технологии, языки схватываю быстро
- Рассмотрю и корпоративные компании, и стартапы, но только если фаундеры понимают ценность оплаты труда команды и нет токсичной атмосферы.

📌 Резюме прикрепил, если есть контакты HR — буду благодарен если скинете.

Я теперь могу говорить, что собрал Бинго 8\8 токсичного стартапа. Ну, тоже опыт...

Знаете, сейчас многие пишут: "Блин, а вот вдруг оно выстрелит, а ты не дождался. Не будет обидно?"

Но дело совсем не в этом.
Этот выход — это победа.
Я победил FOMO длиной в 2,5 года.
Это результат полугодовой трансформации.

Еще летом, в июле, я наткнулся на SkillsLab и начал изучать коммуникацию, манипуляции и практики противодействия.
Потом прочитал книгу Никиты Непряхина "Я манипулирую тобой".

И в какой-то момент я УВИДЕЛ.
Как будто шоры спали.
Я прозрел и наконец-то разглядел всю сеть манипуляций, психологического насилия и контроля, которой опутали меня и всю команду.
Это было как в Матрице — как будто принял красную таблетку.

После этого я пытался повлиять на ситуацию.
Прямо говорил фаундерам, что они манипулируют, что это вредит проекту, что люди выгорают из-за их подхода.
Но не достучался.

"Выгорания не существует. Это просто слабые люди собрались и не смогли дойти на Эверест."

Таков был их ответ.

А дальше произошёл случайный, но ключевой момент.

Я наткнулся на пост Айюба, где он рассказывал, что работа с коучем помогла ему прочистить мозг.
До этого я уже искал коуча, но всё время натыкался на каких-то цыган.

Но тут Айюб поделился контактом.
Я написал и пошёл в работу.

Буквально за два занятия я начал приходить в себя.
Я понял, чего я хочу, куда двигаться, с кем работать и кем быть.
Мы разобрали всю ситуацию со стартапом.

И коуч задал мне один вопрос, который всё решил:

Андрей, за сколько ты был бы готов и дальше подвергаться психологическому насилию?

Я задумался и ответил:
"Ну… за миллион долларов в месяц."

Тогда последовал второй вопрос:

То есть ты утверждаешь, что люди имеют право применять психологическое насилие, если платят миллион долларов?

Я задумался. И сказал:
"Нет."

Тогда коуч повторила первый вопрос:

Андрей, за сколько ты был бы готов и дальше подвергаться психологическому насилию?

И в этот момент всё стало ясно.
Я ответил:
"Ни за сколько."

BEARlogin dev — подпишись!

#стартапы #манипуляции

еще один пострадавший

Раз Андрей высказался, то и мне пора: моя история участия в токсичном стартапе

Жена звонит:
— Где твоя машина? На парковке нету...

Я завис... 🤔 Где машина-то?..

Вспоминаю: остановился у кафе, зашел, поел… и ушел домой пешком. 🚶‍♂️

Определенно пора отдохнуть. 😅

Скинули тут новую UI либу https://www.neobrutalism.dev/
Привлекли отзывы...

Заменит ли AI разработчиков?

Думаю, каждый об этом задумывался. И слышал противоположные мнения: от того, что да, всех заменит железный болван, до того, что волноваться не о чем.

Но истина всегда не на максимумах или минимумах. Она посередине.

AI УЖЕ заменил разработчиков. Но не так, как ты думаешь.
Он не пришёл и не сказал: «Всё, кожаный мешок, твоё время ушло, теперь кодим мы». Он изменил систему.

Сильные разрабы стали ещё сильнее.
По сути, AI — это экзоскелет, который усиливает твои способности.
Если ты ходить не умеешь, экзоскелет не поможет. Скорее, твои навыки ещё больше атрофируются.

Так что AI не заменяет людей, но делает сильных сильнее, а слабых — бесполезными.
Так работает естественный отбор.

А вы что думаете по этому поводу?

P.S. я советую людям, которые сейчас проходят обучение на разраба - вырубайте AI помощников, совсем, наглухо.
Можно пользоваться только AI-чатами, чтобы лучше разобраться в какой то теме, и то, не факт что вам верно чатгпт все объяснит. Может такую ахинею занести, что на собесе просто ржать все будут.

—-
Делаю слабых сильными, чтобы вас не заменил AI или чтобы пройти испытательный срок и не вылететь, пишите в ЛС @bearlogin — разберемся :)

BEARlogin dev — подпишись!

Шок контент: разраб осознал опасность нейросетей

BEARlogin dev — подпишись!

Вопрос

Есть такой метод

class UserService {
...
  async updateUser(id, data) {
    await this.user.update(id, data);
    await this.logger.log('User updated', id, data);
  } 
...
}

Не спрашивая у chatgpt скажите, что тут не так?

Upd1. С кодом, входными данными все в порядке, дело в другом.

Ответ напишу в 13.30

Как мозг дорисовывает контекст

Эксперимент оказался интересным — как только мозг видит код, он сразу начинает достраивать отсутствующий контекст.
Кто-то решил, что это контроллер и что он блокирует ответ пользователю. Хотя этот метод мог быть вызван где угодно:
— Планировщиком
— Консюмером события
— Обработчиком джобы
— что угодно

Кто то искал ошибки в коде :)

Но суть не в этом.

Настоящая проблема — отсутствие транзакции ⚠️

Если логгер падает, система остаётся в несогласованном состоянии:
1. Данные обновились
2. Логирование не произошло

Что делать?

Используем транзакцию
Если и логгер, и данные пишутся в БД, оборачиваем всё в транзакцию:

...
// это просто пример, показать принцип, воспринимайте как псевдоязык
async function updateUser(id, data) {
    const transaction = await this.db.transaction(); // Начинаем транзакцию
    try {
        await this.user.update(id, data, { transaction });
        await this.logger.log('User updated', data, { transaction });
        await transaction.commit(); // Подтверждаем изменения
    } catch (error) {
        await this.logger.error('User update failed', data);
        await transaction.rollback(); // Откатываем всё, если что-то пошло не так
        throw error;
    }
}
...

А если логер внешний, то после обновления пользователя он так же мог упасть, например сервис логирования не доступен.

Таким образом, всегда думайте о сценариях, когда система может оказаться в несогласованном состоянии.
#архитектура

Гарантированная доставка и очередность событий.

Конечно круто что у охранной системы моей машины гарантированная доставка пуш уведомлений.

Но не очень круто получать уведомление, что автомобиль снят с охраны «сейчас», после того, как ты его закрыл и ушел на километр…

Мышление архитектора и разработчика

По поводу вчерашней задачки — интересно, сколько негативной реакции она вызвала. Я порефлексировал на эту тему и понял, что мышление архитектора и разработчика сильно отличается. Разработчик начинает видеть паттерн только когда сталкивается с проблемой напрямую. Но, например, в случае с логированием можно вообще никогда не столкнуться с такой проблемой — и это нормально.

Я бы тоже не обратил на это внимание, если бы не читал книги и не проходил/проводил курсы по архитектуре. Архитектор учится видеть паттерны, предугадывать потенциальные проблемы, влияющие на качества системы. Но при этом он может не знать и не замечать специфических сложностей имплементации с точки зрения конкретного языка или фреймворка.

Эта разница в подходах и приводит к недопониманию. Разработчик оценивает проблему, исходя из своего опыта и практического столкновения с ней, а архитектор — через призму рисков и долгосрочных последствий. Часто это выглядит как «надуманная» проблема, потому что на уровне кода её ещё нет, но на уровне системы последствия могут оказаться критичными.

В итоге хороший архитектор не просто видит потенциальные узкие места, но и умеет донести их значимость до команды. А хороший разработчик, в свою очередь, не просто решает текущие задачи, а способен взглянуть на систему шире, задавая правильные вопросы.

BEARlogin dev — подпишись!

#рефлексия #архитектура

Так, давайте покажу пример из книги, возможно я как то не так подал его, когда переводил контекст в js окружение, более привычное

Книга — Влад Хононов "Изучаем DDD"

Подписчик попросил разместить вакансию.

Вакансия:
https://hh.ru/vacancy/116796914?from=share_android

Как я понял, надо пилить плагины под Jetbrains IDEхи

Попросил для вас прямой контакт HR - вот он @max_toky
Что это значит? Значит можете резюмехи свои кидать прям ему. (и не только на джаву :))


P.S. Только не волки, волки идут сразу нахуй.

Принципы ООП в React с хуками, вот, да, в функциональном программировании(лан пох, не совсем в функциональном), принципы ООП, да. (Это скриншот из канала, не жмите на него, не видео)

Кароче, само видео еще смешней, чем его описание https://www.youtube.com/watch?v=x6x2h4kWx2c
"Это абстракция"(с)

Ну лан, ок, вот да