Алексей Абрамов

React.useEffect(() => {
    (async () => {
        try {
            const themes = await fetch("/arr").then((data) => data.json());
            const activeTheme = Math.floor(themes.length / 2);
            const activePlace = Math.floor(themes[activeTheme].subtopics.length / 2);

            setThemes(themes);
            setActiveTheme(activeTheme);
            setActivePlace(activePlace);
        } finally {
            setIsLoad(false);
        }
    })();
}, []);

Можно регулярным выражением убирать маленькую букву «ы» только когда она — последняя в строке:

// сократить актёров
"актёры".replace(/ы$/, "") // актёр

// но сохранить животных
"Животные".replace(/ы$/, "") // Животные

Иконки нужно крутить в обратную сторону с той же скоростью. У каждой иконки, в зависимости от ее начального положения, задать определенный начальный угол поворота. 10 иконок - это с шагом 36 градусов.

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

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

1. Методы constructor, render, и shouldComponentUpdate классового компонента
   
2. Статический метод классового компонента getDerivedStateFromProps
   
3. Тело функционального компонента
   
4. Функции обновления (первый аргумент setState)
   
5. Функции, переданные в useState, useMemo, или useReducer
   

В продакшен сборке будет все ок, можно проверить убрав обертку StrictMode, тогда в теле компонента и в useEffect значение test будет одинаковым и вызываться console.log("component", test); будет только один раз при вводе в инпут.

https://codesandbox.io/s/for-https-qna-habr-com-q-...

Второй вариант возможен только при наличии babel-plugin-transform-class-properties.

Второй вариант мне удобнее, ибо не надо писать конструкторы.
Так же, благодаря этому плагину можно писать функции с сохранением контекста, которые потом передавать дочерним компонентам. Такой способ очень хорош, ибо нам не надо передавать коллбэки в виде () => this.someCallback() - это сохранит эквивалентность props и React не будет лишний раз вызывать render. Например

class MyComponent extends React.Component {
  onBtnClick = (event) => {
    // correct this
  };

  onBtnMouseUp() {
    // invalid this
  }

  render() {
    return <button onClick={this.onBtnClick} onMouseUp={this.onBtnMouseUp}>hello</button>;
  }
}

JS мультипарадигмальный язык. Object.create это, более характерная прототипному программированию, альтернатива оператора new:

const human = {
  planet: 'Earth',
}

const tom = Object.create(human);
tom.name = 'Tom';
tom.age = 32;
tom.country = 'UK';

console.log(tom.planet);

// => Earth

Ключ planet при этом не создается в новом объекте, а берется при вызове tom.planet из прототипа human, пока не будет переназначен в tom.

И если мы изменим прототип human после создания tom, то:

const human = {
  planet: 'Earth',
}

const tom = Object.create(human);
tom.name = 'Tom';
tom.age = 32;
tom.country = 'UK';

human.planet = 'Mars';

console.log(tom.planet);

// => Mars

но если мы переназначим tom.palnet, то:

const human = {
  planet: 'Earth',
}

const tom = Object.create(human);
tom.name = 'Tom';
tom.age = 32;
tom.country = 'UK';

tom.planet = 'Jupiter';
human.planet = 'Mars';

console.log(tom.planet);

// => Jupiter

console.log(human.planet);

// => Mars

$.extend в свою очередь при вызове:

const human = {
  planet: 'Earth',
}

const tom = $.extend({}, human);
tom.name = 'Tom';
tom.age = 32;
tom.country = 'UK';

создаст новый объект tom включающий в себя ключи human без прототипирования.

Надеюсь разница понятна.