Встречается на собеседованиях • сегодня

Как сделать чтобы useFetch отрабатывал только на клиенте

В Next.js можно использовать useEffect для выполнения запроса только на клиенте. Также можно проверить, выполняется ли код на клиенте через typeof window !== 'undefined'.

Пример с хуком useFetch:

jsx
import { useEffect, useState } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

useEffect(() => {
if (typeof window !== 'undefined') { // Проверка на клиент
fetch(url)
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
});
}
}, [url]);

return { data, loading };
}

text

Альтернативный вариант - использовать `useState` с условием:

```jsx
const [mounted, setMounted] = useState(false);

useEffect(() => {
  setMounted(true);
}, []);

// Затем использовать mounted в условиях запроса

Это предотвратит выполнение запроса во время SSR.

Sophi
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
Попробовать бесплатноArrow

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы