Андрей Hecc

Нужно сделать отдельный компонент для img, который будет реагировать на загрузку именно этой картинки, а не общего пула из url.
Все точно так же, как у вас сейчас, только нужно чтобы у каждой картинки был свой стейт который будет фиксировать загружена она или нет. А не один общий.

Судя из скриншота в комментариях, автор пытается использовать куки в протоколе file://
Они работают только в протоколах http/https или в хроме со специальным флагом --enable-file-cookies.

Запустите код через локальный сервер и все будет ок

Тут на самом деле все зависит от функционала, который вы хотите реализовать.

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

Т.е структура выглядела бы как-то так:

User {
    _id: ObjectId('...'),
    notes: [
        ObjectId('Note1...'),
        ObjectId('Note2...'),
        ObjectId('Note3...')
    ]
}


Note {
     _id: ObjectId('Note1...'),
     ...,
    labels: [
        ObjectId('Label 1'), 
        ObjectId('Label 2'),
    ]
}


Label {
    _id: ObjectId('Label 1'),
    name: "Label 1"
}

Опять же формально, лейблы можно хранить и прямо в записях, но тогда такая задачка, как фильтрация по какому-то из лейблов становится неоправданно сложнее + сложнее будет держать консистентность данных.

Это называется High Order Function.

Это функция которая возвращает другую функцию как результат или использует ее как свой аргумент.
Если написать не стрелочными функциями, это будет выглядеть вот так:

function removeItem(id){
    return function(e){
        ...
    }
}

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

render = () => {
    const { removeItem, id } = this.props;
    return(
        <button onClick={removeItem(id)}> Remove item </button>
    )
}

Разберитесь вначале, как работает delete.
Он не удаляет объекты, а только их свойства.

Вот это выражение delete sc2; вам возвращает false, что говорит о том, что операция не была выполненна.

Касательно вопроса по памяти, то в JS объекты передаются по ссылке. Если у вас было создано всего два объекта, то памяти выделится ровно так же - на два объекта.
Да и в целом, не стоит сильно заморачиватся с ручным управлением памятью, garbage collector в браузере умеют самостоятельно удалять из памяти то, что браузером не используется.
Само собой, код нужно оптимизировать так, чтобы утечек памяти не было, но это уже немного другая история :)

use strict используют постоянно — если хотите писать хороший, модульный код по современным стандартам.
Но, обычно, делается это не явно, а "под капотом" инструментов которые сегодня уже стали стандартом в индустрии. Сборщики, н-р webpack, автоматически переводят весь код в строгий режим.

Просто почитайте, что он делает и сразу станет понятно, нужен он или нет.

Мы используем вот такой подход. Покажу на примере action из redux, но его можно использовать и с компонентами.
Создаеться файл index.js в директории с shared компонентами. Из него экспортируются все именные экспорты из файлов в этой папке вот таким образом:

Файл index.js:

export * from './auth';
export * from './user';
export * from './interfaces';
export * from './search';
export * from './catalog';
export * from './classifier';

Файл auth.js:

export const getUserToken = ( login, password ) => (dispatch, getState) => {...}
export const registerUser = ( newUserData ) => ( dispatch, getState ) => {...}

Таким образом, потом в любом месте, где нам необходимо что-то из этих файлов получить -- мы имеем одну точку входа через которую можем получить переменные сразу из нескольких файлов:

import { getUserToken, doSmsng, doSmsngElse } from '../../../_actions';

Если news будет не undefined/null , то будет отрисованая вторая часть выражения.
Conditional Rendering
React Conditional Rendering
Это достаточно распостранненый паттерн, который используют когда есть одно условие на основе которого нужно отрисовать какой-то блок.
Первую часть можно заменить на любое другое выражение:
news.length !== 0 && <List />

Что бы не делать вот так:

{
news ? <List data={news} /> : null
}

Упрощают до
news && <List data={news} />

Есть различные сервисы для логирования ошибок.
Один из самых простых к установке это https://sentry.io/. Есть нелохой бесплатный тариф - на 5000 логов в месяц. Все что выше этой квоты - платно.

Он логирует все ошибки, включая даже те, что возникают у клиента - например используюя расширение какого-то гугл переводчика.
Как пример, например ошибка что у юзера истек токен и его выкинуло из кабинета:


В целом шутка удобная, но в интернете есть инфа что может влиять на произовдительность сайта\приложения.
Мы его юзаем в CRM написаной на реакте и у нас все в целом летает (первая отрисовка с отключенным кешем):

Можно использовать то, что называется High Order Function выглядит это примерно так:

Если использовать ES6:

const EventHandler = ( param ) => ( event ) => {
    // Есть доступ и к объекту event и к param
    // Do Smsng
}

btn.addEventListener('click', EventHandler( true ) );

Или используя более старый синтаксис:

const EventHandlerOld = function( param ){
    return function( event ){
      // Есть доступ и к обьекту event и к param
      // Do Smsng
    }
}
btn.addEventListener('click', EventHandlerOld( true ) );

Вызывая верхнюю функцию вы передаете туда нужный вам параметр и возвращаете назад в обработчик функцию, в которую придет объект события. Тем самым, в теле функции используя замыкания, имеете доступ к двум переменным.

OwlCarousel так умеет.

https://greensock.com/

c = a+b, 
c.toFixed(1);

num.toFixed(precision)