Антон Спирин

Вариант 1:

const CTX = React.createContext();

const App = () => (
  <CTX.Provider value={ctx}>
    <MyComponent />
  </CTX.Provider>
);

Но этот вариант не будет удобен если вы собираетесь тестировать компоненты использующие контекст.

Вариант 2:

const CTX = React.createContext(ctx);

const App = () => (
  <MyComponent />
);

Но этот вариант не будет удобен когда надо изменять значение контекста.

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

Ошибка линтера, так ка активно правило react-hooks/exhaustive-deps
1. Вам следует использовать useEffect, вместо useMemo.
2. Если вы используете react router, то объект match меняется при обновлении history, даже при передаче тех же параметров и правильно передавать сами параметры. Например:

useEffect(() => {
  doSomething();
}, [match.params.id]);

onMouseLeave делаем this.timeout = setTimeout(callback, duration);
onMouseEnter делаем clearTimeout(this.timeout);

Редирект:

<Redirect
  to={{
    pathname: '/login',
    state: { referrer: props.history.location.pathname }, // или `/products/${slug}`
  }}
/>

Логин:

class Login extends React.Component {
  onLoginSuccess() {
    const { history } = this.props;
    const { state } = history.location;
    const location = (state && state.referrer) || '/';

    history.push(location);
  }

  /* ... *.
}

Помимо ссылки на прошлую страницу в state можно писать ее скролл и по возвращению восстанавливать и его.

Поскольку Header не участвует в роутинке я не могу от него передать в Search props.history и уже на нем вызвать пуш а не как сейчас на прямую!

Header является дочерним компонентом компонента Router это значит, что вы можете использовать HOC withRouter, который будет передавать в ваш компонент history, location и match.
export default withRouter(Header);

Способы позволяющие избавиться от ненужных перерисовок:
1. В классовом компоненте можно реализовать метод shouldComponentUpdate
2. Можно использовать PureComponent
3. Можно обернуть компонент в вызов connect
4. Функциональный компонент можно обернуть в вызов React.memo

dispatch ваша функция плучает от redux-thunk. Тут.

Пример использования useDispatch:

const Foo = ({ data }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(func(data));
  }, [data]);
  
  return (/* ... */);
}

Выпиливайте react-private-route. Эта библиотека использует предыдущую версию react-router.
Нужный вам компонент можно реализовать так:

const PrivateRoute = ({ component: Component, render, isSignedIn, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      if (!isSignedIn) return (
        <Redirect
          to={{
            pathname: '/login',
            state: { referrer: props.history.location.pathname },
          }}
        />
      );

      if (render) return render({ ...props });

      return <Component {...props} />;
    }}
  />
);

Если используете Redux, то можно добавить обертку:

const mapStateToProps = (state) => ({
  isSignedIn: isSignedInSelector(state),
});

export default connect(mapStateToProps)(PrivateRoute);

и не передавать isSignedIn хардкодом. Так же для этой цели можно использовать контекст.

Это так и работает. Отправляйте письмо себе на ящик вроде no-reply@mysite.com с темой "Обращение", в теле письма уже указывайте всю необходимую вам информацию о человеке заполнившем форму.

<h1 className={`class_${url}`}>Hello, world!</h1>

<h1 className={'class_' + url}>Hello, world!</h1>

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

2. Тут все зависит от ряда обстоятельств. Если вам нечего делать, то можете попробовать написать бенчмарки для разных кейсов. Для рендера списка из 1000 простых элементов даже не получится зафиксировать точную разницу, так как таймеры работают с небольшой погрешностью, а счет тут идет на тысячные секунды и их доли.

3. Даже если вы будете использовать useCallback функция все равно будет пересоздаваться каждый рендер, более того при использовании useCallback будет еще несколько дополнительных внутренних вызовов. Но пример из пункта 1, если Button является функциональным компонентом то, это как раз тот случай когда useCallback, вроде бы, надо использовать, так как он предотвращает вызов теоретически более дорогой операции - перерисовки Button.

.disabled {
  opacity: 0.8;
  pointer-events: none;
  user-select: none;
}

C помощью класса можно сделать неактивным любой элемент, например, стилизованные под кнопки ссылки.

Оператор запятая выполняет каждый из его операндов (слева направо) и возвращает значение последнего операнда.
В вашем случае последним операндом является a.

Ваш код можно переписать так:

arr.reduce((a, c, i) => {
  if (c == arr[i - 1]) {
    a[a.length - 1] += c;
  } else {
    a.push(c);
  } 
  return  a;
}, []);

Все это можно обрабатывать в корневом компоненте.

с чем это связано

с тем же с чем и:

let s: string;

s = 182;

Исправить можно, например, так:

const [prod, setProd] = useState<FakeProductList | null>(null);

if (!prod) {

}

return (/* ... */);

Обратите внимание, что интерфейсы принято называть с большой буквы, а слово fake, пишется с буквой k.
Атрибут readonly - лишнее.

const a = tns.map(el => el.type);

По вашему коду:
1. Условие tns[i] == !undefined возвращает false
2. Выражение [i]['type'] возвращает undefined.