|
Top-level
 1. Слишком много пропсов Передача слишком большого количества пропсов в один компонент может быть признаком того, что компонент следует разделить. Также если у вас много конфигурационных пропсов, то перед тем как в дочерний компонент можно их сгруппировать их в объект: 9 comments
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
2. Несовместимые пропсы
Не передавайте пропсы в компонент, где они друг другу никак не подходят.
Автор приводит такой пример. Пропсы isPhoneNumberInput и autoCapitalize не имеют смысла и почему бы не разделить их: