В React, чтобы `useEffect` выполнился только один раз при первом рендере компонента, вам нужно передать пустой массив в качестве второго аргумента. Это предотвратит повторное выполнение эффекта при последующих рендерах.
Вот пример использования `useEffect`, который выполняет фетч запроса и не вызывает повторный рендер:
```javascript
import React, { useEffect, useState } from 'react';
const MyComponent = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
};
fetchData();
}, []); // Пустой массив здесь означает, что эффект выполнится только один раз
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return (
<div>
{/* Отображение данных */}
{JSON.stringify(data)}
</div>
);
};
export default MyComponent;
```
В этом коде:
1. `useState` используется для хранения данных, статуса загрузки и ошибок.
2. `useEffect` вызывается только один раз после первого рендеринга, потому что передан пустой массив зависимостей `[]`.
3. Внутри `useEffect` выполняется асинхронная функция `fetchData`, которая получает данные и обновляет состояние.
4. В зависимости от состояния `loading`, вы можете отобразить загрузку или данные.
Следуя этому паттерну, вы сможете избежать бесконечного рендера в своем приложении.