Антон Спирин

По средствам server side redering? Будет ли сайт норм индексироваться(при условии нормальной сео оптимизации description, title и вот это всё)?

Будет.

Используйте state management библиотеку(Redux, MobX, etc) Их для решения подобных проблем и написали.
Еще как вариант прокинуть данные пользователя в контекст. Но лучше прикрутить state management библиотеку.

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

Необходимый функционал:
1. Строка поиска по названию города.
2. Погода в найденном городе.
3. Возможность добавлять город в избранное и удалять. Список таких городов.
4. Показ погоды в локации пользователя если получено разрешение на использование геоданных.

Обязательно использовать React + Redux/MobX. Лучше Redux, так как он больше используется в проектах. Для сохранения пользовательских данных можно использовать localStorage.

Пока у вас нет понимания, какие задачи решают с помощью фреймворков и зачем, о собеседованиях думать еще очень рано.

На каком языке лучше писать серверную часть для real time React app?

На любом.

Что выбрать ?

Что лучше знаете.

Вынесите контекст в отдельный файл.

На github

Например

Вы неправильно используете метод map. Он используется для преобразования данных, но никак не для фильтрации. Для фильтрации используют соответствующий метод filter:

const someCategoryProducts =
  filteredProducts.filter(product => product.category === "Some, category");

return (
  <div>
    <div>{someCategoryProducts.length}</div>
    <div>{someCategoryProducts.map(mapFn)}</div>
  <div>
);

const x = "Categories=All&Search=Filus";

const parseQueryString = str => str.split('&').reduce((acc, el) => {
  const [key, value] = el.split('=');
  acc[key] = value;
  return acc;
}, {});

const params = parseQueryString(x);

console.log(params); // { Categories: "All", Search: "Filus" }

const values = Object.values(params);

console.log(values); // [ "All", "Filus" ]

if (storagePath && location.pathname !== storagePath) {
  return <Redirect to={storagePath} />;
}

return (
  <Switch>
    // routes
  </Switch>
);

Перед переходом на следующую страницу анкеты надо обновлять storagePath, а по завершению заполнения удалять.

1. Невозможно изменить объект, изменяя примитив, который был использован при его создании, так как значение примитива просто копируется.
Демо
Копирование по значению

2. Нельзя изменять объект свойств компонента, только передавать обновленный объект при перерисовке.

В вашем случае проще всего изменять свойство через состояние родителя, передав в компонент колбек на изменение:

<SliderGallery imgLeft={this.state.imgLeft} changeImgLeft={this.changeImgLeft} />

Все, что находится в теле функции Example будет выполняться каждый render. Отличие второго способа лишь в том, что он содержит дополнительные операции. Причем, создание хандлера через билдер, в данном случае, абсолютно бессмысленная операция. Подобные приемы уместны если этот билдер где-то переиспользуется и определен за пределами компонента.
Если хандлер передается в другой React компонент, то имеет смысл использовать хук useCallback. В вашем случае в этом нет смысла, так как хандлер передается в нативный элемент.

Вопрос первый: Как думаете, правильное ли решением будет, если я весь этот код напишу в файле компонента?

Для входа и регистрации у меня целая экосистема. Все работает через Redux.

Лучше сделать по аналогии с остальным кодом.

Какая логика здесь должна быть? Каким-то образом убрать через 4-5 секунд сообщение из state?

setTimeout. Так же, по-хорошему, обрабатывать window.onblur и widow.onfocus. Еще надо очищать таймер в componentWillUnmount.

Сообщение появляется из нижней части страницы, а через пару секунд возвращается туда же (Исчезает).

transform, opacity, transition, @keyframes

Замыкания. Возврат функции

const articleElements = articles.map(article => (
  <li key={article.id}><Article article={article} /></li>
));

Universal Module Definition

О модулях, форматах, загрузчиках и сборщиках

localStorage

Простой пример с запросом:

export function* fetchPostBySlugSaga({ payload: { slug } }) {
  try {
    const data = yield call(Api.fetchPostBySlug, slug);
    yield put(fetchPostBySlugSucceeded(data));
  } catch (error) {
    yield put(fetchPostBySlugFailed(error));
  }
}

export default function* watchFetchPostBySlugSaga() {
  yield takeLatest(FETCH_POST_BY_SLUG, fetchPostBySlugSaga);
}

Действия:

export function fetchPostBySlug(slug) {
  return {
    type: FETCH_POST_BY_SLUG,
    payload: {
      slug,
    },
  };
}

export function fetchPostBySlugSucceeded(data) {
  return {
    type: FETCH_POST_BY_SLUG_SUCCEEDED,
    payload: {
      data,
    },
  };
}

export function fetchPostBySlugFailded(error) {
  return {
    type: FETCH_POST_BY_SLUG_FAILED,
    payload: {
      error,
    },
  };
}