Антон Спирин

Так тоже лучше не делать. Такая конструкция и читается хуже и в нее трудней вносить изменения. Хандлеры лучше передавать явно.

Давайте лучше разберем более приближенный к реальности кейс:

const Comment = ({ comment, meta, author, postLike, me }) => {
  const [shouldShowReply, setReply] = useState(false);

  const toggleReply = useCallback(() => {
    setReply(s => !s);
  }, []);

  const handleLikeClick = useCallback(() => {
    postLike(comment.id, me.id);
  }, []);

  const isLiked = useMemo(
    () => meta.likes.some(like => like.user_id === me.id),
    [meta.likes],
  );  

  return (
    <Wrapper>
      <Avatar src={user.avatar} to={`/users/${user.slug}`} />
      <CommentBody text={comment.body} />
      <Icon name="like" isActive={isLiked} onClick={handleLikeClick} />
      <Button type="link" onClick={toggleReply}>Reply</Button>
      {shouldShowReply && <ReplyForm />}
    <Wrapper/>
  );
}

const mapStateToProps = (state, ownProps) => ({
  me: meSelector(state),
  author: commentAuthorSelector(state, ownProps),
  meta: commentMetaSelector(state, ownProps),
});

const mapDispatchToProps = {
  postLike,
};

export default connect(mapStateToProps, mapDispatchToProps)(Comment);

Смотрите, что у нас получается, наш комментарий обрабатывает клик по аватару и клики по кнопкам Like и Reply.
Клик по аватару обрабатывается ссылкой роутера, а благодаря композиции реализация от нас скрыта и мы просто знаем, что в аватар достаточно передать src картинки и ссылку.
Клик по лайку обрабатывается асинхронной функцией действием, которая подключается с помощью HOC connect.
Клик по Reply обрабатывается внутренним хандлером компонента и изменяет его состояние.
На выходе мы имеем интерфейс для комментария подключенного к хранилищу следующего вида:
<Comment comment={comment} />
Для не подключенного:

<Comment
  me={me}
  author={author}
  meta={commentMeta}
  postLike={postLike}
  comment={comment}
/>

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

Геттеры и сеттеры без необходимости лучше никогда не использовать. Так как они, опять же, затрудняют анализ. Исключение - использование инструментов приветствующих их использование.

И еще - что лучше тут - бинд или стрелочная функция?

Это есть в документации.

Ненормально так делать. Одна из целей которую преследовали разработчики современных фреймворков это уход от необходимости вручную сверяться с DOM селекторами.
Подобные места, источник возникновения целого класса багов, когда вы забудете, что селектор используется в JS и переименуете или удалите его. А выяснят, что что-то отвалилось, возможно, только ваши пользователи.
Можно, конечно, использовать дополнительные селекторы с префиксами: 'item__hint js--item__hint', но с возможностями современных фреймворков, лучше и удобней отказаться от сверки с DOM селекторами и повесть разные слушатели на разные элементы.

По-хорошему, разделить приложение на две части и в каждой определить свой store.
Но вам ничто не мешает использовать неограниченное количество store в одном приложении:

Пример 1:

const store1 = configureStore1();
const store2 = configureStore2();

const App = () => (
  <>
    <Provider store={store1}>
      <MainProject />
    </Provider>
    <Provider store={store2}>
      <SubProject />
    </Provider>
  </>
);

Пример 2:

const store1 = configureStore1();
const store2 = configureStore2();

const App = () => (
  <Provider store={store1}>
    <>
      <MainProject />
      <Provider store={store2}>
        <SubProject />
      </Provider>
    </>
  </Provider>
);

C роутингом пример будет немного сложней, но суть от этого не поменяется.

sudo chown -R $USER:$GROUP ~/.npm

Думаю тут правильней использовать useEffect:

function Y({ x }) {
  const [y, setY] = useState(x);
  useEffect(() => {
    if (x !== y) {
      setY(x);
    }
  }, [x, y]);

  return ( ... );
}

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

Ставить пятую версию react-redux.

Вероятно, это нужно делать как-то по другому. Но я не приложу ума как это сделать

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

Изучить вопрос самостоятельно можно по этой ссылке.

Ошибка у вас из-за неправильного использования setInterval, вы вместо колбека передаете туда результат выполнения send.

Вместо:
setInterval(foo(bar), duration);

Надо:

setInterval(() => {
  foo(bar);
}, duration);

Ну и для возможности остановить его выполнение его надо хранить и чистить по определенному условию:

const interval = setInterval(() => {
  foo(bar);
  if (someCondition()) {
    clearInterval(interval);
  }
}, duration);

Ваш код с парой исправлений:

const TabContent = ({ content }) => (
  <div className="accordion">
    <p>{content}</p>
  </div>
);

function Tabs({ items }) {
  /* (1) Добавлено значение по-умолчанию для активной вкладки */
  const [active, setActive] = React.useState(0);
  
  /* (2) Хандлер по-хорошему не должен ничего возвращать */
  const openTab = e => {
    setActive(+e.target.dataset.index);
  };

  return (
    <div>
      <div className="tab">
        {items.map((n, i) => (
          <button
            /* (3) Добавлено свойство key */
            key={i}
            className={`tablinks${i === active ? ' active' : ''}`}
            onClick={openTab}
            data-index={i}
          >
            {n.title}
          </button>
        ))}
      </div>
      {items[active] && <TabContent {...items[active]} />}
    </div>
  );
}

/* (4) Добавлено свойство title для каждого пункта */
/* (5) Добавлены открывающие кавычки для значений content */
const items = [
  {
    title: 'First',
    content:
      '1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
  },
  {
    title: 'Second',
    content:
      '2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
  },
  {
    title: 'Third',
    content:
      '3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
  }
];

ReactDOM.render(<Tabs items={items} />, document.getElementById('app'));

Redux

Вам надо хранить состояние массива чекбоксов и в обработчике изменять только состояние чекнутого.
Обработка нескольких элементов Input

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

headers: {
  'Content-type': 'application/json',
  'Authorization': `Bearer ${token}`,
},

или можно, при получении токена, занести Authorization в заголовки по-умолчанию:

axios.defaults.headers.common.Authorization = `Bearer ${token}`;

Вызов Element.getElementsByTagName() возвращает HTMLCollection

How to iterate through HtmlCollection?

const flipCard = e => {
  const card = e.currentTarget;
  card.classList.add('flip');
  // ...
};

props принято называть в camelCase. Вместо ProjectView, свойство следует назвать projectView или вообще сократить до view(или img).

<NewSubProject img={require('../images/github-brands.svg')}

По какому принципу взаимодействия с сервером работает React?

По протоколу HTTP поверх TCP/IP

Т.е есть запущенный Реакт, и этот реакт сам по себе там работает и обменивается с сервером данными через ajax запросы?

React приложение выполняется браузером и наличие сервера не является обязательным условием. Ajax запросы как вариант.

Т.е React работает на npm

npm это пакетный менеджер на нем ничего не работает.

Не могу точнее объяснить ибо не особо знаю реакт.

Тут скорей сказываются недостаточные знания всех областей.