Оптимизация событий с помощью debounce

Иногда функция вызывается слишком часто — например, при вводе в поисковую строку или скролле страницы. Это перегружает приложение.

useDebounce в React помогает запускать действие только после того, как пользователь перестал что-то делать.

import { useEffect, useState } from "react";

function useDebounce<T>(value: T, delay: number) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);

  return debounced;
}

Пример:

const [query, setQuery] = useState("");
const debouncedQuery = useDebounce(query, 500);

useEffect(() => {
  if (debouncedQuery) {
    fetch(`/api/search?q=${debouncedQuery}`);
  }
}, [debouncedQuery]);

Теперь запрос отправляется только через 500 мс после остановки ввода, а не при каждом нажатии клавиши.

👉 @sWebDev

На чьей вы стороне?

❤️ - фронтед.

👍 - бэкенд.

👉 @sWebDev | #юмор

👉 @sWebDev

Tabulator

Библиотека, которая превращает HTML-таблицы или данные из JavaScript в интерактивные, полнофункциональные виджеты с огромным количеством функций. Философия — "простота настройки, мощь под капотом".

👉 @sWebDev

JavaScript для профессиональных веб-разработчиков

Автор доступно объясняет сложные концепции языка, включая замыкания, асинхронное программирование, работу с DOM и современные стандарты ECMAScript.
Книга сочетает теорию с практическими примерами, что делает её полезной как для начинающих, так и для опытных программистов. Обновлённое издание охватывает последние тренды веб-разработки.

👉 @sWebDev | #книги

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

Что будет, если не передать defaultWidth и defaultHeight в useWindowSize?

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

👉 @sWebDev

Анимации с Framer Motion

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

import { motion } from 'framer-motion';

const Button: React.FC = () => {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }} // Анимация при наведении курсора
      whileTap={{ scale: 0.9 }} // Анимация при клике
      initial={{ opacity: 0 }} // Начальное состояние
      animate={{ opacity: 1 }} // Конечное состояние
      transition={{ duration: 0.3 }} // Длительность
    >
      Нажми меня
    </motion.button>
  );
};

export default Button;

👉 @sWebDev

Примеры использования JS Fetch

Статья на Snipp.ru объясняет, как использовать fetch() в JavaScript для отправки HTTP-запросов и получения данных. Рассматриваются GET, POST и другие методы, обработка ошибок, работа с JSON и заголовками.

Пример отправки POST-запроса с JSON из статьи:

fetch('https://example.com/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Ошибка:', error));

👉 @sWebDev

React Error Boundary

Error Boundary изолирует ошибки в компонентах (например, при сбоях в сторонних библиотеках или API), чтобы приложение оставалось стабильным. Это особенно актуально для крупных проектов, где ошибка в одном компоненте не должна ломать весь UI.

import { Component } from 'react';

class ErrorBoundary extends Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, info) {
    console.error('Error:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <div>Error: {this.state.error.message}</div>;
    }
    return this.props.children;
  }
}

// Использование
const App = () => (
  <ErrorBoundary>
    <FaultyComponent />
  </ErrorBoundary>
);

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

IT схлопнулось, а половина вакансий — откровенный скам? Знакомо. Больно. Проходили.
Если хочешь фильтр по реальным предложениям — тебе к нам.

В нашем канале:
• только проверенные вакансии каждый день;
• надёжные работодатели и крупные компании;
• зарплаты по рынку и выше;
• ДМС и полный набор соцплюшек для твоего комфорта;
• адекватные HR-ы;
• никаких монструозных тестовых заданий;
• поддержка в поиске работы — и для джунов, и для опытных разработчиков.

Найдём работу, которая действительно стоит твоих навыков.

Подписывайся 👉 Твой Оффер | Работа в IT

JavaScript. Рецепты для разработчиков

Книга «JavaScript. Рецепты для разработчиков» Шелли Пауэрс, представляет собой практическое руководство для программистов, желающих углубить свои знания в JavaScript. Автор предлагает множество готовых решений и «рецептов» для типичных задач веб-разработки, таких как работа с DOM, асинхронное программирование, обработка событий и создание интерактивных интерфейсов. Книга отличается ясным стилем, примерами кода и акцентом на современные стандарты JavaScript, что делает её полезным ресурсом как для начинающих, так и для опытных разработчиков.

👉 @sWebDev | #книги

👉 @sWebDev | #книги

Айти “умирает”, вакансий нет, все говорят про кризис?
В канале “Frontend менторинг | Косилов” разбираю, что реально происходит на рынке и как всё-таки находить офферы.

Там: честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, без инфоцыганства и розовых обещаний. Я действующий фронтенд-разработчик и ментор, показываю, как адаптироваться к рынку, а не ждать “когда всё наладится”.

Для тех, кто придёт отсюда, — скидка 30% на менторство и разборы по промокоду Kosilov2026.

Отложенный вызов

Вопрос:
Что произойдёт, если передать null в качестве задержки в useTimeout?

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

👉 @sWebDev

Точка синхронизации технологий и тех, кто их использует

T-Sync Conf — офлайн-конференция от Группы «Т-Технологии» для опытных инженеров. 7 февраля в Москве на площадке TAU соберутся платформенные, security и дата-инженеры, аналитики, DevOps, SRE, CI/CD, AI-, ML-, R&D- и DX -специалисты.

Это новый формат инженерного диалога:
— Контуры — тематические зоны, каждая из которых раскрывает отдельный слой инженерной реальности: AI, Data, R&D, Security, Platform и другие направления.
— Вместо классических докладов — круглые столы, стенды, хакатон, воркшопы и мастер-классы.
— Инженерные решения изнутри — возможность посмотреть, как устроены технологии в Т-Банке и других компаниях, и пообщаться напрямую с теми, кто их создает.

А еще много практики, интересных знакомств и живых систем.

Успейте подать заявку

В канале “Frontend менторинг | Косилов” вы можете найти честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, обзор технологий и мысли по этому поводу.

Так же публикует в Инсте смешные ролики и полезный контент про АйТи.

https://www.instagram.com/kosilllov?igsh=MXN1ZWxvN3JhaW5uMg%3D%3D&utm_source=qr

Всем, кто подпишется и напишет в личку слово js в инстаграме, пришлет список вопросов по JavaScript с собесов + даст краткие ответы/подсказки, как лучше отвечать.

Tabulator

Библиотека, которая превращает HTML-таблицы или данные из JavaScript в интерактивные, полнофункциональные виджеты с огромным количеством функций. Философия — "простота настройки, мощь под капотом".

👉 @sWebDev

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

Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.

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

Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.

Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.

В своем канале:
👉Разбираю самые популярные и каверзные вопросы на собесах
👉Рассказываю как пройти фильтр HR
👉Борюсь с убеждениями, которые мешают развиваться
👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

Регулярно публикую полезные материалы:

▪️60 вопросов, которые точно помогут тебе на собеседовании.
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1
▪️Чек лист проверки своего резюме

Подписывайся, нас уже 4500 🤓: ссылка

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