Как frontend-разработчику получить оффер в Bigtech?

Ты уже давно в профессии, но до сих пор в компании, которая тебя не ценит. Зарплата не растёт, задачи скучные.

Хочешь сменить работу, но технические собеседования всё сложнее, а на отклики на hh только отказы и тестовые?

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

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.

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

🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки.

Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks

Реклама, erid : 2W5zFGwJB1r ИП Галактионов Тихон Витальевич, ИНН 771618975809

Custom Hooks

Часто мы пишем один и тот же код в разных компонентах: работа с localStorage, отслеживание размеров окна, дебаунс запросов. И вот тут кастомные хуки реально спасают.

Например, простой хук для работы с localStorage 👇

import { useState } from "react";

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  const setStoredValue = (newValue: T) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, setStoredValue] as const;
}

export default useLocalStorage;

Теперь можно использовать так:

const [theme, setTheme] = useLocalStorage("theme", "light");

🔥 Плюсы:

- код становится чище и переиспользуемым;
- избавляемся от дублирования логики;
- легко тестировать и поддерживать.

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

✍️ @React_lib

❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.

✅ Вместо этого используйте перечисления (enums).

✍️ @React_lib

🚀 Хотите создавать современные и отзывчивые веб-приложения на самом популярном JS-фреймворке? Начните с бесплатного вебинара и прокачайте навыки React прямо «здесь и сейчас»!

🗓 28 октября, 20:00 — «Галерея с API и тёмной темой — React зажигает UX»

Что узнают участники:
- Связь React с реальным API и динамическая загрузка данных
- Работа с событиями и хуками для интерактивного интерфейса
- Lazy loading и его влияние на UX
- Как собрать полноценное приложение всего за 1,5 часа

🎯 Для фронтенд-разработчиков и начинающих React-разработчиков, которые хотят оживить интерфейсы и собрать мини-проект для портфолио.

💻 Курс «React.js Developer» - следующий шаг после вебинара:
- Освоите Redux, Redux-Saga, Redux-thunk
- Будете создавать SPA и оптимизировать под production
- Изучите TypeScript и пишете чистый код
- Работаете с GraphQL, Apollo, Relay
- Разбираетесь с Webpack, Babel и паттернами функционального программирования

⚡️ Не упустите шанс - вебинар бесплатный, а курс поможет выйти на уровень middle+ и собирать проекты с реальными API! Регистрируйтесь на вебинар: https://vk.cc/cQnPZ7

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

🚀 Оптимизация React-приложения: 5 техник, которые работают

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

1️⃣ Используйте React.iss.onemo
Если ваш компонент ререндерится без причины, оберните его в React.iss.onemo(). Это предотвратит ненужные перерисовки, если пропсы не изменились.

const OptimizedComponent = React.iss.onemo(({ data }) => {
  return <div>{data}</div>;
});

2️⃣ Оптимизируйте контекст с useMemo и useCallback
Частая ошибка — передача в useContext сложных объектов без мемоизации. Используйте useMemo и useCallback для оптимизации.

const value = useMemo(() => ({ user, logout }), [user]);  

3️⃣ Разбейте состояние на атомарные части
Часто программисты хранят весь стейт в одном useState, но лучше разбить его на части. Так обновление одной переменной не будет вызывать ререндер всего компонента.

const [name, setName] = useState("");  
const [age, setAge] = useState(0);

4️⃣ Динамическая подгрузка компонентов (Code Splitting)
Если у вас большое приложение, используйте React.lazy для загрузки компонентов по требованию.

const LazyComponent = React.lazy(() => import("./BigComponent"));

5️⃣ Используйте производительные списки
Если у вас много элементов (список в 1000+ элементов), используйте виртуализацию, например, react-window или react-virtualized.

import { FixedSizeList as List } from "react-window";

<List height={400} itemCount={items.length} itemSize={35}>
  {({ index, style }) => <div style={style}>{items[index]}</div>}
</List>;

✍️ @React_lib