Антон Спирин

import Profile from "./Profile";

Классовые компоненты никуда не уходят. Для них осталось несколько удобных кейсов. Например:
1. Удобное получение предыдущих значений свойств и состояний в componentDidUpdate.
2. Доступ к экземпляру компонента в хандлерах, передаваемых в браузерные API.
3. Сложные компоненты с большим количеством методов. Например VideoPlayer.

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

Оптимизация это отдельный вопрос, которому стоит посвятить время. Сейчас разве стоит предупредить вас, что преждевременная оптимизация - зло.

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

Вам надо использовать middleware. Например redux-thunk

const action = value => (dispatch, getState) => {
  const otherValue = otherValueSelector(getState());
  
  const payload = calculate(value, otherValue);

  dispatch(otherAction(payload));
};

Можно использовать bindActionCreators или собственную обертку над вызовом store.dispatch и импортировать в модули уже подключенные к store действия.

export const addTrack = (track) => store.dispatch({ type: ADD_TRACK, payload: { track } });

Для асинхронных запросов, можно использовать redux-thunk.

Обычно это делают так:

divs.forEach(function(_, i) {
  console.log(i);
});

Можно еще извратиться так:

divs.forEach(function() {
  console.log(arguments[1]);
});

Но в этом нет особого смысла, так как первый вариант короче и его можно использовать со стрелочными функциями.

<Switch>
  <Route exact path="/services" component={Services} />
  <Route exact path="/login" component={Login} />
  <Route path="/" component={Wrapper} />
</Switch>

NotFound надо перенести в Switch компонента Wrapper.

Смотря что вы собрались туда писать и смотря где эти данные нужны.
Если это данные которые используются только клиентом и сервер их никак не использует, то лучше через document.cookie. Если наоборот, то res.cookie.
Токен и прочие конфидециальные данные для идентификации, по-хорошему, писать в HttpOnly cookie на сервере.

Не создаете экземпляр:
const socket = io('/path');

Вам тут надо использовать не socket.io-client, а socket.io.

Необходимые для инициализации данные можно загружать в async action:

const store = configureStore();

store.dispatch(init());

const App: React.FC = () => (
  <Provider store={store}>
    <Navigation />
  </Provider>
);

Логику можно вынести в собственный хук. Как-то так:

const useFetch = (url, options) => {

  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  const fetchData = async () => {
    try {
      setIsLoading(true);
      const res = await fetch(url, options);
      const json = await res.json();
      setData(json);
      setIsLoading(false);
    } catch (error) {
      setError(error);
      setIsLoading(false);
    }
  };  

  useEffect(() => {
    fetchData();
  });

  return [
    data,
    isLoading,
    error,
    fetchData,
  ];
};

const Example = ({ slug }) => {
  const [ product, isLoading, error, fetchFn ] = useFetch(`/api/product/${slug}`);
  
  if (isLoading) return <Preloader />;

  if (error) return <Error error={error} tryAgainFn={fetchFn} />;

  if (!product) return <NotFound />;
  
  return <Product product={product} />
};

после некоторого времени обнаружил что вебпак изменяет путь
То есть
путь import video from '../../img/video/mainstream.mp4'
он видит как Video /static/media/mainstream.bbae5fec.mp4

Все правильно. Путь меняет соответствующий loader. Если вы загляните в папку с проектом, то можете обнаружить там директорию build. В нее лоадер и копирует ваше видео. Папку build вам и надо хостить статическим сервером.

Deployment

Что касается определения пути к файлу в атрибуте тега, то с webpack это делается так:

<video src={require('../../img/video/mainstream.mp4')} />

Using Ant Design in SASS-styled projects

Современные фреймворки вроде Angular/React/Vue созданы для решения одних и тех же задач. Использовать лучше тот, который больше нравится и который лучше знаете. При неумелом использовании все преимущества конкретного фреймворка меркнут, и на Vue, в таком случае, вы можете получить медленную скорость разработки, а на React неподдеживаемый код.

react-bootstrap
reactstrap

Синтетические события нельзя использовать асинхронно, e.persist() освобождает событие из пула и оно не очищается, поэтому все значения сохраняются на момент выполнения асинхронного вызова.

Ваша задача решалась так:

onChange={(e) => this.limitSwitchHandler(e, row.id)}

В вашем решении правильней назвать хандлер:

createLimitPerDayHandler = (rowId) => (e) => { ... };

так как технически вызов не является хандлером, а возвращает его.

Пример:

interface Props {
  someProp: string;
}

const Herberito: React.FC<Props> = ({ someProp }) => <div>{someProp}</div>;

Если вы не передаете внешние свойства или children, то тип React.FC можно не указывать.

Рассмотрите вариант:

const Header = ({ children }) => (
    <div className="navHeader">
      {children}
    </div>
  );

<Header>
  <Top />
</ Header>

Можно еще решить как-то так:

const Header = ({ top }) => {
  const HeaderTop = top || Top;
  
  return (
    <div className="navHeader">
      <HeaderTop />
    </div>
  );
};

Тогда у вас будет компонент по-умолчанию, а свойство top можно будет использовать только там, где необходимо использовать другой компонент.

<Header /> // используем компонент по-умолчанию Top

<Header top={OtherTopCompnent} /> // используем другой компонент

Суть проблемы в том, что у анонимной функции пустое свойство name.
React использует либо заданное свойство displayName, либо собственное свойство функции name. Ни одно из свойств не найдено и вы видите Unknown
connect в свою очередь, если при создании обертки не находит одно из этих свойств использует слово Component, которое вы и видите в скобках.

По-хорошему, компоненты описывают так:

const MovieList: React.FC<MovieListPropsType> = ({ ... }) => { ... };

const mapStateToProps = createStructuredSelector({ ... });

const mapDispatchToProps = { ... };

export default connect(mapStateToProps, mapDispatchToProps)(MovieList);

P.S. у вас ошибка в слове Desktop.

Посмотрите ответ на ваш прошлый вопрос. Там почти идентичный пример и пошаговая реализация в двух версиях.