Mikhail Osher

class Rate extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: '',
            currencyRat: {},
        }
        this.currency = ['USD', 'RUB', 'CAD'];
    }
    componentDidMount() {
        this.getRate(); // не в конструкторе надо вызывать, а в componentDidMount
    }
    getRate() {
        fetch('https://api.exchangeratesapi.io/latest')
            .then(data => {
                return data.json(); // забыли вызвать функцию
            })
            .then(data => {
                console.log(data)
                this.setState({ date: data.date })
            })
    }

arr.reduce((acc, cur) => acc + cur.quantity * cur.price, 0)

Бюджет 50к... Macbook Pro 15" Mid 2015 если найдёте в нормальном состоянии. Самая лучшая клавиатура, тачпад пусть и не огромный, как на последних моделях, но хватает.

У самого такой. Ронял его много раз, заливал кофеями/колой. До сих пор всё работает.

https://regex101.com/r/DrokUH/1

^(\w+\s\w+(?:\s\w+)?)\s(\d{2}\.\d{2}\.\d{4})\s(\d+)$

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

"env": {
    "jest": true
}

Или

"env": {
    "jest/globals": true
  }

const months = {
  1: 'Января',
  2: 'Февраля',
  3: 'Марта',
  4: 'Апреля',
  5: 'Мая',
  6: 'Июня',
  7: 'Июля',
  8: 'Августа',
  9: 'Сентября',
  10: 'Октября',
  11: 'Ноября',
  12: 'Декабря',
};

function formatDate(date) {
  const [dd, mm, yyyy] = date.split('.');

  return `${dd} ${months[Number(mm)]} ${yyyy}`;
}

console.log(formatDate('01.06.2020'));

Если файлы всегда будут начинаться с "Data", то можно (Data\S+).

Набросал на коленке: https://codesandbox.io/s/todo-app-13njq?file=/src/...

Ну и основной файл, если лень по ссылке переходить.

import React from "react";

import "./TodoItem.css";

const Mode = {
  VIEW: "VIEW",
  EDIT: "EDIT"
};

export const TodoItem = ({ index, item, updateItem, removeItem }) => {
  const [mode, setMode] = React.useState(Mode.VIEW);
  const [input, setInput] = React.useState(item.text);
  const inputRef = React.useRef();

  React.useEffect(() => {
    if (mode === Mode.EDIT) {
      inputRef.current.focus();
    }
  }, [mode]);

  const handleInput = event => {
    setInput(event.target.value);
  };

  const saveItem = () => {
    updateItem(index, input);
    setMode(Mode.VIEW);
  };

  const handleToggleMode = () => {
    setMode(prevMode => (prevMode === Mode.VIEW ? Mode.EDIT : Mode.VIEW));
  };

  const handleRemove = () => {
    removeItem(index);
  };

  return (
    <div className="todo-item">
      <div className="todo-item__data">
        {mode === Mode.VIEW && (
          <div className="todo-item__value">{item.text}</div>
        )}
        {mode === Mode.EDIT && (
          <div className="todo-item__form">
            <input
              type="text"
              value={input}
              onChange={handleInput}
              ref={inputRef}
            />
            <button type="button" onClick={saveItem}>
              Save
            </button>
          </div>
        )}
      </div>
      <div className="todo-item__meta">
        <div className="todo-item__controls">
          <button type="button" onClick={handleToggleMode}>
            Edit
          </button>
          <button type="button" onClick={handleRemove}>
            Remove
          </button>
        </div>
        <div className="todo-item__time">{item.time.toLocaleString()}</div>
      </div>
    </div>
  );
};

https://webpack.js.org/loaders/url-loader/
url-loader в одиночку лучше не использовать, ибо он в base64 инлайнит всё.
Установите дополнительно file-loader, добавьте в опции url-loader параметр limit: 10000, чтобы ассеты выше 10кб выносились физическими файлами.

Пишут, что connect более производительная штука, а useSelector чаще будет рендирить, так ли это?

Кто это сказал и чем подкрепил эти факты? По мне, звучит как вода.

reselect нужно использовать независимо от того, используются хуки или connect, но только в случаях, когда селектор должен вернуть какие-то computed данные.

Если посмотреть реализацию.

connect везёт вагон кода: mapStateToProps (который имеет несколько вариаций, в зависимости от того, испольуются ownProps или нет), mapDispatchToProps (который создаёт новые функции), mergeProps (надо проверить, передали её или нет), ещё и options поверх этого всего. Возвращает компонент, который делает equalty checks и может что-то ещё. То есть, connect поверх всего вагона кода, дает нам компонент сверху, который везёт в себе логику.

хуки же: useSelector тупо подписывается на store и делает только equality checks, useDispatch вынимает dispatch функцию через Context API и не создаёт никаких новых функций, мы просто испольуем уже готовые actionCreator.