Mikhail Osher

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

Изменение в хуке = рендер компонента. Если не замемойзить результат, то будет дополнительный вызов рендера.

Логгер должен быть последним в цепочке middleware

В реальности, чаще всего пихают redux.

Использование Context API, по словам архитектора React, чаще всего, необоснованно. https://twitter.com/sebmarkbage/status/12198364319...
https://twitter.com/sebmarkbage/status/12198289982...

В идеале, должна быть композиция, где можно применить render props.
То есть, каждая страница загружается через lazy, и содержит в себе полотно JSX, которое может через render props общаться, и компонент страницы будет хранить большинство стейта.

В целом, никто не запрещает использовать Context для вложенности >=2, однако local state вполне справляется с задачей, если компоненты разбиты нормально.

Оберните ComponentOne в forwardRef.

https://codesandbox.io/s/divine-architecture-9s9x7
https://reactjs.org/docs/forwarding-refs.html