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