Note: If you want to support SSR/SSG for SEO, use framework specific api from React-router/Remix, Next.js or Gatsby.
For React version >=19
We now have nice loader and form action api:
Loading data:
function Comments({ dataPromise }) {
const data = use(dataPromise);
return <div>{JSON.stringify(data)}</div>;
}
async function loadData() {
return { data: "some data" };
}
export function Index() {
return (
<Suspense fallback={<div>Loading...</div>}>
<Comments dataPromise={loadData()} />
</Suspense>
);
}
Form actions
async function updateDataAndLoadNew() {
// update data
// load new data
// return new data
return { data: "some data" };
}
export default function Index() {
const [state, action, isPending] = useActionState(
async (prev, formData) => {
return updateUserAndLoadNewData();
},
{ data: "initial state, no data" } // can be null
);
if (state.error) {
return `Error ${state.error.message}`;
}
return (
<form action={action}>
<input type="text" name="name" />
<button type="submit" disabled={isPending}>
Do it
</button>
{state.data && <p>Data {state.data}</p>}
</form>
);
}
For React version >=18
Starting with React 18 you can also use Suspense, but it's not yet recommended if you are not using frameworks that correctly implement it:
In React 18, you can start using Suspense for data fetching in opinionated frameworks like Relay, Next.js, Hydrogen, or Remix. Ad hoc data fetching with Suspense is technically possible, but still not recommended as a general strategy.
If not part of the framework, you can try some libs that implement it like swr.
Oversimplified example of how suspense works. You need to throw a promise for Suspense to catch it, show fallback component first and render Main component when promise it's resolved.
let fullfilled = false;
let promise;
const fetchData = () => {
if (!fullfilled) {
if (!promise) {
promise = new Promise(async (resolve) => {
const res = await fetch('api/data')
const data = await res.json()
fullfilled = true
resolve(data)
});
}
throw promise
}
};
const Main = () => {
fetchData();
return <div>Loaded</div>;
};
const App = () => (
<Suspense fallback={"Loading..."}>
<Main />
</Suspense>
);
For React version <=17
I suggest to look at Dan Abramov (one of the React core maintainers) answer here:
I think you're making it more complicated than it needs to be.
function Example() {
const [data, dataSet] = useState<any>(null)
useEffect(() => {
async function fetchMyAPI() {
let response = await fetch('api/data')
response = await response.json()
dataSet(response)
}
fetchMyAPI()
}, [])
return <div>{JSON.stringify(data)}</div>
}
Longer term we'll discourage this pattern because it encourages race conditions. Such as — anything could happen between your call starts and ends, and you could have gotten new props. Instead, we'll recommend Suspense for data fetching which will look more like
const response = MyAPIResource.read();
and no effects. But in the meantime you can move the async stuff to a separate function and call it.
You can read more about experimental suspense here.
If you want to use functions outside with eslint.
function OutsideUsageExample({ userId }) {
const [data, dataSet] = useState<any>(null)
const fetchMyAPI = useCallback(async () => {
let response = await fetch('api/data/' + userId)
response = await response.json()
dataSet(response)
}, [userId]) // if userId changes, useEffect will run again
useEffect(() => {
fetchMyAPI()
}, [fetchMyAPI])
return (
<div>
<div>data: {JSON.stringify(data)}</div>
<div>
<button onClick={fetchMyAPI}>manual fetch</button>
</div>
</div>
)
}
data, then it changes toresponsewhen converting to json().The issue here is that the first argument of useEffect is supposed to be a function that returns either nothing (undefined) or a function (to clean up side effects).Does it mean "a function that returns either nothing, or, a function that returns a function that cleans up side effects", or "a function that returns nothing, or, a function that cleans up side effects"?