React Hooks произвели революцию в том, как мы пишем функциональные компоненты в React. Они представили лаконичный и интуитивно понятный способ управления состоянием, побочными эффектами и другими функциями, ранее доступными только для компонентов класса. Однако с большой силой приходит большая ответственность. Чтобы обеспечить правильное использование и избежать мелких ошибок, React Hooks следуют набору правил, которых должны придерживаться разработчики. В этой статье мы рассмотрим правила, управляющие хуками React, и предоставим примеры кода, иллюстрирующие их применение.

Правило 1: Вызывать хуки только на верхнем уровне: Хуки следует вызывать только на верхнем уровне функционального компонента. Старайтесь не вызывать их внутри условий, циклов, вложенных функций или после раннего возврата. Это очень важно для поддержания порядка хуков, поскольку они зависят от последовательного вызова при каждом рендеринге.

🚫 Неправильное использование:

function MyComponent() {
  if (condition) {
    useState('foo'); // Invalid! Called inside a conditional
  }

  for (let i = 0; i < 10; i++) {
    useEffect(() => {
      // Invalid! Called inside a loop
    }, []);
  }

  function handleClick() {
    useState('bar'); // Invalid! Called inside a nested function
  }

  if (condition) {
    return null;
  }

  useState('baz'); // Invalid! Called after an early return

  return <div>My Component</div>;
}

✅ Правильное использование:

function MyComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Effect logic...
  }, [count]);

  // Rest of the component logic...
}

Правило 2: Вызывайте хуки только из функций React: хуки следует вызывать только из функциональных компонентов или пользовательских хуков. Попытка использовать их в обычных функциях JavaScript, обработчиках событий или простых объектах JavaScript не допускается.

🚫 Неправильное использование:

class MyClass extends React.Component {
  useEffect(() => {
    // Invalid! Called inside a class component
  }, []);

  handleClick() {
    useState('foo'); // Invalid! Called inside a method
  }
}

const handleClick = () => {
  useState('bar'); // Invalid! Called inside a regular function
};

const myObject = {
  useEffect(() => {
    // Invalid! Called inside a plain JavaScript object
  }, [])
};

✅ Правильное использование:

function MyComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Effect logic...
  }, [count]);

  // Rest of the component logic...
}

function useCustomHook() {
  const [value, setValue] = useState('');

  // Custom hook logic...

  return value;
}

React Hooks изменили наш подход к управлению состоянием и побочным эффектам в функциональных компонентах React. Придерживаясь правил, мы гарантируем правильное и последовательное использование наших хуков. Не забывайте всегда вызывать хуки на верхнем уровне функционального компонента и ограничивать их использование функциями React. Следование этим рекомендациям поможет вам создавать надежные и удобные в сопровождении приложения React.

React Hooks открыл перед разработчиками захватывающие возможности, позволив им писать более чистый и лаконичный код. Освоив правила, регулирующие их использование, вы сможете полностью использовать мощь React Hooks и вывести свои функциональные компоненты на новый уровень.

Удачного зацепления!