Антон Спирин

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

useCallback предотвращает обновление дочернего компонента, при передаче ему хандлера. Вызов useCallback(fn, deps) эквивалентен useMemo(() => fn, deps). При каждом обновлении родительского компонента без этой обертки возвращалась бы новая ссылка на функцию и инициировала бы обновление дочернего компонента. С useCallback будет возвращаться старая ссылка, пока не изменится хотя бы один из элементов массива deps.

const { param1, param2 } = this.props;

const props = param === 'none' ? {} : { param1, param2 };

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

1. Для инициации перехода на новый роут без перезагрузки страницы, следует вызывать:
this.props.history.push('/user');
2. И справьте первый route на:
<Route exact path="/" component={Form} />
Если используете свойство render(в вашем случае в этом нет смысла), то передавайте аргументом свойства роутера:

<Route exact path="/" render={routeProps => <Form {...rotueProps} />} />

3. Никакой redux-router вам не нужен.
4. Не ленитесь изучать возможности библиотек с которыми работаете. Нативные ссылки не имеют никакого отношения к роутеру вашего приложения. Советую изучить исходный код всех компонентов библиотеки react-router-dom. Так у вас хоть будет понимание того как он работает.
5. Вы закомментили вызов const state = createStore();. Верните обратно.
6. Уберите из проекта JQuery. Для AJAX запросов используйте axios/superagent/fetch.
7. Запросы к API по-хорошему выполнять в redux middleware. Советую использовать redux-thunk

Вы по приходу свойства error обновляете компонент в бесконечном цикле. Сам метод componentWillReceiveProps не рекомендован к использованию.
Не ясно зачем вам писать каждое новое значение свойства в одноименный state, если можно использовать напрямую?
Решение:

static getDerivedStateFromProps(props, state) {
  if (props.message) {
    return { message: props.message };
  }
}

1. Бессмысленно это делать при создании store. Только запутаете код. Делать это стоит в async action. При создании store разве уместно положить инстанс axios дополнительным аргументом в redux-thunk, но только если используете SSR.
2. Так же в async action.

Создайте действие init и проверяйте там наличие токена, и загружайте нужные для инициализации данные:

export function init() {
  return async (dispatch, getState) => {
    const token =  Cookies.get('token');

    if (token) {
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
      await dispatch(fetchUserData());
      // some other code
    } else {
      // else case code
    }
  };
}

Вызывайте init сразу после создания store:

const store = configureStore();
store.dispatch.(init());

const Root = () => (
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>
);

На официальном сайте есть раздел Motivation. Это и есть ответ на ваш вопрос.

почему нельзя просто все стили для блоков компонентов написать в одном файле и просто инлайново в index.html их подключить?

Как минимум, вам чтобы изолировать стили придется использовать BEM, либо подобный велосипед. StyledComponets позволяет вообще не использовать селекторы в исходном коде(имхо - пятое колесо в компонентной архитектуре). Библиотека генерирует изолированные селекторы сама.

StyledComponents - не панацея, лишь один из подходов в решении насущных задач со своими преимуществами и недостатками.

Зачем вам ref каждого элемента списка? Работайте с состоянием. Большинство задач в React-разработке решаются без прямого обращения к DOM-элементам.

Уберите this.init() из render и никогда так не делайте. Почитайте о жизненном цикле компонента.

1. Не ясно зачем вы переместили index.css и index.js в public. Попробуйте почитать про create-react-app - что это, зачем и как работает.
2. Чтобы собрать билд достаточно выполнить в директории проекта:
npm run build
билд будет собран в директории my-app/build

Как преобразовать ее в класс, чтобы добавить state с параметром загрузки, который потом можно было бы получать в других частях приложения?

Срочно изучайте теорию.

Пример решения:

export const getResourcesAction = () => async (dispatch, getState) => {
  const { resources } = getState();
  if (isEmpty(resources)) {
    try {
      dispatch({ type: LOAD_RESOURCES_REQUEST });

      const res = await fetch('/api/resources/all', { credentials: 'include' });
      const data = await res.json();
      dispatch({
        type: LOAD_RESOURCES_SUCCEEDED,
        payload: {
          resources: data,
        },
      });
    } catch (error) {
      dispatch({
        type: LOAD_RESOURCES_FAILED,
        payload: {
          error,
        },
      });
    }
  }
};

const initialState = {
  isFetching: false,
  data: [],
  error: null,
};

export default function resourcesState(state = initialState, action) {
  switch (action.type) {
    case LOAD_RESOURCES_REQUEST:
      return {
        ...state,
        isFetching: true,
        error: null,
      };
    case LOAD_RESOURCES_SUCCEEDED:
      return {
       data: action.payload.resources,
        isFetching: false,
      };
   case LOAD_RESOURCES_FAILED:
      return {
        ...state,
        isFetching: false,
        error: action.payload.error,
      };
    default:
      return state;
  }
}

В state сохранять не надо, достаточно добавить ссылку в свойство класса:

class Parent extends React.Component {
  childRef = React.createRef();

  render() {
    return <Child childRef={this.childRef} />;
  }
}

1. Нет необходимости оборачивать Main в Route. Достаточно:

ReactDOM.render((
  <Provider store={store}>
    <Router>
      <Main />
    </Router>
  </Provider>
), document.getElementById('root'));

2. Проверьте код своего сервера. Скорей всего он отдает страницу с приложением только по корневому пути '/'. Если это так, то замените на '*'.

Как вариант решения, перенести Provider выше по древу:

const ConnectedContainer =  connect(mapStateToProps, mapDispatchToProps)(Container);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedContainer />
  </Provider>,
  document.getElementById("params"),
);

У вас пока не пришел ответ от сервера - нет никаких категорий. Передается undefined.
Одно из многочисленных решений проблемы:

{isFetching ? <Preloader /> : this.renderContent()}

где renderContent метод отрисовывающий зависимый от данных контент вашей страницы.
Вы передаете в компонент Recommended ключ isReady(обратный isFetching), который не используете.
{isReady ? this.renderContent() : <Preloader />}

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

Не ясно почему вы делаете запрос в нерекомендованном к использованию методе componentWillMount, а не используете middleware вроде redux-thunk.

Добавлять ключу элемента списка префикс 'category-key-' - бессмысленно.

Обращения вроде catItem['category_name'] так же выглядят странно.

Код:

const mapDispatchToProps = dispatch => ({
    setProducts: products => dispatch(setProducts(products)),
    setFilter:   filter   => dispatch(setFilter(filter)),
});

можно сократить до:

const mapDispatchToProps = {
  setProducts,
  setFilter,
};

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

ElemInput - бесполезная обертка с понятным только вам интерфейсом, усложняющая код.
Старайтесь так никогда не писать. Если описываете интерфейс, используйте традиционные имена свойств для компонентов(name, onChange etc).
Посмотрите хороший пример по работе с формами из официальной документации.

В документации все это черным по белому написано.

Используйте:
componentDidMount(),
shouldComponentUpdate(),
static getDerivedStateFromProps(),
componentDidUpdate(),
componentWillUnmount()

Не используйте:
componentWillMount(),
componentWillReceiveProps(),
componentWillUpdate()

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