Жизненный цикл

В какой момент жизненного цикла компонента флаг в хуке useIsMounted устанавливается в значение false?

Забыли? Вернитесь к посту от 01.09.2025.

👉 @sWebDev

Давайте посмотрим на реальность. Какая у вас зарплата в месяц (тыс. ₽)?

👎 – до 100.

❤️ – 100-150.

🔥 – 150-200.

🤔 – 200-250.

👍 – 250+ (неприлично много)

👉 @sWebDev | #юмор

Управление состоянием с сохранением в LocalStorage

В React хук useLocalStorage сохраняет состояние в localStorage. При инициализации берёт данные из него (если есть), при обновлении — синхронно записывает. Удобно для темы, языка и других настроек, сохраняемых между сессиями.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    try {
      localStorage.setItem(key, JSON.stringify(value));
    } catch {
      // Игнорируем ошибки (например, если storage переполнен)
    }
  }, [key, value]);

  return [value, setValue] as const;
}

Теперь можно использовать его, как обычный useState, но с автоматическим сохранением.

👉 @sWebDev

CSS Custom Highlight API

Стилизация текста - важная задача для Frontend-разработчика. CSS Custom Highlight API позволяет управлять внешним видом выделенных диапазонов, делая акценты гибкими и удобными. В статье разбираем основы работы API и показываем, как создавать и применять стилизованные выделения на практике.

👉 @sWebDev

И как бороться с этим?

👍 - Сила воли и 10 литров кофе

❤️ - А зачем бороться?

👉 @sWebDev | #юмор

Node js разработка приложений в микросервисной архитектуре с нуля

Книга Юлии Поповой «Node.js: разработка приложений в микросервисной архитектуре с нуля», вышедшая в апреле 2024 года, представляет собой практическое руководство для разработчиков от уровня джун и выше. В ней показан процесс создания микросервисов на Node.js с использованием NestJS и других популярных инструментов. Несмотря на формулировку «с нуля» в названии, материал рассчитан на тех, кто уже знаком с JavaScript, TypeScript и NestJS. Автор сосредотачивается не на теории, а на практических приемах построения масштабируемых микросервисных приложений.

👉 @sWebDev | #курсы_книги

👉 @sWebDev | #курсы_книги

Поведение на клиенте

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

Посмотреть ответ.

👉 @sWebDev

Отслеживание размеров окна

React хук useWindowSize отслеживает размеры окна браузера для адаптивных интерфейсов. В SSR, где window недоступен, хук использует начальные значения (defaultWidth, defaultHeight). После гидратации размеры обновляются.

import { useState, useEffect } from 'react';

function useWindowSize(defaultWidth = 0, defaultHeight = 0) {
  const [windowSize, setWindowSize] = useState({
    width: defaultWidth,
    height: defaultHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

Хук возвращает объект { width, height } для динамической адаптации UI.

👉 @sWebDev

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

Ты вроде бы уже не джун, но всё равно чувствуешь, что топчешься на месте? Рынок перегрет, требований всё больше, а откликов — всё меньше? На собесах валят на алгоритмах или просят "нарисовать" архитектуру, как будто ты ведущий.

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

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

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

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

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

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

Область видимости в JavaScript

Хотите разобраться, как работают области видимости в JS? В статье простыми словами объясняется, что такое область видимости, как она влияет на доступность переменных и почему const/let отличаются от var. Узнайте про блочную, функциональную и модульную области, лексическую область и замыкания.

👉 @sWebDev

Dark Mode Toggle

Dark Mode Toggle - это удобный способ переключать на темную тему на сайте. Сниппет использует CSS-переменные и локальное хранилище для сохранения выбора темы.

function setupDarkModeToggle() {
  const toggleButton = document.querySelector('#theme-toggle');
  const root = document.documentElement;
  const isDark = localStorage.getItem('theme') === 'dark';

  // Устанавливаем начальную тему
  if (isDark) {
    root.classList.add('dark');
  }

  toggleButton.addEventListener('click', () => {
    root.classList.toggle('dark');
    const newTheme = root.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', newTheme);
  });
}

document.addEventListener('DOMContentLoaded', setupDarkModeToggle);

:root {
  --background: #ffffff;
  --text-color: #333333;
}

.dark {
  --background: #1a1a1a;
  --text-color: #ffffff;
}

body {
  background: var(--background);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

👉 @sWebDev | #полезные_сниппеты

И что делать в такой ситуации?

👍 - Сидеть и упорно делать задачу (до конца рабочего дня)

❤️ - До пятницы далеко, может и подождать

👉 @sWebDev