pavlik

немного подумав решил заменить конструкцию

Не надо так делать. Никогда не используйте для функций свойства класса, если можно обойтись методом.
Пример:
Array(1000)].map(_ => <SomeComponent />);
Если в компоненте SomeComponent render прописан методом, то для каждого экземпляра он будет вызываться из прототипа. Если же свойством, то вы вместе с экземплярами создадите 1000 копий одной и той же функции.

1. Статические данные. Зачем они определяются каждый render? Их можно вынести за пределы компонента:

const paths = [ ... ];
class Menu extends Component { ... }

А по-хорошему генерировать роуты и переключать страницы по одним и тем же данным:

import routes from './routes';

/* ... */

<Switch>
  {routes.map(route => (
    <Route
      exact={route.isExact}
      path={route.path}
      component={route.component}
    />
  )}
</Switch>

2. По какой логике используете ключевые слова const и let? Используйте const для всех переменных которые не переопределяются в коде, а let только для тех, которые переопределяются. Это заметно снижает когнитивную нагрузку с читающего код.

3. Конструкции вроде:

let
  isPrev = currPathIndex !== 0,
  isNext = currPathIndex !== paths.length - 1;

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

const hasPrev = currPathIndex !== 0;  // (1)
const hasNext = currPathIndex !== paths.length - 1; // (2)

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

(1), (2) - обратите внимание, что я заменил префикс is на has, что правильней. Для булевых переменных помимо is, можно использовать следующие префиксы is, has, should и подобные. Примеры:

isVisible
hasChildren
shouldShowCloseButton

4. Если используете много ключей из state и props можно сделать деструктуризацию:
const { isOpen } = this.state;

5. Don't repeat yourself. Код который вы используете многократно старайтесь выносить в отдельные компоненты:

<Link className="next_btn" style={ this.state.isOpen ? {visibility: 'hidden'} : null} to={paths[currPathIndex + 1].link}>
  <span>{ paths[currPathIndex + 1].title }</span>
</Link>

Его можно переписать компонентом с примерно таким интерфейсом:

<NavButton prev isVisible={!isOpen} path={prevPath} />

6. Зачем тернарки там где лучше подойдет &&?

{isOpen && this.renderСloseBtn()} // (1)
{hasPrev && <NavButton prev isVisible={!isOpen} path={prevPath} />}
{hasNext && <NavButton next isVisible={!isOpen} path={nextPath} />}

(1) - обратите внимание, что рендер кнопки вынесен в отдельный метод, так она будет создаваться только тогда, когда она нужна. В вашем же коде она определяется даже тогда когда не добавляется на страницу.

Используйте тернарный оператор в render, там где есть альтернативный вариант:

{isFetching ? <Preloader /> : <Content data={data} />}

Но не используйте вложенных:

{isSignedIn ? isMobile ? <UserMenuMobile /> :  <UserMenuDesktop /> : <MainMenu /> }

Лучше так:

{isSignedIn ? this.renderUserMenu() : <MainMenu /> }

где this.renderUserMenu:

renderUserMenu() {
  return this.props.isMobile ? <UserMenuMobile /> :  <UserMenuDesktop />;
}

7. Старайтесь не писать избыточных конструкций:

class Menu extends Component {
  constructor(props) {
    super(props);
      this.state = {
          isOpen: false,
      };
  }
}

При использовании прессета stage-0, create-react-app, jsfiddle и прочих библиотек/бойлерплейтов/сервисов, использующих плагин babel-plugin-transform-class-properties, достаточно:

class Menu extends Component {
  state = {
     isOpen: false,
  };
}

Потому-что когда вы вызываете метод на объекте:
obj.method(); // вызываем метод
или:
this.method(); // вызываем метод
Ссылка на объект указанная перед точкой будет использована в качестве контекста и будет доступна в функции, через ключевое слово this.

Когда вы передаете метод без вызова:
onClick={obj.method} // не вызываем метод
или:
onClick={this.method} // не вызываем метод
Передается лишь метод, а контекст теряется.

Чтобы не терялся контекст при передаче метода в слушатель, можно использовать функцию bind. На вашем примере:

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'red'
    };
    this.changeStylesForCaption = this.changeStylesForCaption.bind(this); // привязываем контекст
  }  
  
  changeStylesForCaption() {
    this.setState({
      color: 'black'
    });
  }

  render() {
    return (
      <h1 onClick={this.changeStylesForCaption} style={{ color: this.state.color }}>gleb</h1>
    );
  }

}

Стрелочные функции контекста не имеют и используют контекст того окружения, где они определены.

Это можно сделать с помощью new Image()и подписки на onload событие.
Пример взят из кода к учебнику по redux

class BigPhoto extends React.Component {
  state = {
    isLoading: false,
  }
  componentDidMount() {
    this.loadImage(this.props.url)
  }
  loadImage = src => {
    this.setState({ isLoading: true })

    let img = new Image()
    img.onload = () => {
      this.setState({ isLoading: false })
    }

    img.src = src
  }
  render() {
    const { isLoading } = this.state
    const { url } = this.props
    return isLoading ? <p>Загружаю...</p> : <img src={url} alt="big vk" />
  }
}

Главное помнить, что загрузка изображения начинается только тогда, когда ему проставлен атрибут src. Функция обработчик на onload должна быть определена заранее! В данном подходе мы используем нативный функционал браузера и js, это подходит не только к react

UPDATE: реальные тестовые задания и разборы здесь, ответы на все вопросы из поста в моем блоге об обучении react.

не включая основы js

Извините, но стандартная задача, про "напишите функуцию add, которая при вызове add(1)(2) вернет 3" - многих положила на лопатки =) Поэтому будьте готовы..

React
0) Какую проблему решает react ?
1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?
2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента...
3) в каких методах жизненого цикла стоит выполнять xhr запросы? В каких стоит "обновлять state на основе props"?
4) Что будет если вызвать this.setState в render методе компонента?
5) зачем нужен componenWIllUnmount, приведите пример..
6) Контролируемые, не контролируемые компоненты
7) Как организовать роутинг в реакт приложении? (ответ: взять react-router - подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*
8) Зачем нужны propTypes? Что происходит с ними в production сборке?
9) Как можно удобно "отлаживать" чужой код приложения, написанного на react (намек в сторону React devtools)
...

Redux
0) Какую проблему решает redux?
1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое "действие", а что такое "создатель действия"...
2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*
3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить "терминами" - асинхронный aciton)
4) Как компоненты приложения получают "пропсы" из "стора"?*
5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
6) Почему в reducer'ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
6.5) А так же, "как в js вообще это работает?". Например:

let obj1 { name: 'Test', age: 100 }
let obj2 = obj1
obj2.name = 'Test_new'

Что будет в obj1, почему? В каких случаях объекты могут быть равны?
7) Что возвращает функция connect (из react-redux)?
...

Общее:
0) package.json
1) Webpack, gulp, etc...
2) node.js
3) promise

Что-нибудь практическое:
1) Как бы вы валидировали форму, если ошибки валидации приходят после submit'a ее на сервер..
2) Почему не работает следующий код, сделайте чтобы работало
...
На истину не претендую, но такие вопросы имели место быть на собеседованиях. В беседе можно многое разузнать дополнительными вопросами и так далее. Так же, если часть вопросов вам неизвестна - не беда, многие и на половину ответить не могут.

p.s. возможно дополню...
p.p.s. звездочкой отметил, на мой взгляд не самые необходимые для junior-собеседования вопросы.