Алоха товарищи фронты!
С недавних пор я на работе перешел на новый проект в котором никогда не было постоянного фронта, а только время от времени брали кого-то на времянку для решения тех или иных задач. В итоге ожидаемо проект оказался сборной солянкой где никто особо не заботился ни о нормальной архитектуре не о производительности. Кому разгребать? Видимо мне :)
В общем все это меня подтолкнуло на мысль что вам возможно будет интересно если я буду рассказывать о каких-нибудь своих действиях или идеях и к чему они приводят. Может чего полезного наговорю.
Ну так вот, при разборе кода первое на что я наткнулся это не правильно продуманные useMemo и useCallback. Их идея в том что бы определенные функции пересоздавались при рендере только в том случае если меняются переменные которые в этом коде используются. А на практике была куча вот таких вещей:
const func = useMemo(() => { const a = propB * stateA; return a;}, [propA, propB, propC, stateA, stateB])
Это просто элементарный пример и как видите мемоизированная функция будет перерисовываться при изменении даже тех переменных которые ей ну никак не нужны. А в моем случае это еще и куски кода размером до 400 строк еще и внутри с запросами...
Когда я их разобрал компонент стал заметно быстрее рендериться а еще стало заметно меньше запросов. В общем не надо так делать...
Если вам такие посты заходят то тыкните зеленую кнопочку плиз.