Mikhail Osher

Зависит от размера проекта и дальнейшей поддержки. Если раз-два-плюнуть, то хоть через `window.ws = new WebSocket()`. Если уже нужно что-то более лаконичное, то я бы постарался максимально изолировать подключение к сокету от компонентов. Сделал бы так, чтобы какой-нибудь контекст прокидывал лишь бизнес-методы компонентам. А саму работу с сокетом делал под капотом, скрывая это от компонентов.

Попробуйте что-то вроде

// props = route props, ref = route ref
const SignupComponent = React.forwardRef((props, ref) => {
  // ... magic ...
  return (
    <form onSubmit={handleSubmit} ref={ref}>
       ...
    </form>
  )
})

Запилите realworld app: https://github.com/gothinkster/realworld
Там и CRUD, и авторизация. Можно адаптивы докрутить итд.

Задержки добавить между нажатиями клавиш. Сейчас это выглядит, будто моментально нажимается.
Средний words per minute = 40, это где-то 200 символов. 60 / 200 = 0.3 секунды на кнопку.
Пробуйте 0.2-0.3 секунды задержку между событиями. Так же, должно список событий на нажатие клавиши должен быть таким:
- keydown
- keypress
- input
- keyup

React Context API

Если без ejecct, то каждому компоненту прописать displayName.

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 })
            })
    }

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

"env": {
    "jest": true
}

Или

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

Набросал на коленке: 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.

Смотрите в сторону react-infinite-scroll.
https://www.npmjs.com/package/react-infinite-scrol...