Пример:

const ThemeUpdater = () => {
  const { toggleTheme } = useContext(ThemeContext);
  return <button onClick={toggleTheme}>Сменить тему</button>;
};

Таким образом, ререндер затронет только ThemeUpdater, а не всю структуру.

Заключение
Чтобы избежать "ада ререндеров" при использовании контекста в React:

1. Разделяйте данные на несколько контекстов.
2. Используйте useMemo для мемоизации значений.
3. Подключайте контекст только в необходимых местах.
4. Используйте кастомные хуки и мемоизацию для работы с контекстом.

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

🔍 Интересный JavaScript-кейс:

const obj = {
  "1": "a",
  1: "6",
  [1]: "B"
};

console.log(obj["1"]);

💡 CSS-переменные — что это и зачем они нужны?

CSS-переменные (или custom properties) — это мощный инструмент, который позволяет задавать повторно используемые значения прямо в CSS. Они работают как переменные в JavaScript, но предназначены для стилей. 🎨

📌 Как задать CSS-переменную?

:root {
  --main-color: #3498db;
  --padding-size: 16px;
}

Переменные определяются в специальном синтаксисе --имя-переменной и обычно задаются в :root, чтобы они применялись глобально.

📌 Как использовать?

button {
  background-color: var(--main-color);
  padding: var(--padding-size);
}

С помощью функции var() можно подключать переменные в любых свойствах.

📌 Зачем это нужно?

1. 📋 Удобство: Меняете переменную — и обновляете дизайн сразу во всех местах.
2. 🎯 Темизация: Легко переключать темы (светлая/тёмная, брендовые цвета).
3. 🛠 Гибкость: Позволяют динамически изменять стили через JavaScript:

document.documentElement.style.setProperty('--main-color', '#e74c3c');

📌 Поддержка
CSS-переменные поддерживаются всеми современными браузерами (кроме IE 😅). Так что смело используйте!

🔥 Emits в Vue: Как правильно передавать события 🔥

Если вы работаете с компонентами Vue, вы наверняка сталкивались с ситуацией, когда нужно передать событие из дочернего компонента в родительский. Для этого используются emits.

Что такое emits?
emits — это способ декларации событий, которые компонент может отправлять. Это делает ваш код более предсказуемым, типизированным и удобным для отладки.

Пример использования:
Дочерний компонент:

<script setup>
import { defineEmits } from 'vue';

// Декларируем событие "submit"
const emit = defineEmits(['submit']);

function handleSubmit() {
  emit('submit', { message: 'Данные отправлены!' });
}
</script>

<template>
  <button @click="handleSubmit">Отправить</button>
</template>

Родительский компонент:

<script setup>
function onSubmit(payload) {
  console.log(payload.message); // Данные отправлены!
}
</script>

<template>
  <ChildComponent @submit="onSubmit" />
</template>

Почему это важно?
1️⃣ Ясность и предсказуемость: Выявление всех событий в одном месте (через defineEmits) упрощает понимание кода. Вы всегда знаете, какие события ожидаются.

2️⃣ Типизация событий: Если вы используете TypeScript, можно типизировать события:

<script setup lang="ts">
const emit = defineEmits<{
  (event: 'submit', payload: { message: string }): void;
}>();
</script>

3️⃣ Снижение ошибок: Если вы попробуете отправить событие, не описанное в defineEmits, Vue выведет предупреждение в консоль.

📌 Совет: Используйте defineEmits вместе с defineProps, чтобы максимально упростить связь между компонентами.

Валидация на фронте

🚀 Скоро запуск аналитического крипто-проекта!

Готовлю платформу, которая поможет трейдерам получать актуальную информацию о рынке. В группу буду выкладывать детали разработки — проектирование и разработка сайта, ботов для Telegram, а также клиентской и серверной инфраструктуры. Всё это также можно будет смотреть в реальном времени на стримах в Twitch.

Подписывайтесь, чтобы следить за процессом: 👉 www.twitch.tv/m34r7

🔄 Event Loop в JavaScript — как это работает?

JavaScript — однопоточный язык, но при этом он умеет обрабатывать асинхронные задачи. Как? За счёт Event Loop!

🚀 Как это работает?

1️⃣ Call Stack — выполняет код синхронно. Если функция завершилась, удаляем её из стека.

2️⃣ Web APIs — браузер обрабатывает асинхронные задачи (setTimeout, fetch, DOM события).

3️⃣ Queue — готовые к выполнению колбэки и промисы.

4️⃣ Event Loop — проверяет стек и очереди, двигая выполнение вперёд.

🔥 Что важно знать?

• Microtasks (промисы, MutationObserver) выполняются до рендеринга и перед setTimeout.
• setTimeout(0) не выполняется мгновенно — он ждёт очистки стека.
• async/await — это просто сахар над промисами и всё равно попадает в microtask queue.

🔼 Всплытие событий в JavaScript

Когда ты кликаешь по кнопке внутри div, почему срабатывает не только click на кнопке, но и на div? Это всплытие событий (Event Bubbling)!

🔥 Как это работает?
1️⃣ Событие сначала срабатывает на целевом элементе (куда кликнули).
2️⃣ Затем поднимается вверх по DOM-дереву (родитель, потом его родитель и так до document).

📌 Пример:

document.querySelector("div").addEventListener("click", () => {
  console.log("Клик по div!");
});

document.querySelector("button").addEventListener("click", () => {
  console.log("Клик по button!");
});

👉 Клик по button выведет:

Клик по button!
Клик по div!

Так как click сначала отработает на кнопке, а затем поднимется к div.

🛑 Как остановить всплытие?
Если не хочешь, чтобы событие всплывало:

event.stopPropagation();

⚡️ Полезно знать:
✅ stopPropagation() остановит всплытие, но не предотвратит сам обработчик.
✅ stopImmediatePropagation() ещё и заблокирует другие обработчики на этом же элементе.
✅ Всплытие можно использовать, например, для делегирования событий (повесить click на общий контейнер вместо множества кнопок).

🔥 Разница между == и === в JavaScript – почему [] == ![] возвращает true?
Если ты уже немного знаком с JavaScript, то знаешь, что == (нестрогое равенство) и === (строгое равенство) работают по-разному.

👉 === сравнивает значение и тип данных:

0 === "0"; // false, потому что number !== string

👉 == выполняет приведение типов (type coercion):

0 == "0"; // true, потому что строка "0" приводится к числу 0

Но почему [] == ![] → true? Разбираем пошагово:

1️⃣ ![] – пустой массив [] приводится к true, но оператор ! инвертирует его, превращая в false.

console.log(![]); // false

2️⃣ Теперь сравниваем [] == false.

• JavaScript приводит false к 0 (логическое false → числовой 0).
• [] в числовом контексте приводится к "" (пустая строка).
• Пустая строка "" тоже приводится к 0.

Таким образом, [] == "" и "" == 0, а значит:

[] == false // true

📌 Вывод: == может вести себя неожиданно из-за автоматического приведения типов. Чтобы избежать сюрпризов, используй ===, если не хочешь неожиданных багов!

🚀 Hoisting в JavaScript – почему функции можно вызывать до их объявления?

В JavaScript есть интересная особенность – hoisting (поднятие). Благодаря ему мы можем вызывать функции до их объявления:

hello(); // "Привет!"

function hello() {
  console.log("Привет!");
}

Как это работает? Давай разберёмся!

🔍 Что такое hoisting?
Hoisting – это механизм JavaScript, при котором объявления переменных и функций «поднимаются» в начало своего контекста перед выполнением кода.

🔥 Hoisting функций
Функции, объявленные через function, полностью поднимаются, поэтому их можно вызывать до определения:

sayHi(); // "Привет!"

function sayHi() {
  console.log("Привет!");
}

JavaScript сначала «видит» всё объявление функции, поэтому вызов работает.

⚠️ Hoisting var и let/const
Но с переменными всё не так просто:

console.log(name); // undefined
var name = "Alice";

Переменные, объявленные через var, поднимаются, но без значений (они инициализируются undefined).

А вот let и const ведут себя иначе:

console.log(age); // ReferenceError
let age = 25;

Переменные, объявленные через let и const, поднимаются, но остаются в «мертвой зоне» (TDZ) до момента инициализации, поэтому доступ к ним до объявления вызывает ошибку.

⚠️ Hoisting для function expression
Функции, объявленные через const или let, не поднимаются полностью:

greet(); // ❌ TypeError: greet is not a function

const greet = function() {
  console.log("Привет!");
};

Здесь greet ведёт себя как переменная const, а не как function, поэтому в момент вызова она ещё не инициализирована.

📌 Итог
✅ Function Declaration (обычные функции) поднимаются полностью.
⚠️ Function Expression (const func = function() {}) поднимаются как переменные и недоступны до объявления.
⚠️ var поднимается, но остаётся undefined.
❌ let и const поднимаются, но остаются в TDZ и вызывают ошибку при доступе до объявления.

💡 Вывод: Hoisting – мощная особенность JavaScript, но будь внимателен с let, const и function expression, чтобы избежать неожиданных ошибок!

🚀 Разница между function declaration, function expression и arrow function в JavaScript
В JavaScript есть три способа объявления функций, и каждый из них ведёт себя по-разному. Давай разберёмся!

1️⃣ Function Declaration
📌 Объявление функции в коде без присваивания переменной.

function sayHello() {
  console.log("Привет!");
}

✅ Можно вызывать до объявления (hoisting работает).
✅ Имеет собственный this, привязанный к объекту вызова.
✅ Может быть переопределена в коде.

2️⃣ Function Expression
📌 Функция, присвоенная переменной.

const sayHello = function() {
  console.log("Привет!");
};

⚠️ Нельзя вызывать до объявления – вызовет ошибку
✅ Можно передавать как аргумент в другие функции.
✅ Полезна при передаче в обработчики событий.

3️⃣ Arrow Function (=>)
📌 Короткий синтаксис для функций.

const sayHello = () => {
  console.log("Привет!");
};

🔹 Главное отличие – у arrow function нет своего this, она берёт this из внешнего контекста:

const obj = {
  name: "Alice",
  sayHi: function() {
    console.log(this.name); // "Alice"
  },
  sayHiArrow: () => {
    console.log(this.name); // undefined (берёт `this` из глобального контекста)
  }
};

obj.sayHi();
obj.sayHiArrow();

✅ Короткий синтаксис (особенно для однострочных функций).
✅ Не создаёт свой this (удобно в обработчиках событий и методах классов).
❌ Нельзя использовать с new – не имеет prototype.
❌ Нет arguments, вместо него используют ...rest.