Обновить
8K+
6
Сергей Волков@js2me

Фронтенд разработчик

12
Рейтинг
1
Подписчики
Отправить сообщение

Абсолютно с вами согласен, оставляя существующий проект на съедение вайбкодингу, без какого либо рефакторинга и контроля того, что пишет ИИ — учесть проекта сведётся к нечитабельному коду, дубликатам и хаосу, ну и ещё ИИ все равно будет труднее понимать такой проект. Увы руководство и менеджеры вышестоящие над разработчиками не всегда это понимают и больше заставляют забывать о качестве и выдавать количество (функционала)

Да, так в основном и строятся крепкие веб приложения сейчас. Мы вместо rxjs используем mobx только

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

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

В общем это я к тому что баги хоть и создают разработчики, но не чинят их не потому что они их не хотят починить, а просто потому что им не дают времени на это

Спасибо за комментарий! По пунктам:

  1. Порядок рендера - не проблема. useValue в проде использует useRef-паттерн ленивой инициализации, экземпляр привязан к конкретному хуку, а не к порядку вызовов. С ViewModelStore дополнительно работает пуллинг по id - повторного создания не будет.

  2. Отброшенный рендер - актуально только для сценария без ViewModelStore, что не основной кейс. С ViewModelStore viewModels.attach() просто инкрементит ref-count, что безопасно. Без стора действительно есть ограничение при работе с Suspense - это описано в доке. Перенос mount() в Layout Effect решил бы его, но требует нетривиального рефакторинга - синхронный mount в рендере нужен для SSR и совместимости с mobx-react observer.

  3. StrictMode - работает корректно. В проде useRef сохраняет экземпляр через unmount/remount, lastAttachedInstanceRef предотвращает повторный attach. В дев режиме useMemo может пересоздать экземпляр при remount, но пуллинг по id в сторе не даст дублирования, а без стора очистка отработает корректно. При этом лично я StrictMode не использую - на мой взгляд, инструмент, который меняет поведение в дев и не идентичен поведению в продакшне, применять нельзя.

в одном компоненте - будет лишний ререндер.

Насколько я знаю лишнего рендера не будет, потому что 18+ реакт будет автоматически батчить такие апдейты, но mobx реакции вызовутся два раза да

Привет, все зависит от того как писать !

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

reaction(
    fn1,
    fn2,
    {
      signal: this.abortSignal
    }
)

В общем утечек памяти в самом observer я с уверенностью могу сказать что нет, потому что у нас вкладка с фронтом (два фронта: главное приложение + iframe приложение внутри) после работы GC занимает память 84-86 МB

Важный момент: мы не используем React хуки вовсе в слое представления для БЛ (кроме юайных хуков вроде useTable), поэтому прокси не отправляются в массив зависимостей в хуках, как и не используются в замыканиях в хуках. Это может быть связано с утечками

Да, спасибо за внимательность, допишу об этом моменте в статье!

Этот варнинг убирается через настройку

import { configure } from "mobx"

configure({
    enforceActions: "never"
})

Привет!

В данный момент мы разрабатываем чисто CSR апку, но на гитхабе у меня можно найти пример работы MobX в режиме SSR (GOZON), а также да, как вы упомянули, можно использовать mobx-tanstack-query + написать некий стор который имеет базовое состояние-слепок стейта

Что то кнопка зарегистрироваться не работает

Золотое правило: Если компонент не переиспользуется в двух+ фичах, ему не место в общей components. Он должен жить внутри своей фичи.

Получается если компонент будет переиспользоваться в двух+ фичах, то ему место в общей components? Это же тот же хаос создастся:)

Честно скажу выглядит очень красиво и аккуратно!

На счёт клиента для фронта увидел такой код, не совсем понял откуда берется api, предполагаю что это целое апи из бэка

import { api } from '@some-shared-library/contract';

const client = createClient(api, {
    baseUrl: 'https://api.example.com',
    getToken: () => localStorage.getItem('token')
});

Если это так, тогда вопрос как обстоят дела с тришейкингом? Не потянется ли в бандл весь api для того чтобы работала типизация на фронте?

Нейростатья + реклама своей платформы 👍

Интересно сравнить что быстрее neovim или zed

Очень сочный и полезный дайджест, спасибо!

Тот же пример на "всеми" нелюбимом стейт менеджере...

const UserList = observer(({ userIds }: { userIds: UserId[] }) => {
  const users = userIds
    .map((id) => userStore.users[id])
    .filter(Boolean); 

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.fullName}</li>
      ))}
    </ul>
  );
});

Причём как правило достаточно использовать observer и computed.

И никаких useShallow :)

Взяли в прод, спасибо!

Ну и как подметили выше - отображение всего содержимого повышает когнитивную нагрузку, будет разбегаться глаза

Тогда не представляю как должно быть "правильно" для этого элемента ввода, с точки зрения UI/UX, потому что растянуть список по высоте до размеров экрана это неполноценное решение, которое все равно заставит скроллить, а отображение огромного модального окна чтобы выбрать эти элементы тоже, на мой взгляд, странно

В статье не хватает рецепта свиных крылышек

Информация

В рейтинге
743-й
Откуда
Нижний Новгород, Нижегородская обл., Россия
Работает в
Дата рождения
Зарегистрирован
Активность

Специализация

Фронтенд разработчик
Ведущий
JavaScript
React
TypeScript
HTML
CSS
SCSS
Веб-разработка
Адаптивная верстка
MobX