Александр

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

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

API

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

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

<>
	{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>
	))}
</>

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

Вариант 1 - нажмите, чтобы запустить.
Прогресс на CSS, обновление на JS.

Вариант 2 - нажмите, чтобы запустить.
Всё на JS.

В React, надеюсь, обернете сами.

Не получается воспроизвести Вашу проблему. https://codesandbox.io/s/qna-q936059-uonwv

https://codesandbox.io/s/qna-q933195-4u1sm

const handle = el => {
	setItems(items => items.map(item => item === el
		? {
			...item,
			show: !item.show
		}
		: item
	));
};

Для начала так:

function Popup(props) {
-  <img onClick={props.close} />
+  <img onClick={() => props.close('передали')} />
}

Во-первых, все это добро в render.
Во-вторых, onClick={() => yourHandler(yourArgs)}. Но видимо Вы работаете с классовым компонентом, поэтому yourHandler делайте методом класса.

const [selected, setSelected] = useState([]);

const toggleSelected = (option, checked) => {
    if (multiSelection) {
        setSelected(selected => checked
            ? [...selected, option.key]
            : selected.filter(entry => entry !== option.key)
        );
    } else {
        setSelected(checked
            ? [option.key]
            : []
        );
    }
};

Считаю, что отмеченные элементы лучше не объектами хранить, а строками .Также переменные у Вас названы были наоборот, это вводило небольшую путаницу - toggleSelected не имело логики переключения, хотя по наименованию - должна была бы. То же самое было с setSelected. Демка.
Кстати, думаю можно задуматься об UX'е, т. к. если можно выбрать только 1 checkbox, тогда может делать radio? Если так, можно будет убрать эту логику.

const download = (name, blob) => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');

    link.setAttribute('href', url);
    link.setAttribute('download', name);
    link.addEventListener('click', () => {
        setTimeout(() => {
            URL.revokeObjectURL(url);
        });
    });

    link.click();
};

case ADD_CATEGORY:
    addCategory(
-       state,
+       newState,
        action.category
    );
    break;

И в других подобных местах тоже. Кстати, копировать можно и так let newState = { ...state };.

А хоть какой-то код имеется? Без кода как пальцем в небо тыкать. Но, можете использовать нечто такое.

<form action="some_url" method="POST">
	<input type="text" name="username">
	<button>Submit</button>
</form>

const form = document.querySelector('form');
const users = ['John', 'Emily', 'Bruce', 'Alice'];

form.addEventListener('submit', event => {
	const input = form.querySelector('input[type="username"]');
	const index = users.indexOf(input.value);

	if (index === -1) {
		event.preventDefault();
	} else {
		input.value = index;
	}
});

UPD: Пример на React.