console.log("Hello, world! 🌟");

console.log("Hello, world! 🌟");

Сегодня среда, а значит, неделя в разгаре, и у меня есть немного полезной информации для вас! 📅
Пришлось отложить тему, которую я готовил, в связи с тем, что на работе стал чаще замечать у разработчиков проблемы с более базовыми, но важными вещами. Поэтому я принял решение поднять данный вопрос на самый верх своего списка.

Итак, снова о “чистописании”. 📝

State Machine — это поведенческая модель, которая состоит из конечного числа состояний и переходов между ними. Каждое состояние представляет собой определённое состояние системы, а переходы определяют, как система может изменять своё состояние в зависимости от входных данных или событий.

Лучше всего понимание приходит на примерах. Давайте рассмотрим классический компонент в React, который получает данные с сервера, отображает их или, в случае ошибки, показывает сообщение об ошибке. В таком случае у нас будет три состояния: Loading, Success, Error.

import React, { useState } from 'react';

const UiState = {
  LOADING: 'LOADING',
  ERROR: 'ERROR',
  SUCCESS: 'SUCCESS',
};

const UiStateMap = {
  [UiState.LOADING]: <Spinner />,
  [UiState.ERROR]: <ErrorComponent />,
  [UiState.SUCCESS]: <SuccessComponent />,
};

export const App = () => {
  const [uiState, setUiState] = useState(UiState.LOADING);

  useEffect(() => {
    const fetchData = async () => {
      try {
        await fetch(`https://data.by`);
        setUiState(UiState.SUCCESS);
      } catch (e) {
        setUiState(UiState.ERROR);
      }
    };

    fetchData();
  }, []);

  return <>{UiStateMap[uiState]}</>;
};

Пример носит демонстративный характер, упор на понимание принципа.

Заключение
В чем же плюс такого подхода? 🤔

Добавление нового состояния или удаление существующего пройдет абсолютно бесшовно! Вам не нужно нагружать ваш код множеством условий if, что обычно приводит к усложнению кода и увеличению когнитивной нагрузки. Независимо от того, на каком языке программирования вы пишете, важно понимать, что большинство систем нестабильны и код нужно писать гибко и масштабируемо, что и позволяет делать State Machine.⚙️

### Поделитесь своим мнением! 💬
Если вам понравилась статья, не забудьте поставить лайк и оставить комментарий с вашим мнением! 👇

#BESTPRACTICES #REACT