#I don t get wtf is happening I m

1 messages · Page 1 of 1 (latest)

agile heron
#

'use client';
import React, { useEffect, useState } from 'react';

export default async function Home() {
const [wtf, setWtf] = useState<any>([['test']]);

useEffect(() => {
setWtf('nooooo');
}, []);

return <pre>{wtf}</pre>;
}

vagrant vapor
#

Why is it an async function?

#

Maybe delete the async and try again

agile heron
#

oh wat 😂

#

man I been stressing over this for like 2 hrs how

vagrant vapor
#

Glad that it is over

agile heron
#

and i didn't notice the async

#

thanks >.<

#

😄

#

I'm curious now how the async makes a difference in next's internals

#

but that's for another day

vagrant vapor
warped mauve
#

That's a React internal. Client components cannot be async at the moment and cause VERY erratic behavior.

vagrant vapor
#

Async functions return promises rather than the usual data type of a React component, so unless there is some weird wizardry I never heard of, I can't think of a way that it could possibly work

#

Especially in the client side, at least in the server side Next.js is compiling so it can do some pretty weird stuff

warped mauve
#

It kind of works already, but it's not to be used right now

vagrant vapor
#

Oh, okay

#

That is good news, I don't want to have to use the React-Async library every time I fetch something

warped mauve
#

The thing is that asynchronous client-side components are pretty useless and have a bunch of possible caveats that haven't even been fully explored yet.

vagrant vapor
#

It is a must if the client has to request additional data from the server after the initial page load, no?

warped mauve
#

Then you just continue using SWR and react-query for client-side data fetching which is a million times better than manually fetching things

#

Because you get tons of features out of the box you'd have to implement yourself

#

Caching, invalidation, revalidation on certain events, abort controllers, retries etc.

vagrant vapor
warped mauve
#

And reactive updates about the current state

vagrant vapor
warped mauve
#

No, it's not

vagrant vapor
#

Oh, okay

warped mauve
#

Anyways, wrapping up this conversation: async client components have no value right now, it's unclear whether it will be a stable thing in the future and that's it.