Антон Спирин

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
};

file-loader

Пример использования изображений в коде:

import React from 'react';
import image from './image.png';

const Example = () => (
  <img src={image} />
);

или:

import React from 'react';

const Example = () => (
  <img src={require('./image.png')} />
);

Например так:

import React from 'react';
import data from './products.json';

const List = () => (
  <ul>
    {data.map(product => (
      <li key={product.id}>{product.title}</li>
    )}
  </ul>
);

Списки и ключи

Возможно, проблема с типом контента. В первом случае отправляете "application/x-www-form-urlencoded", во втором "application/json"

module.exports = {
  //...
  devServer: {
    historyApiFallback: true
  }
};

devServer.historyApiFallback

С версии React 15.5 PropTypes вынесены в отдельный пакет.

import React from 'react';
import PropTypes from 'prop-types';

// ...

Slider.propTypes = {
  slidePerView: PropTypes.string,
  slidesPerGroup: PropTypes.string,
  loop: PropTypes.string,
};

// ...

Списки и ключи

Изменение контекста из вложенного компонента

Вариант 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 хардкодом. Так же для этой цели можно использовать контекст.

<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 помощью класса можно сделать неактивным любой элемент, например, стилизованные под кнопки ссылки.