Durin Qurkingo

yarn upgrade --latest

Где то читал статью. И на сколько помню и сам понимаю, global state hooks, это так побаловаться, так как получается не оптимизированная штука, которая будет приводить к очень многим перерендерам. Не разбирался конкретно в этом вопросе, но так думаю) зачем изобретать велосипед, если он давно изобретён)
P.S. Кто то из коллег мне говорил недавно, что Mobx будет получше Redux, но это так, непроверенная мною информация)
Если найду ту статью, то скину сюда, там описаны все минусы варианта стора через хуки

Пример:

interface Props {
  someProp: string;
}

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

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

попробуй

<input directory="" webkitdirectory="" type="file" />

https://github.com/facebook/react/issues/3468#issu...

Вы должны использовать флаги состояния в редьюсере и промежуточное ПО воде redux-thunk.
Посмотрите пример реализации асинхронного действия и редьюсера.
В итоге ваш компонент:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Preloader, Product } from './compnents';
import { fetchProductBySlug } from './actions';

const Example = ({ slug }) => {
  const dispatch = useDispatch();

  const { product, isFetching } = useSelector(state => ({
    product: state.product,
    isFetching: state.isFetching,
  }));

  useEffect(() => {
    dispatch(fetchProductBySlug(slug));
  }, []);

  if (isFetching) return <Preloader />;
  
  return <Product product={product} />;
};

export default Example;

Так же почитайте про селекторы и reselect. Ну и посмотрите туториалы по redux-thunk.

Например:

<Route path="/(A|B|C|D)/xx/xxx/:feeros" component={About} />

На самом деле, можно абстрагироваться и от конкретных значений.

Принцип:

const Example = () => (
  <div className="form-control">
    <input type="text" name="email" value={email} onChange={handleChange} />
    {isEmailInUse && (
      <div className="error">
        Email address is in use, please select another or <Link to='/signin'>Sign in</Link>
      </div>
    )}
  </div>
);

Можешь глянуть тут. Камнями сильно не кидать, я вообще не фронтенд-разработчик))

А вообще вот тут про Redux-хуки много написано, причем с примерами.

yarn add react-redux express typescript

Пожалуй так всех короче

Virtual DOM React не имеет никакого отношения к DocumentFragment. Отсюда назревает ответ на ваш вопрос, что реализация отличается всем.

Он использует эффективные алгоритмы сравнения для обновления изменений вперед и назад и других случаев использования.

Virtual DOM это лишь упрошенная модель DOM-древа, никаких алгоритмов Virtual DOM не использует, это делает ReactDOM при сверке древа. Никаких вставок Virtual DOM в реальный DOM не происходит. Хотя бы по причине полной несовместимости.

Если вам действительно интересно как происходит работа с Virtual DOM и сверка в React, то можете прочитать одну из многочисленных статей на эту тему.

useMemo использует поверхностное сравнение зависимостей, так же, каждый render определяется функция колбек, если она прописана в теле компонента.

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

Следует помнить, что в документации есть примечание, что React может забыть ваше значение, поэтому использовать этот хук следует только для меморизации.

Видел примеры кода, когда useMemo использовали и для создания контекста и для обновления состояния. Так делать не следует, так как может произойти потеря созданного таким способом контекста или сброс состояния.