How to use react-suspense-fetch - 10 common examples

// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
import React, { useState, useTransition } from 'react';

import { prefetch } from 'react-suspense-fetch';

import { fetchTodos, TodoType } from './fetchFuncs';
import NewItem from './NewItem';

const initialItems = prefetch(fetchTodos, null);

const TodoList: React.FC = () => {
  const [startTransition, isPending] = useTransition({
    timeoutMs: 2000,
  });
  const [items, setItems] = useState(initialItems);
  const onClick = () => {
    startTransition(() => {
      setItems(prefetch(fetchTodos, null));
    });
  };
  return (
    <div>
      <button type="button">Refetch</button>
      {isPending &amp;&amp; 'Pending...'}
      <ul></ul></div>

const Item: React.FC = ({ id, result }) => {
  run(result, id); // only effective for the first render
  return (
    <div>
      User ID: {id}
      
    </div>
  );
};

export const createUseFetch = (
  fetchFunc: FetchFunc,
  initialInput: Input,
) => {
  const prefetched = prefetch(fetchFunc, initialInput);
  const useFetch = () => {
    const [result, setResult] = useState(prefetched);
    const refetch = useCallback((input: Input) => {
      setResult(prefetch(fetchFunc, input));
    }, []);
    return { result, refetch };
  };
  return useFetch;
};

const refetch = (nextId: string) => {
    setResult(prefetch(fetchUser, nextId));
  };
  return (

const onClick = () => {
    startTransition(() => {
      refetch('2');
    });
  };
  return (
    <div>
      <div>First Name: {result.data.first_name}</div>
      <button type="button">Refetch user 2</button>
      {isPending &amp;&amp; 'Pending...'}
    </div>
  );
};

const fetchFunc = async (userId) =&gt; (await fetch(`https://reqres.in/api/users/${userId}?delay=3`)).json();
const initialResult = prefetch(fetchFunc, '1');

const Main = () =&gt; {
  const [result, setResult] = useState(initialResult);
  const refetch = (id) =&gt; {
    setResult(prefetch(fetchFunc, id));
  };
  return ;
};

const App = () =&gt; (
  Loading...}&gt;
    <main>
  
);

ReactDOM.createRoot(document.getElementById('app')).render();</main>

const refetch = (id) => {
    setResult(prefetch(fetchFunc, id));
  };
  return ;

import React, { Suspense } from 'react';

import { prefetch } from 'react-suspense-fetch';

import Item from './Item';
import { fetchUser } from './fetchFuncs';

const items = [
  { id: '1', initialResult: prefetch(fetchUser, '1') },
  { id: '2', initialResult: prefetch(fetchUser, '2') },
  { id: '3', initialResult: prefetch(fetchUser, '3') },
];

const App: React.FC = () => (
  Loading...}>
    {items.map(({ id, initialResult }) => (
      <div>
        
        <hr>
      </div>
    ))}
  
);

export default App;

const refetch = useCallback((input: Input) => {
      setResult(prefetch(fetchFunc, input));
    }, []);
    return { result, refetch };

useEffect(() => {
      if (initialInput !== undefined) {
        setResult(prefetch(fetchFunc, initialInput));
      }
    }, [initialInput]);
    const refetch = useCallback((input: Input) => {

      setItems((prev) => [...prev, prefetch(createTodo, name)]);
      setName('');