Есть react-компонент:
import React, { useState, useCallback } from 'react';
import { useHttp } from '../../hooks/http.hooks';
function Main() {
const {loading, error, request} = useHttp();
const [news, setNews] = useState(0);
const topNews = useCallback(async function() {
const data = await request('http://localhost:5500/api/news/top/2');
return data;
}, []);
console.log(topNews());
return (
<section className={css(sheet.main)}>
<div className="container">
hello world
</div>
</section>
);
}
export default Main;
И кастомный хук:
import { useState } from 'react';
export const useHttp = () => {
const [loading, setLoading] = useState();
const [error, setError] = useState();
async function request(url, { method = 'GET', body = null, headers = {} } = {}) {
setLoading(true);
try {
const response = await fetch(url, { method, body, headers });
const data = await response.json();
if (!response.ok) {
throw new Error(data.msg || 'Непредвиденная ошибка');
}
return data;
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
}
return { loading, request, error }
}
При запуске получаю ошибку:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
И кучу промисов в консоли:
Как я понял, когда меняется loading
, Main
перерендеривается, поэтому добавил useCallback()
, но он не помог. Как правильно избавиться от зацикливания?
Main
компонента