⌛️Зачем нужен хук useDefferedValue?

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

Представь: в таблице или списке 10к записей, и каждая фильтрация вызывает у интерфейса микроинфаркт. UI лагает, будто на довре 2010-й. Ты что-то упустил. Пушить такое нельзя.

В чем же дело? Пока пользователь печатает в поиске, реакт ререндерит огромный список на каждый символ.

💡 И тут на сцену выходит useDeferredValue.

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

const oldTableItems = getHugeAmountOfItems();
const defferedTableItems = useDeferredValue(oldTableItems);

Здесь oldTableItems - это набор итемов с предыдущего рендера, а defferedTableItems - новый, отложенный для следующего рендера.

Состояние, когда данные в интерфейсе еще задерживаются, можно поймать простым сравнением и навесить CSS-класс, чтобы отобразить:

 const isStaleState = (oldTableItems !== defferedTableItems) && 'color: gray'.

Интерфейс - шёлк, юзер доволен, ты - красавчик.

На своем менторстве я помогаю понять такие вещи, чтобы ты уверенно отвечал на собеседованиях и получал вкусные офферы ⬅️

🤓 Что оценивают на техническом интервью?

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

Что хочет увидеть технарь на той стороне?

➡️ Знания. Как глубоко и широко владеешь теорией, решаешь абстрактные практические задачи типа console.log(11 && 45).

➡️ Навыки. Как применяешь теорию. Для этого - лайфкодинг, включая алго-секцию.

➡️ Опыт. Как твои знания и навыки работают в реальных задачах. Для этого - задачи по рефакторингу React-приложений и "странные" просьбы рассказать как вообще об опыте, так и о задачах, которыми гордишься.

➡️ Soft-skills. Будь внимателен к этому пункту, это не буллщит от эффективных менеджеров. Это самый необъективный, психологичный - и очень важный кусок мозаики, если нанимаешься на линейную позицию. Даже на синьора. Они хотят видеть спокойную уверенность в себе, аналитический ум, умение внятно излагать мысли во время решения задач - особенно тех, решений которых ты не знаешь.

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

На своих консультациях я даю базовую подготовку к техническому этапу. Пиши мне в личку "+", и оффер станет ближе ✅

❌ 3 ошибки, за которые отсеивают рекрутеры

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

Почему?

У тимлида ставка 300+ тысяч. Его время дорого стоит компании.

Поэтому фильтр HR неизбежен. Он максимально прост ⛔️

Разберем его:

1️⃣ Список технологий. У HR перед глазами перечень технологий на проекте. Упомянешь или нет? Если нет - дальше не пустят ❌

2️⃣ Стиль общения. Нервные смешки, путанная речь, явное выдумывание - ❌

3️⃣ Понимание ценности. Не можешь обосновать, что ты можешь дать компании, что делаешь хорошо, - на позицию выше middle не пройдешь ❌

Все эти ошибки я совершал сам. Они крайне популярны.

Не понимаешь, почему не пропускают на технические? Пиши мне в личку: на консультации я помогаю выявить ошибки и получить работу быстро ✅

👀 Не знаешь этот хук React - у тебя проблемы!

Ты не сможешь решать сложных задач, не зная всех хуков React. Синьора отличает навык работы с крайними, редкими случаями.

Хук useImperativeHandle - твой лучший друг. На которого ты, скорее всего, забил.

Он превратит ref-объект в публичное API компонента-ребенка.

Хочешь менять состояние ребенка из родителя? Да! Работать с абсолютно любой сложностью, инкапсулированной внутри чайлда? Снова да!

Ты нарушишь Flow-подход, но иногда иначе никак.

➡️ Какие мне известны редкие кейсы, решенные useImperativeHandle?

✅ В UI-ките есть форма, инкапсулирующий логику сброса. Нужен доступ к этой логике. Выносить ее выше - маразм. И разработчик UI-кита предоставляет ручку к инкапсулированной логике.

✅ Есть огромный компонент видеоплеера. Задача - останавливать просмотр по клику в хедере. Я не хочу размазывать логику по всему приложению. Создаю с useImperativeHandle метод. Пилю реф. Пробрасываю через контекст в видеоплеер. И дергаю. Вот и все, без костылей с Redux.

А какие задачи ты мог решить с useImperativeHandle, но по незнанию делал костыли?

Делись инсайтами в комментах ⬇️⬇️⬇️

💪 Как работать 12 часов в сутки и не выгорать?

Говорят, работай не много, а головой. А то выгоришь. Какие, мол, 12 часов, Дэн?

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

Делюсь простой тактикой.

Разбей день на 3 фазы по 4 часа:

1️⃣ Сложная умственная работа. Технические интервью, продумывание архитектуры, сложные задачи по фронту.

2️⃣ Задачи умеренной сложности. HR-скрининги, шаблонный код, тесты.

3️⃣ Чилловые задачи. Пассивное обучение с конспектами, рутинные задачи, посты в блог.

В фазу 2 впихни спортзал, полезно для мозга.

Работай с Pomodoro-таймером.

Один день в неделю отдыхай. Даже если работа по 12 часов получается и ты чувствуешь себя суперменом. Криптонит никто не отменял.

И не волнуйся, на своем менторстве я не заставляю так работать 😁

☘️ 9 мыслей синьора помидора обо всем

Про работу:

0️⃣ Учись на практике. Изучил фишку языка - сразу примени. Почему: так усваивается гораздо лучше.
1️⃣ Прокачай софт-скиллы. Это не корпоративный буллщит, а твой набор ключей к комфортной работе.
2️⃣ Пользуйся Pomodoro. Мозг устает от задач, дай ему отдышаться.

Про здоровье:

3️⃣ Занимайся спортом. Любым. Будь то бег, зал или занятия на турнике. Нагрузка стимулирует кровоток, что заставляет мозг работать. После 30 особо полезно.
4️⃣ Высыпайся. Не выспался - привет тупняк на весь день.
5️⃣ Выкинь сахар, пельмени, чипсы и другую дрянную пищу, чтобы держать в тонусе дофаминовую систему.

Про жизнь:

6️⃣ Работай над обложкой. Хорошо одевайся, учись общаться, учись мыслить глобально и с позиции силы.
7️⃣ Формируй свою среду. Не общайся с негативными людьми - даже если сам на негативе. Негативное мышление - тормоз.
8️⃣ Ставь цели на день, неделю, месяц, год и на всю жизнь. Без целей прочитанное выше - бесполезно.

❌ Ошибка 90% самоучек

Я самоучка. Если мы с тобой похожи, я знаю твою боль:

Что, чёрт возьми, учить? В каком порядке?

🤯 JS - 100500 учебников.
🤯 WebApi - огромная дока.
🤯 TS - материалы для новичков отсутствуют.

Панель закладок раздулась от статей, которые "надо бы потом почитать".

Что в итоге? Откладываешь на завтра. Или бросаешься с головой учиться, натыкаешься на непонятный пласт и выгораешь.

Нет опытного друга, чтобы набрать, обсудить материал 🧑🏻‍💻

А главное - ты тратишь массу времени! Как на попытки самому понять зубодробительный материал, так и на борьбу с прокрастинацией (защитным механизмом психики от бесполезных занятий).

Эту ошибку совершает 90% самоучек. И я совершал.

Пока не понял простую вещь:

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

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

Как же я решил эту проблему?

✅ Убрал из головы установку, что я самый умный и все смогу сам.

✅ Начал с простого - стал брать консультации.

✅ А чтобы стать по-настоящему синьорным чуваком - обратился к ментору.

Именно менторинг всё переворачивает. Каша инфы в голове превращается в стройную систему. Перестаешь сидеть по полдня над задачей - понимаешь, как решить. Если не понимаешь, ментор уделит время, подскажет, как решить или куда копать.

Сейчас я сам менторю новичков, junor и middle фронтенд-разработчиков. Веду просто за руку.

➡️➡️➡️ Записывайся на предварительный созвон, чтобы обсудить твою ситуацию и определить, как мы решим твою проблему в обучении ⬅️⬅️⬅️

⚔️ React vs Vue: что учить в 2025?

...а может, angular или svelte? 😲

Давай разберемся.

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

Обычно на проектах технологии уже подобраны. А если ты техлид и сам их выбираешь - напиши мне, пойдем в бар 🤝

Какие технологии выбирают чаще всего? React с экосистемой.

Значит, на React больше всего вакансий.

С другой стороны, на React обучает 90% курсов по фронтенду, поэтому на каждую вакансию больше желающих.

Поэтому.

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

1) Стать лучше выпускников курсов по фронту и углубиться в React. С персональным ментором - задача несложная.

2) Не конкурировать с ними и пойти в Vue, но быть готовым к меньшему количеству вакансий.

Выбор за тобой.

🥴 GPT обновился: нас заменят!

Сегодня вышла обнова o4-mini-high, лучшая модель-кодер.

И вот что она ответила про синтаксис в строгом режиме 😁

Формально все правильно. Так и сработает - в глобальной области видимости.

Но! В любом блоке, если переменная let или var существует выше, ошибки не будет.

Модели по-прежнему галлюцинируют, выдают часть правды или подменяют понятия.

На ближайшие 5-10 лет я за свою профессию спокоен 🙈

UPD: оказывается, я невнимательно прочел ответ чата. Он все сказал правильно. Значит, все-таки нас заменят 😁

❌ Спорим, не ответишь?

function foo() {
  console.log( this.a );
}

var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };

o.foo(); // 3
(p.foo = o.foo)(); // что выведет в нестрогом режиме? Почему?

Такие вопросы задают джуниорам, а все чаще и мидлам.

Почему?

На рынке 2025 требования выросли. От фронтов ждут знания языка на уровне, которого раньше ждали от бэкендеров в финтехе.

Можешь с этим не соглашаться. Можешь возмущаться.

Но правила диктует рынок.

А теперь ответ:

Выведет 2. Вот почему.

Оператор присваивания, "=" возвращает ссылку на функцию в отрыве от контекста.

Звучит непривычно, но да, он возвращает значения, как и оператор return.

В коде "=" вернет ссылку на функцию foo, присвоенную объекту o.

Отметь: ссылку на саму функцию, а не метод объекта с привязкой к контексту.

По умолчанию функции привязывают свой this к глобальному объекту.

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

Объявленные в глобальном объекте переменные становятся его полями, доступными через точку.

И мы получаем из глобального объекта 2.

А в своем менторстве я учу понимать такие вопросы, вместо того чтобы заучивать ответы.

✅ Что ждет на моем менторстве?

Решиться на менторство - непросто.

Не всегда понятно:

- Как конкретно построена работа с ментором?
- Каких результатов я достигну?
- Если что-то пойдет не так, у ментора есть план?

Я написал полный гайд по моему менторству, как все устроено изнутри ✅

Переходи, чтобы получить подробный план: ➡️➡️➡️ https://teletype.in/@daniel.s/S9RJ19F0qBh

Остались вопросы? Пиши в комменты)

⚽️ Обойти 90%: навык победителей

Конкуренция в IT и других сферах растёт с каждым днём.

Чтобы быть впереди, нужно чётко понимать, что даёт преимущество.

«Рычаг» (leverage) — инструмент, позволяющий добиться преимущества с минимальными усилиями.

Простой пример: если тебе нужно сдвинуть тяжёлый камень, можно годами тренироваться - а можно просто использовать лебёдку.

➡️ В IT такой рычаг - системное мышление.

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

- SOLID
- KISS
- DRY
- Scrum и Agile
- Архитектурные паттерны

Например, принцип единственной ответственности (SRP из SOLID) основан на теории систем. Система состоит из подсистем, которые связаны внутри, но слабо зависят друг от друга.

Органы в теле человека не знают друг о друге, но образуют единый организм. В университете отдельные факультеты автономны, а вместе они — единая образовательная система.

В программировании работает точно так же.

Успешные спецы вроде Павла Дурова, Марка Цукерберга или любого архитектора ПО с зарплатой от 500 тысяч рублей — владеют системным мышлением интуитивно: родились с ним либо развили с детства.

Ты можешь приобрести этот навык осознанно.

Начни развивать системное мышление уже сейчас, и ты получишь преимущество перед 90% конкурентов, которые всегда будут на два шага позади.

10 лайков - расскажу о системном мышлении и его применении больше ✅