Александр

Я так понимаю, вот она, причина, подъехала с версией 18.0.0:

Consistent useEffect timing: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event.

Т.е., жмёте на кнопку, открывается окно, запускается эффект, устанавливается обработчик клика на document, дальше событие клика по кнопке продолжило всплывать и попало в только что установленный обработчик.

При добавлении задержки, данная проблема уходит

Можете ещё попробовать ловить событие в фазе погружения:

document.addEventListener('click', handleOutsideClick, true);
return () => document.removeEventListener('click', handleOutsideClick, true);

Как-то так https://codepen.io/AnnaSummer/pen/wvEJbbq

допустим User это функция-конструктор, или класс.

user = new User()

будет создан объект, у которого есть свойство __proto__ в котором лежит объект, состоящий из одного свойства constructor, которая и есть ваша функция User. (Ну типа такой { constuctor: User }. Если писать через class то мы конструктор явно прям зададим. )
Этот же объект лежит по адресу User.prototype, т.е.
user.__proto__ === User.prototype
Этот объект создается для любой объявленной функции (вообще не обязан, но в V8 вроде так), и например User.prototype.constructor === User

Что такое метод класса, это функция по адресу User.prototype.sayHi (оно же лежит в user.__proto__.sayHi)
Потом, когда мы пишем user.sayHi js проходит по цепочке из свойств __proto__ и ищет там эту функцию, вызывает ее и передает в качестве контекста (this) наш объект user.

А теперь посмотрим разницу с вашим

function User(x,y){
let name = x;
let age = y;

return {
name : name,
age : age,
sayHi: function(){
console.log("My name is " + this.name);
}
}
}

тут все поля и функции лежат в одном объекте, который имеет только дефолтный __proto__ Object.prototype, автоматически присваиваемый при создании объекта через объектный литерал.
При вызове функции несколько раз будут созданы несколько никак не связанных объекта. Прототип у них Object, это единственное что их роднит. Функции будут созданы каждый раз заново.
user1.sayHi !== user2.sayHi
Оператор instanceof не найдет у них общего предка User.

Вот в этом и разница. Можно ли так писать? Можно, только зачем?
Как назвать? Ну допустим функция-фабрика объектов. (не путатьс классом-фабрикой и со статическим фабричным методом, там создаются инстансы классов).

Найдёте теперь сами разницу в ваших примерах 1 и 2?
А так же почему в примере 1 new User() и просто User() дадут совершенно разный результат? И как сделать чтоб было одинаково?

Ошибка в том что columnHeight нужно обновлять по тому же индексу, что и columns.
Ну еще есть проблемы с тем, что исходные данные не упорядочены, а значит массивы будут заполняться не равномерно. Притом сортировать лучше по убыванию.
Так же, если нужен оригинальный порядок, то его нужно сохранить, а потом так же восстанавливать сортировкой.

// Сохраняем исходные индексы и сортируем по высоте по убыванию
const preparedData = data
    .map((e, i) => ({i, e}))
    .sort((a, b) => b.e.height - a.e.height);

for (const el of preparedData) {
    const { height } = el.e;
    // тут никогда не вернет -1, так как мы ищем элемент который точно есть в массиве - минимальный
    const index = columnHeight.indexOf(Math.min(...columnHeight));
    // обновляем данные массивов по выбранному индексу
    columnHeight[index] += height;
    columns[index].push(el);
}

// нормализуем columns
for (let i = 0; i < columns.length; ++i) {
    // восстановим исходный порядок, отсортировав по сохраненному индексу по возрастанию
    columns[i].sort((a, b) => a.i - b.i);
    // избавимся от сохраненных индексов, оставив только исходные объекты
    columns[i] = columns[i].map(({ e }) => e);
}

- if (duplicates.length = 0) {
+ if (duplicates.length === 0) {

Надо явно создать union:

type ITableColumn<
  DataInterface extends object, 
  Keys extends keyof DataInterface = keyof DataInterface
> = {
  [K in Keys]: {
    key: K;
    title: React.ReactNode;
    hasSort?: boolean;
    render?: (item: DataInterface[K]) => React.ReactNode;
  }
}[Keys];

Если в новом объекте должны быть все указанные свойства, вне зависимости от их наличия в исходном объекте:

// имена свойств можно передавать в виде массива
const pick = (obj, keys) => Object.fromEntries(keys.map(n => [ n, obj[n] ]));
const newObj = pick(obj, [ 'b', 'c' ]);

// или как отдельные значения
const pick = (obj, ...keys) => keys.reduce((acc, n) => (acc[n] = obj[n], acc), {});
const newObj = pick(obj, 'b', 'c');

Если отсутствующие свойства не нужны:

const pickExisting = (obj, keys) =>
  Object.fromEntries(keys.filter(n => n in obj).map(n => [ n, obj[n] ]));

Если нужны только собственные свойства:

const pickOwn = (obj, keys) =>
  keys.reduce((acc, n) => (Object.hasOwn(obj, n) && (acc[n] = obj[n]), acc), {});

Если хотим выбирать свойства не только по именам, но и по значениям:

const pick = (obj, filterFn) => Object.fromEntries(Object.entries(obj).filter(filterFn));

const obj1 = pick(obj, ([ k, v ]) => 'abc'.includes(k) && v % 2); // {a: 1, c: 3}
const obj2 = pick(obj, n => n[1] > 2); // {c: 3, d: 5}

.block {
  &__element-2 {}
  &__element-1 {}
  &__element-1:hover &__element-2 {}
}

.block {
  $this: &;
  &__element-2 {}
  &__element-1 {
    &:hover #{$this}__element-2 {}
  }
}

и при повышении вложенности ситуация усугубляется

Не нужно увеличивать вложенность. Это противоречит идеологии БЭМ.

Почитайте про терминирующий слэш в директиве proxy_pass, разберитесь, что он делает.

Если сами добавляете класс, то, очевидно, дёргать метод start в момент добавления. Если не сами, тогда следите за элементом с помощью MutationObserver:

new MutationObserver((mutations, observer) => {
  if (mutations[0].target.classList.contains('интересующий-вас-класс')) {
    observer.disconnect();
    typed.start();
  }
}).observe(элементНаличиеКлассаУКоторогоНадоОтследить, { attributes: true });

Можно так:

let name = 'Alen';
let age = 20;
console.log('Your name: %s, Vozrasr: %d', name, age);

arr.reduce((acc, n) => acc + (n ** 2) * !(n & 1), 0)

Нормаль к плоскости вычисляется как векторное произведение двух векторов, задающих плоскость. Для точек A, B, C можно взять векторы AB и AC.

Ну короче типа внатуре getElementsByClassName возвращает как бы коллекцию элементов, а у коллекции, мамой клянусь, свойства childNodes нет.

По секрету, братиш, вот: document.querySelector('.case-print')

Ну там ещё дальше click работать не будет, но это уж самостоятельно в виде домашнего задания.

function shortNumber(val) {
  const abs = Math.abs(val);
  const prefixIndex = Math.log10(abs) / 3 | 0;
  return (
    (val < 0 ? '-' : '') +
    Math.round(abs / (10 ** (prefixIndex * 3))) +
    'KMGTPEZY'.charAt(~-prefixIndex)
  );
}

shortNumber(99)       // '99'
shortNumber(1945)     // '2K'
shortNumber(-5839465) // '-6M'
shortNumber(7e10)     // '70G'