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

To help you get started, we’ve selected a few react-suspense-fetch examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dai-shi / react-suspense-fetch / examples / 05_todolist / src / TodoList.tsx View on Github external
// 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>
github dai-shi / react-suspense-fetch / examples / 03_props / src / Item.tsx View on Github external
const Item: React.FC = ({ id, result }) =&gt; {
  run(result, id); // only effective for the first render
  return (
    <div>
      User ID: {id}
      
    </div>
  );
};
github dai-shi / react-hooks-fetch / src / createUseFetch.ts View on Github external
export const createUseFetch = (
  fetchFunc: FetchFunc,
  initialInput: Input,
) =&gt; {
  const prefetched = prefetch(fetchFunc, initialInput);
  const useFetch = () =&gt; {
    const [result, setResult] = useState(prefetched);
    const refetch = useCallback((input: Input) =&gt; {
      setResult(prefetch(fetchFunc, input));
    }, []);
    return { result, refetch };
  };
  return useFetch;
};
github dai-shi / react-suspense-fetch / examples / 02_typescript / src / Item.tsx View on Github external
const refetch = (nextId: string) => {
    setResult(prefetch(fetchUser, nextId));
  };
  return (
github dai-shi / react-suspense-fetch / examples / 01_minimal / src / index.js View on Github external
const onClick = () =&gt; {
    startTransition(() =&gt; {
      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>
github dai-shi / react-suspense-fetch / examples / 01_minimal / src / index.js View on Github external
const refetch = (id) =&gt; {
    setResult(prefetch(fetchFunc, id));
  };
  return ;
github dai-shi / react-suspense-fetch / examples / 02_typescript / src / App.tsx View on Github external
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 = () =&gt; (
  Loading...}&gt;
    {items.map(({ id, initialResult }) =&gt; (
      <div>
        
        <hr>
      </div>
    ))}
  
);

export default App;
github dai-shi / react-hooks-fetch / src / createUseFetch.ts View on Github external
const refetch = useCallback((input: Input) => {
      setResult(prefetch(fetchFunc, input));
    }, []);
    return { result, refetch };
github dai-shi / react-hooks-fetch / src / createUseFetch.ts View on Github external
useEffect(() => {
      if (initialInput !== undefined) {
        setResult(prefetch(fetchFunc, initialInput));
      }
    }, [initialInput]);
    const refetch = useCallback((input: Input) => {
github dai-shi / react-suspense-fetch / examples / 05_todolist / src / NewItem.tsx View on Github external
      setItems((prev) => [...prev, prefetch(createTodo, name)]);
      setName('');

react-suspense-fetch

A low-level library for React Suspense for Data Fetching

MIT
Latest version published 2 years ago

Package Health Score

45 / 100
Full package analysis