Антон Спирин

В видео наверняка говорилось про асинхронные функции. Посмотрите так:

for (var iIi = 0; iIi < 3; iIi++) {
  setTimeout(() => console.log(iIi), 0);
}
for (let jJj = 0; jJj < 3; jJj++) {
  setTimeout(() => console.log(jJj), 0);
}

при таком объявлении, `var` всплывет вверх, то есть он будет доступен вне цикла, а `let` только внутри цикла

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Тут много задач на разные сложности https://leetcode.com/ Это если чисто алгоритмические задачи. А так, на https://learn.javascript.ru есть задачки к каждой главе, тоже полезно порешать.
Еще мне нравится вот этот раздел https://leetcode.com/explore/interview/card/top-in... тут список вопросов по разным темам, которые задают на собеседовании. Но нельзя просто в лоб это решать, нужно иметь алгоритмическую базу.

Хранить всё в одном глобальном состоянии это одна из хороших практик при использовании Redux в разработке

Кто вам такое сказал?

для поддержки и расширения удобно инкапсулировать состояние компонента внутри него.

Это правда

ничто не мешает хранить состояние в общем сторе

Чувствуете разницу между "для поддержки и расширения удобно" и "ничего не мешает"?
"Ничего не мешает" вам писать как угодно - но какая в этом будет польза?

ценой за инкапсуляцию мы превращаем компонент в чёрный ящик

Да. и это хорошо

Самолет, поезд, автомобиль, автобус, пешком. С таким багажом знаний вы никому за границей не нужны - нанимают с переездом людей только с высокой квалификацией, а для переезда в ряд стран так вообще требуется не просто диплом, а вполне определенный диплом (читать в правилах получении визы)

Можно. Любой подход который приводит к чистому и хорошо поддерживаемому коду - хорош. Вариантов как это сделать много, само по себе смешивание ооп и функциональщины к плохому коде не приводит.

Другой вопрос - зачем вам нужно делать именно так как вы написали. Если у вас есть ответ на него - без проблем.

Если у вас медленно грузится система - грузите ее реже. У меня вот рабочий комп только на обновлениях и ребутится....

В рендер функции нельзя менять стейт. Это аксиома, надо запомнить.

P.S. Можешь обойтись без биндингов.

class App extends React.Component {

    constructor() {
        super();
        this.state = {
          prop: 1,
        }
    }

    stateChange = () => {
        this.setState({
          prop: this.state.prop + 1,
        });
    }

    render = () => {
        return <div>
            <p>{this.state.prop}</p>
            <input type="button" value="Обновить" onClick={() => {this.stateChange()}}/>
        </div>;
    }

}

ReactDOM.render(<App/>, document.getElementById('body'));

incProp = () => {
  this.setState(state => ({
    prop: state.prop + 1,
  }));
};

render() {
  return <button onClick={this.incProp}>...</button>;
}

.todo-list-item.done {
 text-decoration: line-through;
}

и еще есть смысл написать так:

state = {
        done: false,
    };
    
    onLabelClick = () => {
        this.setState({
            done: true
        });
    };

    render() {
        return (
            <div className={'todo-list-item' + (this.state.done ? ' done' : '')} onClick={this.onLabelClick}>text</div>
        );
    }

1. Рекомендую перенести ОС на SSD, поверь, это ОЧЕНЬ ускорит работу системы.
2. Перенос файла подкачки на SSD так же ускорит работу системы при загруженной оперативной памяти, т.к. в этом случае идет много обращений к диску и обычный HDD в этом плане гораздо медленнее.
3. На современных SSD стоят контроллеры которые равномерно распределяют нагрузку записываемых данных, не приводя к избыточному износу определенных областей. Такое было когда SSD только начали появляться. К тому же на современных SSD ресурс чтения\записи настолько велик, что достичь его довольно сложно, даже если крутить ПК 24/7

const SuperLink = (props) => <NavLink activeClass="active" activeStyle={{fontWeight: "bold"}} to={props.to}>{props.text}</NavLink>

....

<SuperLink to="/stats" text="Stats"/>

Нумерация версий ПО: https://ru.wikipedia.org/wiki/%D0%9D%D1%83%D0%BC%D...