🌍 Привет мир!

🌍 Привет мир!

Всем нравятся штучки, которые позволяют “не стрелять себе в ноги” - typescript, eslint, snyk и куча других, которые с разных сторон защищают нас от этого. Вот и разработчики реакта подумали о нас, и впилили классный компонент StrictMode. Да, тема не нова, но почему-то игнорируется в проектах максимально, сейчас расскажу почему все же стоит использовать этот компонент.

🚀 Мотивация

StrictMode выявляет потенциальные проблемы в приложении и помогает в разработке более устойчивого и надежного кода.

❓ На что ругается StrictMode (варнинги в консоли)

📌 Компоненты с небезопасными методами жизненного цикла

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended 
and may indicate bugs in your code. 
See <https://reactjs.org/link/unsafe-component-lifecycles> for detail

📌 Устаревший метод findDOMNode.
📌 Устаревший API контекста.
📌 Устаревший string refs.

⚒️ StrictMode проверяет на наличие side effects

За счет двойного рендера ( не удивляйтесь, это нормально в этом режиме ), определяются различные мутации, сайд эффекты, нежелательные запросы. Это сделано исходя из политики реакта который говорит:
- “Каждый ваш компонент - это чистая функция, которая при одном и том же наборе входных данных (пропсов) всегда возвращает один и тот же JSX”.

const TaskList = ({ tasks }) => {
   // Добавление новой задачи мутирует входной массив tasks.
  tasks.push({ id: 'new', title: 'New Task' });
 
  return (
    <ul>
      {updatedTasks.map(task => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

При использовании строгого режима, в консоли не будет предупреждения, но визуально вы и сами поймете, будет две одинаковые задачи. Корректно было бы создать новый массив, вместо мутации старого.

const updatedTasks = [...tasks, { id: 'new', title: 'New Task' }];

‼️ Без строгого режима можно легко пропустить подобную ошибку, и заметить только при добавлении функцониала, который изменяет состояние и приводит к повторным renders. Строгий режим заставит вас увидеть ошибку сразу.

⚙️ StrictMode проверяет эффекты

Повторно выполняются хуки эффектов (Effects) для проверки корректности их очистки. Это очень важно для предотвращения утечек памяти в приложении и гарантии того, что эффекты не оставляют «хвостов» после повторного рендеринга.

useEffect(() => {
    const socket = new WebSocket('wss://server-url');

    // Прослушивание сообщений от сокета
    socket.addEventListener('message', event => {
      const newPrice = JSON.parse(event.data).price;
      setPrice(newPrice);
    });

    // Проблема: нет отмены подписки при размонтировании
  }, []); // Эффект выполнится один раз после монтирования

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

👇 Правильно было бы:

 useEffect(() => {
    const socket = new WebSocket('wss://price-tracking-service');

    // Прослушивание сообщений от сокета
    socket.addEventListener('message', event => {
      const newPrice = JSON.parse(event.data).price;
      setPrice(newPrice);
    });

    // Функция очистки для закрытия соединения
    return () => {
      socket.close();
    };
  }, []);

‼️ Внимание

📌 Strict Mode работает только в режиме development.
📌 Если у вас большой проект и много ошибок, можно не оборачивать приложение целиком, а только компоненты, которые правите или создаете.
📌 Не переживайте по поводу того, что ваш запрос за данными, будет вызван 2 раза, избегайте этого с помощью
игнорирования результата или abortController.
📌 Можно добавить правила в eslint-plugin-react, и закрыть часть проблем, которые решает данный мод.

 "react/no-deprecated": "warn", // Предупреждение о deprecated lifecycle
 "react/no-direct-mutation-state": "error" // Запрещена мутация state

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

#REACT