Realtime Features for React: Easier Than You Think

[@faizanahmed9304]

Thanks a lot! I was just looking the docs for pusher and was not understanding much and you've just dropped a video.

[@joshtriedcoding]

Been there, at first they confused me too

[@ammarys9980]

bro you just created a conclusion for their bad documents, that's hard to believe, YOU A LIFE SAVER.

[@NinjaNezie]

Needed this for a clock in system I’m building. Very nice tutorial 🔥.

[@wimi9640]

Clearer than the doc or Vercel tutorial, thanks !

[@malamhari_]

Thanks, this video is very helpful to grasp the basic of Pusher
Hope you do well onwards!

[@cameronmccoy2204]

Pppppp😊pp

[@mateuspaula_dev]

Good video, thank you very much for sharing your knowledge. I really hope you keep producing videos with the same intensity.
Best regards, all the best from Brazil 🇧🇷

[@joshtriedcoding]

Cheers man, appreciate you

[@krisbude9607]

nice video Josh. Just one thing... I wouldn't teach other developers to use a let in a react client component instead of the useState hook. In this particular case it works because you don't have any parent component. But it is really a bad practice and should not be used in a client component to maintain state.

[@JB2519]

Just curious will it not work if you wrap this let component with a parent component?

[@angzar]

Excellent Josh, great video as always. ...(ps. prisma format -> makes it so pretty)

[@jnayehsirine6222]

KEEP GOING !!!, you have such GOOOD content

[@iamasteriix]

"Hello and welcome to this video's content, accurately described by this video's title"

[@Subhamremady]

amazing bro. It was really something new for me . THnakss for the video

[@prototyperchan]

have you got a repo for reference? Curious how to set up the part where pusher talks to the db to preserve the state

[@joshtriedcoding]

Good call, will update that in the description

[@asimalqasmi7316]

@@joshtriedcoding waiting for the update 👍👍

[@joshtriedcoding]

@@asimalqasmi7316 It's available in the description now: github.com/joschan21/minimal-react-realtime

[@asimalqasmi7316]

I tried it myself before you sent the repo
It stumbled on useRouter in app page since it wasn't clear in the video until I figured out it was imported from navigation not router.
If you want to see my repo I'll share it here. 😁

[@josht29]

Great tutorial! But what if I have multiple channel I need to listen to? Do I need to create one useEffect per channel or put all listeners in one useEffect?

[@murphyvanoijen6190]

@Josh,
Great video again. Does this also work in NextJS 12?

[@astronaut22]

can we use pusher to implement ads campain feature like google ads, I mean showing users data as ad in queue in real time ?

[@siosaiafonua9286]

can react query do the same thing? provide real time updates?

[@crazytydoo]

I love the intros to these videos, very German 😆

[@AaronMcCloud_Me]

7:25 The real-time functionality

[@metaeducation6813]

thank you josh!

[@NhanNguyen-ng7vn]

Today, i'm creating a chat in my school'project, and i don't khow how to unsubcribe channel_name inside return callback of UseEffect. Thanks you !

[@TheDionysiac]

I'm not overly familiar with Prisma, but I was under the impression that you needed to set it up to work with a 3rd party DB service like Supabase or Planetscale. If so, which are you using in this project? If not, where is the database located?

[@filipjnc]

Any supported dbs and hosted anywhere.

[@acupofkoffi]

Hi. How long have you been learning web dev?

[@joshtriedcoding]

Gonna make a video on that soon :)

[@edihasrin7290]

hi josh,
Can you explain how to use SWR for realtime data. From the info I got on Twitter, it says it doesn't use third party services / web scoket.
i am very interested about that

[@tnctnctnctnc]

Have you got your answer ?

[@justin9494]

Can I use this with Strapi?

[@alexmagwe]

why dint you use useState for the input value?

[@joshtriedcoding]

no need to

[@hn3m3s1s]

Is it complex to setup a internal websocket on NextJS ?! 😢

[@joshtriedcoding]

Due to NextJS being serverless and WS requiring stateful connections, you can't. That's why I found this method so convenient, alternatively NodeJS with socket.io for small scale apps is totally fine too

[@hn3m3s1s]

@@joshtriedcoding Isn’t it that nextjs embed expressjs, and actually have a backend? The prisma calls for example are server side, right ?

[@joshtriedcoding]

@@hn3m3s1s Yes they are server-side. NextJS API routes use NodeJS, however, due to them being serverless, you don't have access to some APIs such as the file system. You can think of it as "every time my NextJS API gets called, I am 'renting' out a few seconds of a server's resources for this route to process the request".

[@hn3m3s1s]

@@joshtriedcoding Wuw, thanks for that! Very clear explanation and I understand now better how next works!

[@eeespartak]

@@joshtriedcodingWhy would you recommend it for small scale apps only? What better alternatives could you name for sth like a Java api + React/Next client?

[@whoisasey]

THANK YOU!! the Pusher docs were so trash.

[@haijomblo-rn8pl]

"use server" = prisma not api again 😢

[@yacine5046]

That's really good, but it's paid and limited. The free version is also limited

[@suaeb175]

Thanks 🙏

[@maximusrayvego2673]

jump to 7:24

[@ekchills6948]

Woow

[@KomlaWilson]

NOt helpful
Just showing your code