Запросы, хуки и спагетти / Habr

Привет, Хабр!

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

В этой статье мы рассмотрим, как неправильное разделение ответственности может негативно сказаться на ваших компонентах, и какие подходы помогут избежать подобных проблем.

Основные проблемы отправки запросов внутри useEffect прямо в компонентах:

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

Рассмотрим код со смешанной с визуалом логикой, попытаемся сделать его более лаконичным:

/YourComponent.jsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const YourComponent = () => {
  const [todoId] = useState('1');

  const [todoRequest, setTodoRequest] = useState({
    data: null,
    isLoading: false,
    isError: false
  });

  const [postId] = useState('1');

  const [postsRequest, setPostsRequest] = useState({
    data: null,
    isLoading: false,
    isError: false
  });

  useEffect(() => {
    const fetchTodos = async () => {
      try {
        setTodoRequest((prev)=>({...prev, isLoading: true}));
        const response = await axios.get(`https://jsonplaceholder.typicode.com/todos/${todoId}`);
        setTodoRequest((prev)=>({...prev, data: response.data, isLoading: false}));
      } catch (error) {
        setTodoRequest((prev)=>({...prev, isLoading: false, isError: true}));
      }
    };

    fetchTodos();
  }, [todoId]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        setPostsRequest((prev)=>({...prev, isLoading: true}));
        const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}`);
        setPostsRequest((prev)=>({...prev, data: response.data, isLoading: false}));
      } catch (error) {
        setPostsRequest((prev)=>({...prev, isLoading: false, isError: true}));
      }
    };

    fetchPosts();
  }, [postId]);

  return (
    <div>
      {todoRequest.isLoading && <p>Loading...</p>}
      <pre>{todoRequest.data && JSON.stringify(todoRequest.data, null, 2)}</pre>
      {todoRequest.isError && <h1>Не удалось загрузить задачи</h1>}

      {postsRequest.isLoading && <p>Loading...</p>}
      <pre>{postsRequest.data && JSON.stringify(postsRequest.data, null, 2)}</pre>
      {postsRequest.isError && <h1>Не удалость загрузить статьи</h1>}
    </div>
  );
};

export default YourComponent;

Код выглядит достаточно нагружено, и с увеличением количества запросов с различными параметрами будет всё больше походить на спагетти.

Как улучшить читаемость кода не избавляясь от useEffect?

Выносить всю логику отправки запросов в хуки!

Для более легкой поддержки и улучшения читаемости кода нужно как минимум вынести логику запросов в хуки, отделенные от компонента, соблюдая принцип разделения ответственности.

В коде выше довольно много повторяющегося кода, вынесем отслеживание состояния запроса в отдельный хук — useFetch:

/hooks/useFetch.jsx

import { useState, useEffect } from "react";

export const useFetch = ({ requestDeps, requestFn }) => {
  const [request, setRequest] = useState({
    data: null,
    isLoading: false,
    isError: false,
  });

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        setRequest((prev) => ({ ...prev, isLoading: true }));
        const response = await requestFn();
        setRequest((prev) => ({
          ...prev,
          data: response.data,
          isLoading: false,
        }));
      } catch (error) {
        console.log(error);
        setRequest((prev) => ({
          ...prev,
          isLoading: false,
          isError: true,
        }));
      }
    };

    fetchPosts();
  }, [...requestDeps]);

  return {
    data: request.data,
    isLoading: request.isLoading,
    isError: request.isError,
  };
};

useFetch принимает в себя функцию с запросом, и возвращает объект с:

Данными, возвращенными функцией-запросом
Состоянием ожидания ответа
Состоянием выполнения запроса с ошибкой

Теперь, взяв за основу useFetch, напишем хуки для получения поста и задачи:

/hooks/usePost.jsx

import { useFetch } from "./useFetch";
import axios from "axios";

export const usePost = ({ postId }) => {
  return useFetch({
    requestDeps: [postId],
    requestFn: async () => {
      const data = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/${postId}`,
      );
      return data;
    },
  });
};

/hooks/useTodo.jsx

import { useFetch } from "./useFetch";
import axios from "axios";

export const useTodo = ({ todoId }) => {
  return useFetch({
    requestDeps: [todoId],
    requestFn: async () => {
      const data = await axios.get(
        `https://jsonplaceholder.typicode.com/todos/${todoId}`,
      );
      return data;
    },
  });
};

Теперь используем наши хуки в компоненте!

/YourComponent.jsx

import React from "react";
import { usePost } from "./hooks/usePost";
import { useTodo } from "./hooks/useTodo";

const YourComponent = () => {
  const {
    data: postData,
    isLoading: isPostLoading,
    isError: isPostFailed,
  } = usePost({ postId: "1" });

  const {
    data: todoData,
    isLoading: isTodoLoading,
    isError: isTodoFailed,
  } = useTodo({ todoId: "1" });

  return (
    <div>
      {isTodoLoading && <p>Loading...</p>}
      <pre>{todoData && JSON.stringify(todoData, null, 2)}</pre>
      {isTodoFailed && <h1>Не удалось загрузить задачи</h1>}

      {isPostLoading && <p>Loading...</p>}
      <pre>{postData && JSON.stringify(postData, null, 2)}</pre>
      {isPostFailed && <h1>Не удалость загрузить статьи</h1>}
    </div>
  );
};

export default YourComponent;

Кода в самом компоненте стало в 2 раза меньше, и логика запросов никак не мешается с интерфейсом.

Использование React Query для отправки запросов

React Query - это библиотека, предназначенная для управления состоянием данных в приложении. Она упрощает выполнение запросов к серверу, управление кэшированием данных и обеспечивает интуитивные средства для обработки состояний загрузки и ошибок.

Руководство по установке: https://tanstack.com/query/latest/docs/framework/react/installation

React Query также освобождает нас от написания запросов в useEffect и даёт обширный набор инструментов взаимодействия с состоянием и валидацией запросов.

Перепишем наш код уже с использованием React Query:

useFetch удаляем за ненадобностью, useQuery позаботится за отслеживание состояния запроса вместо нас.

В корневом файле создадим клиент react-query:

/App.jsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import YourComponent from "./app/YourComponent";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 10000,
    },
  },
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </ QueryClientProvider>
  );
}

Внутри QueryClient мы можем задать базовые настройки, которые будут по умолчанию использовать все запросы useQuery. В данном случае мы задали по умолчанию staleTime равный 10000.

staleTime - время в миллисекундах, через которое данные считаются устаревшими. При надобности, мы можем прописать отдельным хукам свои значения staleTime.

Подробнее о QueryClient: https://tanstack.com/query/latest/docs/reference/QueryClient

Используем useQuery в наших хуках:

/hooks/usePost.jsx

import axios from "axios";
import { useQuery } from "@tanstack/react-query";

export const usePost = ({ postId }) => {
  return useQuery({
    queryKey: ["post", postId],
    queryFn: async () => {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/${postId}`,
      );
      return data;
    },
  });
};

/hooks/useTodo.jsx

import axios from "axios";
import { useQuery } from "@tanstack/react-query";

export const useTodo = ({ todoId }) => {
  return useQuery({
    queryKey: ["todo", todoId],
    queryFn: async () => {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/todos/${todoId}`,
      );
      return data;
    },
  });
};

Компонент YourComponent не поменялся, так как useFetch возвращал похожие на useQuery поля.

Подробнее о useQuery: https://tanstack.com/query/latest/docs/framework/react/reference/useQuery

Пример с использованием invalidateQueries в React Query

Представим ситуацию, в которой после отправки POST запроса с созданием поста нам нужно обновить список всех постов.

Данный функционал можно реализовать с помощью React Query не прибегая к использованию useEffect в компоненте.

Создадим хук usePosts, через который будем получать посты:

/hooks/usePosts.jsx

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

export const usePosts = () => {
  return useQuery({
    queryKey: ["posts"],
    queryFn: async () => {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/posts/`,
      );
      return data;
    },
  });
};

Создадим хук useCreatePost, с помощью которого будем создавать посты:

/hooks/useCreatePost.jsx

import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";

export const useCreatePost = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationKey: ["create-post"],
    mutationFn: async ({ postTitle }) => {
      const { data } = await axios.post(
        `https://jsonplaceholder.typicode.com/posts`,
        {
          title: postTitle,
        },
      );
      return data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["posts"] });
    },
  });
};

useMutation - хук, обеспечивающий удобный способ выполнения мутаций, таких как создание, обновление или удаление данных, и автоматическое управление состоянием загрузки, ошибок и результата мутаций.

queryClient.invalidateQueries используется для инвалидации (очистки) кэшированных данных для указанных запросов. При вызове этой функции React Query удаляет данные из кэша для указанных запросов, что приводит к их повторному выполнению при следующем обращении к данным. Довольно удобный механизм для обновления кэшированных данных, обеспечивающий актуальность информации. В массив queryKey передаём ключь запроса, который хотим инвалидировать после мутации.

Подробнее о useMutation: https://tanstack.com/query/latest/docs/framework/react/reference/useMutation

Подробнее о queryClient.invalidateQueries: https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientinvalidatequeries

Используем только что созданные хуки в компоненте:

/YourComponent.jsx

import React, { useState } from "react";
import { useCreatePost } from "./hooks/useCreatePost";
import { usePosts } from "./hooks/usePosts";

const YourComponent = () => {
  const [postTitle, setPostTitle] = useState("");
  const {
    data: postsData,
    isLoading: isPostsLoading,
    isError: isPostsFailed,
  } = usePosts();

  const createPost = useCreatePost();

  const submitPost = () =>
    createPost.mutate({
      postTitle,
    });

  return (
    <div>
      <input value={postTitle} onChange={(e) => setPostTitle(e.target.value)} />
      <button onClick={submitPost} disabled={!postTitle.length}>
        Создать пост
      </button>
      {isPostsLoading && <p>Loading...</p>}
      <pre>{postsData && JSON.stringify(postsData, null, 2)}</pre>
      {isPostsFailed && <h1>Не удалость загрузить статьи</h1>}
    </div>
  );
};

export default YourComponent;

Отправка запросов с помощью хука use в React 19

В новой версии React появится возможность делать запросы без использования useEffect!

Пример использования use из документации:

import { use } from 'react';

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

Подробнее про use можно почитать в официальной документации.

Итоги

Внимательно планируйте и структурируйте ваши компоненты, чтобы избежать спагетти и кучи ошибок. Поддерживайте чистоту кода, разделяйте логику, группируйте компоненты по функциональности и следите за четкими зависимостями между ними.

Спасибо за внимание!