Пять нужных кастом-хуков для React

Что будет с useHover, если элемент который к нему подключен рендерится по условию и вдруг исчез, а потом появился?

В 4 хуке вы упомянули про производительность, но в хук воткнули useLayoutEffect. Зачем он там? То же самое и в 5

Zustand в React

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 }),
}));

Ну как это нет бойлерплейта, чтобы его не было, должно было бы выглядеть так:

const store = create({
  count: 0,
  increment() {this.count += 1},
  reset() {this.count = 0},
});

Effect для TypeScript разработчиков

Это вопрос не вам, а к примеру кода от markelov69

Effect для TypeScript разработчиков

Почему вам нравится
new A().effect1().effect2().......effectN()
но не нравится
new A(A.effect1(), A.effect2(), ..... A.effectN())

Мне со стороны кажется, что только в этом разница, нет?

Callback рефы в React: что это такое и где можно применять

Ну как же. В самом описании хука useEffect написано, что если значение в массиве зависимостей отлично от предыдущего рендера, то реакт дернет useEffect

Callback рефы в React: что это такое и где можно применять

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

Давайте все таки разберемся. Вы используете хук useRef, который создает объект с полем current на все время жизни компонента. И ссылка на объект останется неизменной. Это важно.

Далее в этот объект вы в зависимости от условия кидаете новые ссылки на DOM элементы.

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

Попробуйте не переписывая ничего заменить:
useResizeObserver({ elemRef, onResize: handleResize });
на
useResizeObserver({ elemRef: elemRef.current, onResize: handleResize });

Собаки и кошки vs человеческий детеныш: кто умнее

Т.е. я (хоть уже и не молодой) достаточно часто могу переиграть кошку в игре "кто кого цапнет на скорость".

мне кажется тут надо внести детали. Когда вы играете в эту игру, вы пользуетесь вашими знаниями о поведении кошки и некой стратегией. То есть вы планируете рассчитываете ее действия и с высокой точностью предугадываете его. На что уже достаточно легко среагировать. Кошка же наверное каждый матч ведет без какой либо тактики и уж тем более стратегии(максимум тихо подкрасться), а чисто интуитивно атакует/защищается.

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

П.С. У меня есть кошка и когда я с ней намеренно воюю, то я выигрываю. Но от внезапного "кусь" увернуться мне очень редко удается, а удается только тогда, когда я вижу, что "что не то, ща чет будет".

Взгляд с другой стороны на useMemo, useCallback и React.memo в React: когда их стоит использовать

Видел проекты на 30+ мб рукописного реактовского кода, где обернуто абсолютно все и видел такие же проекты, где ничего не обернуто. Это все конечно ЦРМки были, но все же разницы не чувствуется

Observable – удобный state-manager

brotli же уже, какой gzip

Особенности Effector, которые почему-то никто не обсуждает: опыт ВКонтакте спустя год использования

В статье есть даже ссылки на переписку в том самом чатике. Автора спутали с небезызвестным участником хабра и кикнули за "неправильные вопросы"

Новый фронтенд-фреймворк?

Ваш пример чутка нерабочий, необходимо расширить до 4 строк кода

Примитивы в JavaScript — это миф?

Вывод некорректный по итогу. А эксперимент годный. Я как раз недавно пытался по новой погрузиться в эту тему(удалось не до конца, пока на паузе).

Стоит заметить, что сразу можно откинуть источники инфы, которые пользуются определением "ссылочный/примитивный". Видимо это тянется с ES 5 https://262.ecma-international.org/5.1/#sec-4.3.2

В новой спеке используются понятия " Values without identity/ Values with identity " и то ...
https://tc39.es/ecma262/multipage/notational-conventions.html#sec-identity

Внимание, ниже мой вывод, который может быть вообще некорректный и требует валидации.

Как я понял каждое значение имеет некие характеристики, которым можно описывать само значение(в том числе ссылка на значение в памяти). И если с так называемыми примитивами эти характеристики легко получить, то с объектами - нет.

Если я ошибся, то поправьте, но только с ссылками на офф доку, потому что тема оч интересная

Запуск идеи стоит 5 млн, и это дорого. Как сэкономить на проекте? Спойлер: откажитесь от React

хром 122.0.6261.112.
захожу по https://mol.hyoo.ru/
прожимаю "энциклопедия"
по центру появляется контент с кнопками с выпадающим меню.
начинаю раскрывать пункты меню и подпункты - моргает экран.

в реакте такое обычно, когда 1 suspense на всю прилагу(условно)

Почему не любят JavaScript?

Можно

Почему не любят JavaScript?

Да, есть такие моменты, но. Я когда начинал js учить, писал код, который ломался при малейших неверных движений. Потом попал на проекты с ts. И уже долгие годы пишу на нем. Сейчас заметил, что ts под капотом дисциплинировал меня писать код с кучей проверок. Я пет проект на js чистом пишу и снова присутствуют все эти проверки. По моему это хорошо, что меня дисциплинировал ts, а не вечно падающий прод из-за моего плохого кода )

После прочтения применить, или Чистый код на практике

видимо зря я относился к этому "на забитом". Целая наука оказывается

После прочтения применить, или Чистый код на практике

сейчас никак не отделяю

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

Клоню к тому, что если вы топите за то, чтобы отделять. То надо отделять каким-либо видимым(бросающимся в глаза) образом. Ведь визуально я сразу замечу условно "черту", что сразу вызовет вопросы. А вот если нет, ну вы поняли. На ревью только всплывет, что я намешал вам импортов

После прочтения применить, или Чистый код на практике

2-ой абзац согласен полностью.

Очень помогает при рефакторинге, когда надо перетащить в другую папку компонент, у которого штук 10 импортов, и нужно перебить все относительные пути.

Вроде уже все IDE помогает делать это автоматически

Это надо, чтобы визуально отличать импорт внешних и внутренних зависимостей

Как вы проводите черту между двумя этими типами? Пустой строкой?

После прочтения применить, или Чистый код на практике

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

п.с. Сам на забитом отношусь к порядку этих самых импортов. Но во время ревью смотрю чтобы никто случайно не импортнул что-нибудь "не из того места"

Веб-компоненты в 2023: нужно поговорить

Отмечу, что не менее приятно читать ваш диалог