Реагировать на запрос и реагировать на контекст

React Query и React Context — две популярные библиотеки для управления состоянием в приложениях React. React Query — это библиотека для извлечения данных, которая позволяет легко извлекать данные из API и сохранять их в браузере. React Context — это способ обмена данными между компонентами в приложении React.

Итак, как React Query и React Context работают вместе?

Один из способов использования React Query и React Context — использовать React Query для извлечения данных из API и последующего сохранения данных в React Context. Это позволяет вам обмениваться данными с любым компонентом, который в них нуждается.

Например, допустим, у вас есть приложение, которое отображает список пользователей. Вы можете использовать React Query для получения списка пользователей из API, а затем сохранить список пользователей в React Context. Любой компонент, которому требуется доступ к списку пользователей, может получить данные из контекста React.

import React, { useContext } from 'react';
import { useQuery } from '@tanstack/react-query';

const UsersContext = React.createContext();

export const UsersProvider = ({ children }) => {
  const [usersQuery, { data, isLoading, error }] = useQuery('users', () => axios.get('/users'));

  return (
    <UsersContext.Provider value={data}>
      {children}
    </UsersContext.Provider>
  );
};

export const useUsers = () => useContext(UsersContext);

const App = () => {
  const users = useUsers();

  if (isLoading) {
    return <div>Loading...</div>;
  } else if (error) {
    return <div>Error fetching users</div>;
  } else {
    return <ul>{users.map((user) => <li key={user.id}>{user.name}</li>)}</ul>;
  }
};

Другой способ использования React Query и React Context — использовать React Query для извлечения данных из API, а затем использовать эти данные для обновления состояния компонента React. Например, допустим, у вас есть компонент, который отображает индикатор загрузки, когда данные извлекаются из API. Вы можете использовать React Query для получения данных, а затем использовать данные для обновления состояния компонента. Когда данные будут получены, индикатор загрузки будет скрыт, а компонент отобразит данные.

import React, { useState, useContext } from 'react';
import { useQuery } from '@tanstack/react-query';

const LoadingIndicator = () => {
  return <div>Loading...</div>;
};

const UsersList = ({ users }) => {
  return (
    <ul>
      {users.map((user) => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
};

const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [users, setUsers] = useState([]);

  const usersQuery = useQuery('users', () => axios.get('/users'));

  usersQuery.subscribe(({ data, isLoading }) => {
    setUsers(data);
    setIsLoading(isLoading);
  });

  return (
    <div>
      {isLoading ? <LoadingIndicator /> : <UsersList users={users} />}
    </div>
  );
};

Итак, какую библиотеку следует использовать?

React Query и React Context — мощные библиотеки, но у них есть свои сильные и слабые стороны. React Query лучше справляется с получением данных из API, а React Context лучше справляется с обменом данными между компонентами.

Если вам нужно получить данные из API, React Query — хороший выбор. Если вам нужно обмениваться данными между компонентами, React Context — хороший выбор.

Когда не следует использовать контекст в React

Есть несколько случаев, когда вы не должны использовать контекст в React.

• Если вам нужно обмениваться данными только между несколькими компонентами, то лучше передавать данные как свойства.
• Если данные, которыми вы делитесь, большие или сложные, то лучше использовать библиотеку управления состоянием, например Redux.
• Если вам нужно отслеживать изменения данных, то лучше использовать библиотеку управления состоянием, например Redux.

Заключение

React Query и React Context — мощные библиотеки для управления состоянием в приложениях React. У них разные сильные и слабые стороны, поэтому вы должны выбрать библиотеку, которая подходит для ваших нужд.