10 порад для написання чистого та підтримуваного коду на React (без втрати здорового глузду)

Ідеальне робоче місце для створення чистого та підтримуваного коду на React — кава, код і креативність.

Привіт, розробники на React! Сьогодні ми вирішуємо вічну проблему між "Мені просто треба, щоб це працювало зараз" і "Хто ж цей монстр, який написав цей код півроку тому? О… це був я." Написання чистого та підтримуваного коду на React не обов'язково має бути виснажливим досвідом. З цими 10 порадами ви зможете врятувати себе (і своїх колег) від відчаю.

Поїхали!

1. Організуйте свою структуру файлів як Марі Кондо

Безлад у структурі файлів може працювати… поки ви не почнете шукати компонент в 2 ночі після того, як у продакшн з'явиться баг.
Каналізуйте свою внутрішню Марі Кондо: групуйте файли логічно, давайте їм осмислені імена та позбувайтеся всього, що не викликає радості (або функціональності).

Приклад:

/src  
 /components  
 Card.js  
 Navbar.js  
 /hooks  
 useFetch.js  
 /utils  
 calculateDiscount.js

Якщо у вас є папка misc або utils з 27 файлами, нам потрібно поговорити.

2. Використовуйте імена пропсів, які мають сенс

Уявіть, що ви називаєте свого друга "U01" замість його імені. Дивно, так? Ставтесь до своїх пропсів як до друзів — використовуйте зрозумілі, описові імена, які будуть зрозумілі всім. Ваші колеги (і майбутнє я) скажуть вам спасибі.

Не робіть:

Робіть:

Ви ж не пишете загадки для кросвордів.

3. Хуки: Ваші найкращі друзі

Хуки — це як друг, який завжди знає, що сказати. useState для стану, useEffect для побічних ефектів і власні хуки для вашої повторно використовуваної логіки.
Але не зловживайте useEffect; це хук, а не універсальне рішення.

Приклад власного хука:

const useCounter = (initialValue = 0) => {  
 const [count, setCount] = useState(initialValue);  

 const increment = () => setCount((prev) => prev + 1);  

 return { count, increment };  
};

Бачите? Хуки — це подарунок, який не перестає дарувати.

4. Скажіть "ні" інлайн-стилям

Інлайн-стилі можуть здаватися швидким і зручним рішенням, але це фастфуд у світі CSS. Звісно, вони працюють, але ви пошкодуєте про це пізніше. Використовуйте CSS модулі, styled-components або CSS за принципом utility-first.

З CSS модулями:

import styles from './Button.module.css';  
const Button = () => <button className={styles.button}>Click Me</button>;

Ваше майбутнє я дасть вам п'ять за це.

5. TypeScript: Суперсила, якої потребує ваш React код

Давайте будемо чесними: JavaScript чудовий, поки ви не зрозумієте, що передали undefined у функцію, яка очікувала рядок, і тепер ваш додаток викидає помилки.
Увійдіть в гру TypeScript — супергерой сучасної розробки. TypeScript надає вашому коду суперсили за допомогою статичного типізування, виявляючи помилки ще до того, як вони встигнуть зіпсувати вам день.

З TypeScript ви витрачатимете менше часу на відлагодження і більше — на розробку.

type ButtonProps = {  
 label: string;  
 onClick: () => void;  
};  

const Button: React.FC<ButtonProps> = ({ label, onClick }) => (  
  <button onClick={onClick}>{label}</button>  
);

6. Розділяй і володарюй

Якщо ваш React компонент має 300 рядків коду, вітаємо — ви побудували хмарочос. Тепер давайте розіб'ємо його на менші, багаторазові компоненти.

Замість того, щоб: Великий компонент Form, який робить усе — від валідації до замовлення піци.

Спробуйте: Окремі компоненти, як TextInput, SubmitButton та ErrorMessage.

Тримайте все модульно. Тримайте все розумно.

7. Тримайте логіку поза компонентами

Уявіть ваші компоненти як акторів — вони повинні грати роль, а не писати сценарій.
Переносьте бізнес-логіку в хуки, контексти або бібліотеки управління станом, такі як Redux.

Погано:

const Dashboard = () => {  
 const [data, setData] = useState([]);  

 useEffect(() => {  
 fetch('/api/data')  
 .then((res) => res.json())  
 .then(setData);  
 }, []);  

 return <div>{data}</div>;  
};  

Добре:

const useFetchData = (url) => {  
  const [data, setData] = useState([]);  
  useEffect(() => {  
    fetch(url)  
      .then((res) => res.json())  
      .then(setData);  
  }, [url]);  
  return data;  
};  

Компоненти будуть щасливіші, коли зосереджуватимуться лише на рендерингу.

8. Протестуйте перед тим, як зламати

Тестування схоже на чистку зубів: нудне, але ви пошкодуєте, якщо пропустите. Використовуйте Jest та React Testing Library, щоб ваші компоненти залишалися в чудовій формі.

Приклад тесту:

test('renders button with label', () => {  
  render();  
  expect(screen.getByText('Submit')).toBeInTheDocument();  
});  

9.
Послідовність — ключ до успіху

Prettier і ESLint — це поліція граматики вашого коду. Налаштуйте їх і дайте їм підтримувати вашу стилістику послідовною. Якщо ви все ще сперечаєтесь про пробіли чи табуляції у 2025 році... просто використовуйте Prettier.

10. Лінивий завантаження компонентів

Навіщо завантажувати все одразу, якщо вашому користувачу це може й не знадобитися? Використовуйте React lazy і Suspense, щоб завантажувати компоненти за потребою. Це як замовляти закуски замість шведського столу.

const LazyComponent = React.lazy(() => import('./MyComponent'));  

const App = () => (  
  <Suspense fallback={<div>Loading...</div>}>  
    <LazyComponent />  
  </Suspense>  
);

З цими порадами ви будете писати React код, який не тільки чистий і зручний у підтримці, але й приносить задоволення при роботі. Пам’ятайте, щасливий код — щасливий розробник!

Які з цих порад ви використовуєте? Поділіться своїми думками в коментарях нижче!

Перекладено з: 10 Tips for Writing Clean, Maintainable React Code (Without Losing Your Sanity)