Какая разница между серверными данными и state приложения?

const initialState = {
    error: false,
    fetch: false,
    data: ...,
};

Кэш данных

Разберем на примере библиотеки react-query , но есть и аналоги

• data — сами данные;

• isLoading — флаг, показывающий, загружены ли данные;

• isError — ошибку, если она есть.

const GET_DOGS_URL = 'https://some-cool-api/dogs'

function Dogs({ onDogSelected }) {
  const { isLoading, isError, data } = useQuery(GET_DOGS_URL);

  if (isLoading) return 'Loading...';
  if (isError) return 'Error!';

  return (
    <select name='dog' onChange={onDogSelected}>
      {data.dogs.map((dog) => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

const initialState = {
  loading: false,
  error: null,
  todos: [],
};

{
  users: [...],
  todos: [...],
  helpMePlease: ...,
}

• Избежание дублирования запросов одних и тех же данных.

• Оптимистичные обновления, чтобы сделать пользовательский интерфейс более быстрым.

• Отслеживание состояния загрузки или состояния ошибки для отображения соответствующих элементов пользовательского интерфейса (loading, error, data).

• Управление временем жизни кэша при взаимодействии пользователя с пользовательским интерфейсом.

• Props drilling.

const initialState = {
  loading: false,
  error: null,
  todos: [],
};