- Удалять обработчики событий (removeEventListener).
- Обнулять переменные, если объект больше не нужен.
- Использовать WeakMap/WeakSet для хранения временных ссылок.
- Следить за замыканиями и таймерами.
- Профилировать память в DevTools (вкладка Memory).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍2💊1
Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются
useEffect выполняется после рендера и отрисовки в браузере. useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере. То есть
useLayoutEffect блокирует рендер, а useEffect — нет. useEffect выполняется асинхронно, после того как браузер отрисовал страницу. Используется для:
- Запросов к API.
- Подключения WebSocket'ов или таймеров.
- Логирования данных.
- Изменения заголовка страницы (
document.title). import { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Вы кликнули ${count} раз`;
}, [count]); // Запускается после рендера
return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения. Используется для
- Синхронных манипуляций с DOM.
- Измерения размеров элементов (
getBoundingClientRect). - Анимаций (например, при расчёте позиций).
import { useEffect, useLayoutEffect, useState } from "react";
function Example() {
const [width, setWidth] = useState(0);
useLayoutEffect(() => {
const box = document.getElementById("box");
setWidth(box.offsetWidth);
}, []);
return (
<div>
<div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
<p>Ширина: {width}px</p>
</div>
);
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🤔1
Постоянно получаешь отказы в ответ на отклики?
Не получается пробиться на собеседование и получить оффер?
Рынок найма в IT сейчас перегрет: сотни откликов — ноль ответов, автоотказы, HR, которые просто не видят кандидата. Многие застревают на этом этапе и не понимают, что делать дальше.
Решение — разобраться, как реально работает рынок IT-найма, и выстроить процесс поиска работы системно:
— оптимизировать резюме под алгоритмы поиска;
— разработать стратегию откликов;
— подготовить сильную самопрезентацию;
— научиться проходить каждый этап воронки от отклика до оффера.
Андрей, практикующий Senior Frontend разработчик, посвятил свой канал тому:
— как оптимизировать резюме под поисковые алгоритмы площадок;
— как строить воронку отклик → скрининг → собес → оффер;
— как презентовать свои навыки;
— как сохранить мотивацию, когда сотни откликов уходят в пустоту.
🎁 В закрепе уже доступен бесплатный гайд по трудоустройству для фронтенд-разработчиков.
Если нужны актуальные стратегии трудоустройства в 2025 году и самые рабочие практики — присоединяйся 👉 @RusanovMentor
Не получается пробиться на собеседование и получить оффер?
Рынок найма в IT сейчас перегрет: сотни откликов — ноль ответов, автоотказы, HR, которые просто не видят кандидата. Многие застревают на этом этапе и не понимают, что делать дальше.
Решение — разобраться, как реально работает рынок IT-найма, и выстроить процесс поиска работы системно:
— оптимизировать резюме под алгоритмы поиска;
— разработать стратегию откликов;
— подготовить сильную самопрезентацию;
— научиться проходить каждый этап воронки от отклика до оффера.
Андрей, практикующий Senior Frontend разработчик, посвятил свой канал тому:
— как оптимизировать резюме под поисковые алгоритмы площадок;
— как строить воронку отклик → скрининг → собес → оффер;
— как презентовать свои навыки;
— как сохранить мотивацию, когда сотни откликов уходят в пустоту.
🎁 В закрепе уже доступен бесплатный гайд по трудоустройству для фронтенд-разработчиков.
Если нужны актуальные стратегии трудоустройства в 2025 году и самые рабочие практики — присоединяйся 👉 @RusanovMentor
💊2👍1
- string
- number
- bigint
- boolean
- undefined
- null
- symbol
Они не являются объектами и имеют иммутабельную природу.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥2🤔1
MobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в React. Она основана на реактивности и позволяет автоматически отслеживать изменения данных, обновляя интерфейс только там, где это необходимо.
MobX делает объекты реактивными, автоматически отслеживая их изменения.
import { makeAutoObservable } from "mobx";
class Store {
count = 0;
constructor() {
makeAutoObservable(this); // Автоматически делает свойства "наблюдаемыми"
}
increment() {
this.count++;
}
}
const store = new Store();Это методы, которые изменяют состояние.
store.increment(); // Увеличит count и автоматически обновит UI
Чтобы React-компонент обновлялся при изменении данных, его нужно обернуть в
observer (из mobx-react-lite). import React from "react";
import { observer } from "mobx-react-lite";
const Counter = observer(({ store }) => (
<div>
<p>Счетчик: {store.count}</p>
<button onClick={() => store.increment()}>+</button>
</div>
));
export default Counter;
Это вычисляемые значения, которые пересчитываются только при изменении зависимостей.
class Store {
count = 2;
constructor() {
makeAutoObservable(this);
}
get double() {
return this.count * 2;
}
}
const store = new Store();
console.log(store.double); // 4
store.count = 5;
console.log(store.double); // 10 (пересчиталось автоматически)Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
2. По значению: необходимо пройти по ключам объектов и сравнить их значения вручную или с помощью библиотек, например Lodash.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10