 Наткнулся на статью про "пахнующий" React компонент, пройдусь по пунктам с примерами плохих решений и способах их исправлений. Еще важно уточнить, что это только советы по улучшению кода, а не правила. На фото твои коллеги смеются с твоего вонючего компонента. 11 comments
1. Слишком много пропсов Передача слишком большого количества пропсов в один компонент может быть признаком того, что компонент следует разделить. Также если у вас много конфигурационных пропсов, то перед тем как в дочерний компонент можно их сгруппировать их в объект: 2. Несовместимые пропсы Не передавайте пропсы в компонент, где они друг другу никак не подходят. Автор приводит такой пример. Пропсы isPhoneNumberInput и autoCapitalize не имеют смысла и почему бы не разделить их: 3. Закидывание пропса в состояние Когда мы в начальное состояние передает пропс text, то при его обновлении компонент все равно будет отображать старое значение. Автор предлагает добавить функцию для вычисления text и обернуть в хук useMemo. Решена проблема с повторным рендером 4. Возвращение JSX из фикций https://antongunnarsson.com/react-component-code-smells/#jsx-returns… На самом деле я не встречал такого, это устаревший подход получения JSX, поэтому просто оставлю ссылку для ознакомления. Пост буду дополнять, завтра доделаю вторую часть здесь https://t.me/mypetprojects и уже дополню в треде. 5. Несколько булевых значений для одного состояния. Автор приводит пример с получением данных через fetch, для отображение загрузки, ошибки или данных мы используем три состояния. Автор предлагает использовать enum, в чистом JS такого нет, поэтому мы можем использовать строки. Мы исключили получение невозможных состояний и значительно упростили понимание этого компонента. А если мы используем TypeScript, то использование enum становится еще проще: 6. Слишком много стейтов в компоненте. Сам грешу с таким, автор предлагает заменить кучу стейтов на useReducer. В этом случае он действительно улучшит читабельность кода. 7. Большой useEffect Избегайте жирных useEffect, которые выполняют сразу несколько задач. От этого появляется больше вариантов для возникновения ошибок. Автор дает такой пример: Мы уменьшаем сложность компонента и снижаем риск возникновения непредвиденных ошибок. Вроде все просто, но это база для использования useEffect. На этом все, можете присылать свои варианты "пахнующего" компонента, главное помнить, что все это не правила, а лишь рекомендации для улучшения вашего компонента 👋 |
Gregory's Server
Если сложно смотреть здесь, то можно самим пробежаться по оригиналу: https://antongunnarsson.com/react-component-code-smells/