> For the complete documentation index, see [llms.txt](https://exceedteam.gitbook.io/react-hooks-redux/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://exceedteam.gitbook.io/react-hooks-redux/react-hooks/osnovnye-khuki/khuk-effekta-useeffect.md).

# Хук эффекта (useEffect)

`useEffect` - выполняет ту же роль, что и `componentDidMount`, `componentDidUpdate` и `componentWillUnmount` в React-классах, но объединяет их в единый API.

### useEffect как componentDidUpdate

```jsx
function showMyStatus(props) {
  const [isOnline, setIsOnline] = useState(false);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    //делаем что-то для обновления статуса, например:
    API.login(props.id, handleStatusChange);
  });
  
  return (
      <div> Status: {isOnline ? 'Online' : 'Offline'} </div>
  );
}
```

**Что же делает `useEffect`?** Используя этот хук, мы говорим React сделать что-то после рендера. React запомнит функцию (эффект) и вызовет её после того, как внесёт все изменения в DOM.

Если необходимо чтобы React *пропускал* вызов эффекта, если определённые значения остались без изменений между последующими рендерами, передайте массив в `useEffect` вторым необязательным аргументом так:

```jsx
useEffect(() => {
  document.title = `Вы нажали ${count} раз`;
}, [count]); // Перезапускать эффект только если count поменялся
```

Рассмотрим варианты использования хука эффекта более подробно.

### useEffect как componentDidMount

`componentDidMount()` вызывается один раз, сразу после монтирования компонента. Инициализация, требующая доступа к узлам DOM, должна находиться здесь. Если вам нужно загружать данные с удаленного источника, это хорошее место для инициирования сетевого запроса.

Чтобы реализовать метод `componentDidMount()` с помощью `useEffect`, достаточно передать в пустой массив вторым аргументом в `useEffect`.

```jsx
function counter(props) {
  const [state, setState] = useState(0);
  useEffect(() => {
    setState(0);
  }, []);
  
  return (
      <div> Count: {state} </div>
  );
}
```

Таким образом useEffect вызывается один раз, сразу после монтирования компонента.

### useEffect как componentWillUnmount

`сomponentWillUnmount()` вызывается непосредственно перед демонтированием и уничтожением компонента.

Чтобы повторить `сomponentWillUnmount()` , необходимо возвращать в `useEffect` функцию очистки:

```jsx
  ...
  
  useEffect(() => {
    document.addEventListener('mousedown', handleClick, false);
    
    return () => {
      document.removeEventListener('mousedown', handleClick, false);
    };
  }, []);
  
  ...
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://exceedteam.gitbook.io/react-hooks-redux/react-hooks/osnovnye-khuki/khuk-effekta-useeffect.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.