Alexandroppolus

function shuffle(arr) {
    for (let i = arr.length - 1; i > 0; --i) {
        const pos = Math.floor(Math.random() * (i + 1));
        const t = arr[pos];
        arr[pos] = arr[i];
        arr[i] = t;
    }
    return arr;
}

const newArr = shuffle(imagesData.slice()); // новый перемешанный, imagesData не поменялось
const newArr2 = shuffle(imagesData); // перемешали imagesData, присвоили в newArr2

Исправленный вариант - https://codesandbox.io/s/immutable-breeze-ycwnoy

Почему исходный не работал: в компонент А передавалась функция, которая замыкала count. Компонент по факту монтирования вешал функцию в onclick дива, и больше никак не менял этот див. То есть в обработчике клика навсегда застревала функция, которая была создана на первом рендере Арр и замкнула count===0. При повторном рендере Арр создавались новые функции, но они не применялись.

в новом варианте навтыкал console.log, чтобы было видно, когда и что происходит.

(() => {})(...Array.from({length: 1000000}))

По версии Ильи Кантора, глобальная функция при создании записывает себе лексическим окружением (Scope) глобальный объект, а в момент выполнения обращается к Scope.
globalFunc.[[Scope]] = window;

то есть формально да, это замыкание.

но практического значения это не имеет, потому что глобальная функция с тем же успехом могла не записывать global себе в Scope, и при выполнении обращаться просто к global, который, к тому же, не ликвидируется сборщиком мусора

upd: заметим, что глобальных объектов может быть несколько, например, ифреймы на странице, или контекст в нодовском модуле VM. Тогда замыкание глобальных переменных (как в примере из вопроса) таки имеет смысл.

element.querySelector('.class')

element.querySelectorAll('.class')

f.apply(this);

этот this - тот самый, с которым вызвалась функция testThis.
а она вызвалась без указания this, то есть он там внутри ундефайнед или виндоу, в зависимости от строгости режима.

/^(?!.*blue).*(green|orange)/

сделать phrase абстрактным полем/свойством и переопределять в потомках. Потомок сам может выбрать - сделать поле или свойство.

interface IAnimal {
    name: string;
    say: () => string;
}
abstract class Animal implements IAnimal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    say() {
        return `${this.name} says ${this.phrase}`;
    }

    protected abstract phrase: string;
}

class Cat extends Animal {
    protected get phrase() { return 'm'; }
}

const c = new Cat('q');
console.log(c.say());

const bounds: TRange = [32400, 54000];

    //   getSpaceRanges(bounds, [
    //     [35000, 37000],
    //     [36000, 54000],
    //   ])

у тебя на первой итерации срабатывает условие (intersectionStart > lastBoundsBlockStart && intersectionEnd < lastBoundsBlockEnd), с разрезанием и добавлением блока [37000, 54000]

на второй итерации этот новый блок накрывается вырезкой [36000, 54000], т.е. срабатывает первый if, как следствие, correctBounds = [];, оно и возвращается. Замени correctBounds = []; на correctBounds.pop(), должно отпустить.

Использовать React.memo для MyItem

export default const MyItem = React.memo(({ item, setNewItemData }) => {
   ....
});

в компоненте Test функцию setNewItemData обернуть в useCallback, чтобы она была постоянной. Для этого внутри неё использовать setItems с передачей в него функции, чтобы setNewItemData не зависело от items

let [items, setItems] = useState(myData);

    const setNewItemData = useCallback((itemId, data) => {
        setItems((items) => {
            return items.map(item => {
                if (item.id !== itemId) {
                    return item;
                }
    
                return {...item, data}
            });
        });
    }, [setItems]);

const [search,setSearch] = useState(null);

поменяй стартовое значение
const [search,setSearch] = useState('');

а то до замены этого стейта, в фильтре тасков делается task.includes(null) и возвращает false, потому что в этой функции аргумент приводится к строке, null превращается в 'null'

Неправильная. Прототипы любых стандартных или встроенных объектов - это глобальная область, такая же как например window. Добавлять в глобальную область что-то своё (кроме полифилов) плохо, думаю ты знаешь почему.

Обрабатывай на общем паренте, а действие применяй на обоих канвасах