Klein Maximus

https://swiperjs.com/react

Создавайте cancelToken для конкретного запроса (cancelToken.source()), передавайте его в каждый запрос и отслеживайте, завершился ли сам запрос. Если нет, то отменяйте.

https://github.com/axios/axios#cancellation

const cancelToken = axios.CancelToken;

const usePost = () => {
  const source = useRef(null);

  return () => {
    if (source.current) {
      source.current.cancel();
    }

    source.current = cancelToken.source();
    const result = http.post(`${API_URL}.${METHODS.CALL_ENROLLMENT}`, { cancelToken, userId, filter });

    // ........

    result.finally(() => {
      // Обнуляем токен при завершении запроса
      source.current = null;
   });

    return result;
  }
}

const first_name = document.getElementById("input_f_n").value;
const last_name = document.getElementById("input_l_n").value;
const email = document.getElementById("input_e").value;
const houseID = document.getElementById("input_houseID").value;
const userID = (users.filter(word => word.userID === index))[0].userID;

const fields = { userID, first_name, last_name, houseID, email };

const body = Object.keys(fields).reduce((acc, key) => {
  if (fields[key] !== '' && fields[key] !== null && fields[key] !== undefined) {
    acc[key] = fields[key];
  }

  return acc;
}, {});

const response = await fetch('http://127.0.0.1:8000/api/users/user/update', {
  method: 'PUT',
  headers: {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest',},
  credentials: 'include',
  body: JSON.stringify(body),
});

Или проверку можно организовать другим образом

//...

const body = { userID, first_name, last_name, houseID, email };

Object.keys(body).forEach(key => {
  if (body[key] === '' || key[key] === null) {
    delete body[key];
  }
});

//...

Ну или совсем "в лоб":

//...

const body = {};

if (first_name !== '') {
  body.first_name = first_name;
}

// Дальше проверки по всем значениям

// ...

import React, { useEffect, useState } from 'react';

// Функция-инициализатор нужна, чтобы вынести создание объекта состояния из компонента
const initStyle = () => ({ zIndex: 0 });

const Component = () => {
  const [style, setStyle] = useState(initStyle);

  useEffect(() => {
    // Вот здесь можно менять значения - zIndex поменяется через секунду
    const timer = setTimeout(() => setStyle({ zIndex: 1 }), 1000);

    // Надо не забыть почистить счетчик setTimeout
    return () => clearTimeout(timer);
  }, []);

  return <header className={`${styles.header} navbar navbar-expand-lg navbar-light sticky-top`} style={style} />
};

Можно сделать несколько иначе

import React, { useEffect, useMemo, useState } from 'react';

const Component = () => {
  const [zIndex, setZIndex] = useState(0);

  // Поскольку style это объект, то неплохо бы его мемоизировать
  const style = useMemo(() => ({ zIndex }), [zIndex]);

  useEffect(() => {
    const timer = setTimeout(() => setZIndex(1), 1000);

    return () => clearTimeout(timer);
  }, []);

  return <header className={`${styles.header} navbar navbar-expand-lg navbar-light sticky-top`} style={style} />
};

Типа такого:

class WS extends React.Component {
  constructor(props) {
    super(props);
    this.state = { messages: [] };
    this.ws = new WebSocket("ws://api...");
  }

  componentDidMount() {
    this.ws.onmessage = responce => this.setState({ ...this.state, messages: [ ...this.state.messages, responce.data ] });
  }

  componentWillUnmount() {
    this.ws.close();
  }
}

или на хуках

import React, { useEffect, useState } from 'react';

function ws() {
  const [message, setMessages] = useState([]);

  useEffect(() => {
    const ws = new WebSocket("ws://api...");
    ws.onmessage = responce => this.setState({ ...this.state, messages: [ ...this.state.messages, responce.data ] });
    return () => ws.close();
  }, []);
}

Как можно заметить, на хуках логика не размазана по всему компоненту, а находится в одном месте.

А еще лучше обернуть все это в React Context и подписываться на него в нужных компонентах через useContext (или Consumers). Тогда и очередь сообщений модно копить со всеми нужными мета-данными (например, временем получения).

Свойство экземпляра класса, видимо.

...
   constructor(props) {
      ...
      this.speed = 1000;
      ...
    }
...

Хранить можно все что угодно, в том числе ref-ы на элементы. Но нужно ли?

Провайдер контекст транслирует дочерним компонентам какое-то значение.

Это может быть состояние (реактивное и изменяемое), могут быть какие-то функции (например, для изменения состояния), может быть вообще просто нативный объект (например, какая-то конфигурация приложения, которую не нужно менять) или просто константа (ну, вдруг пнадобится). Тут все зависит от того, что требуется передать вниз по дереву компонентов.

Соответственно, если нужно что-то изменяющееся, отслеживаемое и реактивное, то да, надо передавать состояние (state провайдера) и без него никак.

Это очень похоже на Redux. Но не стоит беспокоиться, что на каждый чих провайдер будет перерисовывать все дерево. Просто детей надо передавать в провайдер через children. В таком случае при изменении стейта будут ререндериться только Consumer-ы этого контекста (или те компоненты, которые используют useContext).

На стороне сервера можно делать что угодно. Можно самостоятельно все сделать, можно использовать что-то типа https://socket.io/

На клиенте нужно подписаться на обновления сокета, например через useEffect связав с данными в useState.
Еще можно обернуть подключение в провайдер React Context.

Все зависит от того, что и как должно происходить.
По контексту вопроса не совсем это понятно.
Самый простой вариант открыть какую то ссылку в другой окне - добавить target="_blank":
<a href="..." target="_blank">...</a>

Зависит от того, что Вы используете для инлайн-стилизации.
Если просто обычный объект, то никак.
Если что-то типа Radium, то вот пример.

Строка 108:

let firstMonthDay = new Date(year, month).getDay();
let firstDay = firstMonthDay > 0 ? firstMonthDay - 1 : 6;

Ну и в 259 нужную последовательность указать:
["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"]

Я использую и Styled Components, и CSS Modules. Все зависит от конкретной задачи. Где-то удобнее использовать Styled Components, где-то CSS Modules. И даже инлайн стили иногда могут пригодиться. И все это, конечно же, можно совмещать ;)

Вот тут можно посмотреть - https://blog.bitsrc.io/using-less-with-create-reac...