Александр

Допустим у Вас есть компонент, который при появлении на странице (монтировании) добавляет глобальную прослушку события, например - mousemove. Приложение работает, всё хорошо, но потом, по некоторой причине, происходит размонтирование и через некоторое время снова монтирование. В таком случае, если не удалить прослушку, будет уже 2 события, что и является утечкой памяти.
Также происходит таймерами и интервалами, поэтому надо отменять их при размонтировании.
Как пример, советую посмотреть это видео.

Используйте cmd.

Если среда исполнения браузер, то <script src="" type="module"></script>. Если среда исполнения node, то в package.json "type": "module".

<div class="container">
  <div class="image" id="image_1">
    <img src="img/1.jpg" alt="1" />
    <button class="delete-button">&times;</button>
  </div>
  <div class="image" id="image_2">
    <img src="img/2.jpg" alt="2" />
    <button class="delete-button">&times;</button>
  </div>
  <div class="image" id="image_3">
    <img src="img/3.jpg" alt="3" />
    <button class="delete-button">&times;</button>
  </div>
  <div class="image" id="image_4">
    <img src="img/4.jpg" alt="4" />
    <button class="delete-button">&times;</button>
  </div>
</div>

const buttons = document.quertSelectorAll('.delete-button');

const removeBlock = (target, selector) => {
	const element = target.closest(selector);

	if (element !== null) {
		if (element.id !== '') {
			const deletedElements = JSON.parse(localStorage.getItem('deleted-elements')) || [];
			deletedElements.push(element.id);
			localStorage.setItem('deleted-elements', JSON.stringify(deletedElements));
		}

		element.remove();
	}
}

for (const button of buttons) {
	button.addEventListener('click', event => {
		event.preventDefault();
		removeBlock(event.currentTarget, '.image');
	});
}

window.addEventListener('DOMContentLoaded', () => {
	const deletedElements = JSON.parse(localStorage.getItem('deleted-elements')) || [];

	for (const deletedElement of deletedElements) {
		const element = document.quertSelector(`#${deletedElement}`);
		if (element !== null) {
			element.remove();
		}
	}
});

const expression = /{{\s+?(\w+)\s+?}}/g;

const pasteParams = (string, params) => {
  return string.replace(expression, (match, key) => key in params
    ? params[key]
    : key
  );
};

pasteParams('<ul class="{{ className }}"></ul>', {
  className: 'my-class'
});

- const changePage = (page) => {
+ const changePage = (event, page) => {
    dispatch(fetchArticles(page));
};

API

const expression = /.+(?=\/)/;
const array = [
  '/siparis/kampanyalar/tumu/cok-karisik-orta-firsati',
  '/siparis/kampanyalar/tumu/karisik-ort',
  '/siparis'
];

for (const entry of array) {
  const match = entry.match(expression);
  const parsed = match !== null ? match[0] : null;
  
  console.log(parsed);
}
/*
'/siparis/kampanyalar/tumu'
'/siparis/kampanyalar/tumu'
null
*/

Ну как бы, тут не косяк бота, и не косяк языка. Так разработан стандарт JSON. Вы можете применить форматирование к файлу JSON.stringify(data, null, 4) (где 4 - количество пробелов в уровне табуляции). Можете использовать другой формат данных, например - CSV. Можете подключить базу данных, какой-нибудь SQLite. Конечно, Вы можете написать свой велосипед:

const toJSON = data => {
  if (Array.isArray(data)) {
    const prepared = data.map(value => JSON.stringify(value));
    return `[\n${prepared.join(',\n')}\n]`;
  } else {
    const prepared = Object.entries(data).map(([key, value]) => (
      `${JSON.stringify(key)}: ${JSON.stringify(value)}`
    ));
    return `{\n${prepared.join(',\n')}\n}`;
  }
};

Вариант 1:

const navigation = document.querySelector('.header__navigation');

navigation.addEventListener('click', (event) => {
    const activeElements = navigation.querySelectorAll('.active');
    for (const activeElement of activeElements) {
        activeElement.classList.remove('active');
    }

    event.target.classList.add('active');
});

Вариант 2:

const navigation = document.querySelector('.header__navigation');
const items = navigation.querySelectorAll('YOUR_SELECTOR'); // Элементы, у которых должен быть класс active

for (const item of items) {
    item.addEventListener('click', () => {
        for (const item of items) {
            item.classList.remove('active');
        }

        item.classList.add('active');
    });
}

const Button = ({ children, callback, ...props }) => {
    return <MainButton {...props} onPress={callback}>{children}</MainButton>;
};

Добавьте grid-template-rows: 1fr;

UPD:
grid masonry (работает только в Firefox под флагом); статьи: 1, 2; примеры: 1, 2.

Код выглядит так, как будто должны было быть так:

<>
	{cart.map(item => (
		<div className="catalog-mobile__counter" key={item.product._id}>
			<button className="catalog-mobile__minus"></button>
			<input type="text" defaultValue={item.quantity || ''} />
			<button className="catalog-mobile__plus"></button>
		</div>
	))}
</>

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

node.isConnected