Поширені помилки, яких слід уникати в React

React — один із найпопулярніших фреймворків для розробки інтерфейсів користувача. Його гнучкість і потужність дозволяють створювати складні веб-додатки, але водночас розробники, особливо початківці, можуть допускати типові помилки. У цій статті ми розглянемо найпоширеніші помилки в React та як їх уникати, щоб ваш код був продуктивним, масштабованим і легко підтримуваним.

1. Ігнорування оптимізації компонентів

React оптимізує рендеринг за допомогою віртуального DOM, але неправильне управління станом і пропсами може призвести до зайвих рендерів.

Помилка

Виклик функцій безпосередньо в JSX:

function App() {
  const fetchData = () => {
    console.log('Fetching data...');
  };

  return <button onClick={fetchData()}>Натисни</button>; // Викликається під час рендера!
}

Як виправити?

Передавайте лише посилання на функції:

function App() {
  const fetchData = () => {
    console.log('Fetching data...');
  };

  return <button onClick={fetchData}>Натисни</button>;
}

Оптимізація

Використовуйте React.memo, useCallback та useMemo для зменшення зайвих рендерів:

const MemoizedComponent = React.memo(MyComponent);

2. Неправильне управління станом

Проблеми зі станом можуть призводити до багів або неефективного оновлення компонентів.

Помилка

Збереження об’єктів чи масивів у стані без належного клонування:

const [data, setData] = useState({ name: 'React' });

const updateName = () => {
  data.name = 'Updated'; // Зміна напряму
  setData(data);         // Не працює, React не бачить змін
};

Як виправити?

Завжди створюйте нові копії об’єктів:

const updateName = () => {
  setData(prevData => ({ ...prevData, name: 'Updated' }));
};

3. Використання інлайн-функцій у JSX

Інлайн-функції створюються при кожному рендері, що може спричиняти зайві рендери дочірніх компонентів.

Помилка

<button onClick={() => console.log('Clicked')}>Клікни</button>

Як виправити?

Винесіть функцію назовні:

const handleClick = () => {
  console.log('Clicked');
};

<button onClick={handleClick}>Клікни</button>;

4. Ігнорування ключів у списках

Ключі (key) — важливий аспект роботи зі списками у React. Їх відсутність або некоректне використання може спричинити проблеми з продуктивністю та баги.

Помилка

<ul>
  {items.map(item => <li>{item.name}</li>)}
</ul>

Як виправити?

Завжди використовуйте унікальні ключі:

<ul>
  {items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

5. Неправильна робота з побічними ефектами

Хук useEffect використовується для роботи з побічними ефектами, але неправильне визначення залежностей може викликати зайві запити або нескінченні цикли.

Помилка

useEffect(() => {
  console.log('Effect triggered');
}, []); // Проблема, якщо є залежності, які не враховані

Як виправити?

Завжди додавайте всі залежності:

useEffect(() => {
  console.log('Effect triggered');
}, [dependency]);

6. Ігнорування перевірки типів пропсів

Великий проєкт без перевірки типів пропсів може стати важким для підтримки.

Помилка

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  title: PropTypes.string.isRequired,
};

type MyComponentProps = {
  title: string;
};

const MyComponent: React.FC<MyComponentProps> = ({ title }) => {
  return <h1>{title}</h1>;
};

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Щось пішло не так.</h1>;
    }

    return this.props.children;
  }
}

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

function App() {
  return (
    <React.Suspense fallback={<div>Завантаження...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}