Александр

Второй вариант почти правильный.
1. Событие добавляете внутри useEffect;
2. В deps передаете пустой массив;
3. В рендере можно написать проще, не используя шаблонную строку.

const PageSize = () => {
  const [pageSize, setPageSize] = useState([document.documentElement.scrollWidth, document.documentElement.scrollHeight]);

  const updatePageSize = () => setPageSize([document.documentElement.scrollWidth, document.documentElement.scrollHeight]);

  useEffect(() => {
    window.addEventListener('resize', updatePageSize);

    return () => {
      window.removeEventListener('resize', updatePageSize);
    };
  }, []);

  return (
    <div>
      <p>page width is {pageSize[0]}</p>
      <p>page height is {pageSize[1]}</p>
    </div>
  );
};

Допустим у Вас есть компонент, который при появлении на странице (монтировании) добавляет глобальную прослушку события, например - 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 };.