I really hope your channel blow up soon. It is really special to see someone with your level of experience willing to share all the knowledge acquired. You are truly a blessing for the community, I wish you the best, Jack!
Thank you so much Jack. I've been using swr for a while but didn't know about these hacks. After watching the video, I was concerned about the Web Worker example so I went experimenting. I found that, the swr version of this example can also be written like this:
mutate(() => multiplyNumbers({ a: valueA, b: valueB }), { revalidate: false, }) } > Multiply That is, the mutate function from calling useSwr also accepts a callback fn that returns a promise. Thanks again for this video.
Jack your videos have been an inspiration to me and I wouldn't have been able to make this huge career transition into Web Development if not for coders like you who post these free instructional videos for everyone. I'm 41 and just started my first Web Development job 3 months ago. I've wanted to start making youtube videos so I too could give back something to this community that has helped me make a career change that will affect my kids' future. Thank you so much Jack, and I wish you and your family the best.
For global state management I have RQ for server state. I have a ViewConext for toasts, modals, errors... and a AuthContext. So they have their isolated purpose. I also use Valtio, which I am a big fan of. I liked to say that using multiple state management tools at the same time is not a crime. Cause you can make sure that each has their own purpose. And also each can be separated - eg multiple valtio stores or multiple react contexts or different finite state machines. Using state management libraries is essentially choosing among a tool-box of patterns to choose for the right job. (Or if you don't have a job yet, but quickly want to store something globally - I like to use a "generalStore" in valtio) BUT the thing is - they can get tangled with each other. Especially with local React state. It can get confusing when you have different UI state shared among components. Do you keep it local and pass it down? Do you put it into the corresponding valtio store? Should I just put everything that is related to the "section" functionality into my sectionUIStore? Or try to entertain the low priority motivation of keeping state as local as possible. (let's face it - who needs reusable components anyway? just copy-paste to create a new one) Then you bring in React Query, thinking: "this is just for server state". But what if you are building and using an object in a component (or some global store) and you’re not sending it (back) to your server until the object is ready? A simple example of this would be a form. There is a motivation to keep it inside the QueryClient Cache. So the idea is to setQueryData("correctKey"). But you also need to make sure the the useQuery("correctKey") is not overwriting it. Or you temporarily bring the state away from React Query into local state before mutating the server. As soon as I also had to bring in a state machine to handle a part of the "section" functionality, the ball dropped. The state machine has its own context. But it is dependent on local state AND on state within the valtio sectionUIStore. This is too much. This is not "keep it simple stupid". My problem is less with those external tools. But more with the fact that local react state is entangled with it all. The idealist in me is both happy that React is very unopinionated about many things and lets the ecosystem compete for better solutions. But also frustrated that there is no one-place-to-rule-all-state. Including server state. I would like to question the general motivation to keep state local.
Happy to see you were able to find some time to produce another informative video. I wanted to let you know I'm giving blood Thursday. I do it once a year, but now after watching the first few minutes of your video I'm considering doing it more often. Stay strong Jack, the world needs more men like you. ❤to your family.
Got your channel recommended, and I’m blown away by your quality content. Well explained, good sound, not too basic. All in all great content. Keep it up! And to you and your wife - get well soon!
Really great video Jack! Thoughts go out to you and your wife. I personally have worked with Apollo Client for global state management. Works really well! Started out with Redux toolkit, but had to optimize bundlesize and this was a straightforward solution, as I already used Apollo Client for data fetching.
Really Amazing. A suggestion can you please make the same video using rtkquery. The same sequential is quite hard with rtkquery as well as dynamic fetching like you have a component that fetch based on the props from different endpoints
Thank you for useful tips! But a small correction on 14:10, functor is not a function that creates functions. Function that creates functions (or takes functions as arguments or both) is a higher order function. A functor is a container of some type T that, when subjected to a function that maps from T→V, yields a container of type V. A simple examples of functors can be Arrays or Lists, more sophisticated ones are Futures(aka Promises) or Options(fancy nullable containers).
I love you Jack!!! Your video content covers everything that is typically not available for free. Moreover, we get an insight of mindset of an experienced engineer. I will pray for you and your family in my Friday prayer!!
Man I found your channel a few days ago and I loved it. You're awesome! Like someone else said, make a course for senior developers, covering complex and big projects, where the starting point of the course is to actually download a big template file with structures similar to that we get in the industry, from git workflow to typescript, I would definitely pay at least $50 dollars for that and I'm just thousands of others would too. Good luck with everything!
Thank you, Jack, seriously man from the bottom of my heart, your tutorials helped me become a way better developer, thank you and please continue doing that, if you have a paid course one day I will definitely buy it.
I love the idea of using react-query as a global state manager. I'd like to experiment with it. I thought it specifically had to be fed an async function as the data source..
Hi @jack, really appreciate your hard work. I watch your videos most of the time and it is really helpful. Please keep updating the new videos. Hope your wife will get well soon.
At work, we have to make 4 requests in order to get all the info needed to display a list. Only the first one is mandatory and will cause the app to display an empty state if it fails, the other 3 have logic and verifications to be made before the requests are made and add data to the list returned from the first request, we also want the data from those requests to be available in different components/hooks. At first, I thought the "single await function" approach was enough but the further I dig into the old code, the more I think that creating a giant "useMultipleQueries" hook is the way to go, despite being a pain in the ass to write.
I think a single react-query might still work since you can put it in a shared hook and then reuse that hook and I _think_ react-query will reuse the result because the name of the query is the same.
Do you think you care to deep deeper about profiling or something like optimization? Like when is the bare minimum condition we should start to use React.memo (or probably useCallback, useMemo, etc) or probably something like that? I still find this topic really interesting but has less resources to learn especially on how do we debug using Profiler at its fullest ability. Thanks as always!!
Very interesting video! Would love to see a new video about swr 2.0:) also, I’m very curious about the global state part, many suggested that it’s rather a server state manager than a client (UI) state manager. What is your take on this? Should I combine with other client state manager for complex application? If so, do you have experience which one is the best to integrate with swr and nextjs?
Great ideas you have here. It make me want to explore some more :). btw why are you still using cra instead of vite based react? Thanks and hope the best for your family
How does using the query client to set data effect component rendering? The QueryClientProvider wraps the entire application, which leads me to believe the entire app would re-render when setting data.
Hi, in the stopwatch example, createStopwatch function. Why do we want createStopwatch to return a function, instead of just returning the calculation?
Because we need a function that you can call to get the current time. And not just the current time at the point at which we created the timer, which would always be zero.
Hi Jack, thank you for your video. I have a question about GlobalState example, how to get the initial value for react-query version? If I do {enabled: false} that function is not gonna run so the initData cannot be populated.
I switch back and forth between yarn, npm, and pnpm fairly regularly now. They all have roughly the equivalent feature set and performance as far as the features that I use.
Can you please explain that how will you start learning new stuffs, also how you find these learning asking about research for particular task... Pls reply sir
I got a question and I haven't seen anyone ask. For GlobalState.tsx line 7 (video 38:00). If you pass the key and initData but use a hard-coded key instead of using key props, what is the point of passing the key? Or if I miss something? Thank you for your awesome tutorials as always.
Awesome video as always Jack. My thoughts are with you and your wife 🙏❤️❤️🙏 Q: how did you get the geolocation navigator API to work on your localhost 🤯 i once got stuck while working with it because the docs says it only works over HTTPS and not HTTP (which I reckon localhost is) ?
I am using react query to fetch data, I want to combine it will some kind of offline storage. What will be the best way to do it? Should I use asyncstorage or SQLite and how can I combine it for better control on data.
Thanks for great content!! Can you make a video on micro front end where react component is exposed wich is dependent on redux store and middle wares such as redux saga???
Nope. I'm not going to do that because, as I believe we have discussed,. I don't think it's a good idea to have a large shared Redux store between MFEs.
I am already using Zustand for global state management and now I am implementing React Query, what do I do? It is a very big project as well. Upon that, it says that onSuccess, onError and onSetteled are deprecated, so I am conflicted to how do I set query fetched data to zustand states, do I use useEffect again, which again defeats the purpose of using react query and worry about setState in useEffect. what is the best way to approach this. Thanks in advance.
So that it doesn't re-run the query function to update the cache, which resets the value to its initial value. My bad, I'm sorry, I realized late that I didn't cover that.
With NextJS the multiple request thing becomes a lot easier as it's just the implementation of getServerSideProps. That's a simple function and it doesn't have the same hooks based architecture as a component. So you can just make multiple requests, await them, and then finally return the props to the component, and so the multiple request thing is naturally simplified there.
@@StringSwoosh Feel free to ask your question on the DIscord server discord.gg/5juHmkzn . Be sure to follow the #rules and be prepared to talk about what you have tried so far.
I really hope your channel blow up soon. It is really special to see someone with your level of experience willing to share all the knowledge acquired. You are truly a blessing for the community, I wish you the best, Jack!
Prayers for you and your wife, Jack...🙏
Thank you for everything you do.
The community, myself especially,
is all the better for your presence.
Cheers
Thank you so much Jack.
I've been using swr for a while but didn't know about these hacks.
After watching the video, I was concerned about the Web Worker example so I went experimenting. I found that, the swr version of this example can also be written like this:
mutate(() => multiplyNumbers({ a: valueA, b: valueB }), {
revalidate: false,
})
}
>
Multiply
That is, the mutate function from calling useSwr also accepts a callback fn that returns a promise.
Thanks again for this video.
Stay strong brother! God bless you and your wife!
Thank you Jack for all the special videos on React. I really hope and pray for the good health, prosperity and well-being of you and your family.
Jack your videos have been an inspiration to me and I wouldn't have been able to make this huge career transition into Web Development if not for coders like you who post these free instructional videos for everyone. I'm 41 and just started my first Web Development job 3 months ago. I've wanted to start making youtube videos so I too could give back something to this community that has helped me make a career change that will affect my kids' future. Thank you so much Jack, and I wish you and your family the best.
That's really great! Thank you so much for watching and good luck in your career!
You are helping a lot of junior/senior reactjs devs around the world. I just wanted to so my appreciation for your work. Thanks.
For global state management I have RQ for server state.
I have a ViewConext for toasts, modals, errors... and a AuthContext. So they have their isolated purpose.
I also use Valtio, which I am a big fan of.
I liked to say that using multiple state management tools at the same time is not a crime. Cause you can make sure that each has their own purpose. And also each can be separated - eg multiple valtio stores or multiple react contexts or different finite state machines. Using state management libraries is essentially choosing among a tool-box of patterns to choose for the right job.
(Or if you don't have a job yet, but quickly want to store something globally - I like to use a "generalStore" in valtio)
BUT the thing is - they can get tangled with each other.
Especially with local React state.
It can get confusing when you have different UI state shared among components. Do you keep it local and pass it down? Do you put it into the corresponding valtio store? Should I just put everything that is related to the "section" functionality into my sectionUIStore? Or try to entertain the low priority motivation of keeping state as local as possible. (let's face it - who needs reusable components anyway? just copy-paste to create a new one)
Then you bring in React Query, thinking: "this is just for server state".
But what if you are building and using an object in a component (or some global store) and you’re not sending it (back) to your server until the object is ready?
A simple example of this would be a form.
There is a motivation to keep it inside the QueryClient Cache. So the idea is to setQueryData("correctKey"). But you also need to make sure the the useQuery("correctKey") is not overwriting it. Or you temporarily bring the state away from React Query into local state before mutating the server.
As soon as I also had to bring in a state machine to handle a part of the "section" functionality, the ball dropped. The state machine has its own context. But it is dependent on local state AND on state within the valtio sectionUIStore. This is too much. This is not "keep it simple stupid".
My problem is less with those external tools.
But more with the fact that local react state is entangled with it all.
The idealist in me is both happy that React is very unopinionated about many things and lets the ecosystem compete for better solutions. But also frustrated that there is no one-place-to-rule-all-state. Including server state. I would like to question the general motivation to keep state local.
Happy to see you were able to find some time to produce another informative video. I wanted to let you know I'm giving blood Thursday. I do it once a year, but now after watching the first few minutes of your video I'm considering doing it more often. Stay strong Jack, the world needs more men like you. ❤to your family.
Thank you so much. Hearing that you will donate blood gave my wife a tear of joy.
I just started with react-query and this video is gold. Thank you, thank you, thank you 😊
Got your channel recommended, and I’m blown away by your quality content. Well explained, good sound, not too basic. All in all great content. Keep it up!
And to you and your wife - get well soon!
Really great video Jack! Thoughts go out to you and your wife.
I personally have worked with Apollo Client for global state management. Works really well!
Started out with Redux toolkit, but had to optimize bundlesize and this was a straightforward solution, as I already used Apollo Client for data fetching.
This is an awesome video! I worked with SWR on a project several months ago and it came to be very handy!
Really Amazing. A suggestion can you please make the same video using rtkquery. The same sequential is quite hard with rtkquery as well as dynamic fetching like you have a component that fetch based on the props from different endpoints
Thank you Jack,
Prayers for your family and your wife.
Thank you! She is doing a lot better!
Thank you for useful tips! But a small correction on 14:10, functor is not a function that creates functions. Function that creates functions (or takes functions as arguments or both) is a higher order function. A functor is a container of some type T that, when subjected to a function that maps from T→V, yields a container of type V. A simple examples of functors can be Arrays or Lists, more sophisticated ones are Futures(aka Promises) or Options(fancy nullable containers).
Fair enough. My mistake.
You're the man. I've been using react and react-query since their releases but learned something today!
I love you Jack!!! Your video content covers everything that is typically not available for free. Moreover, we get an insight of mindset of an experienced engineer. I will pray for you and your family in my Friday prayer!!
Respect for providing the article link in the description. Also, thank you for these informative videos!
Man I found your channel a few days ago and I loved it. You're awesome! Like someone else said, make a course for senior developers, covering complex and big projects, where the starting point of the course is to actually download a big template file with structures similar to that we get in the industry, from git workflow to typescript, I would definitely pay at least $50 dollars for that and I'm just thousands of others would too. Good luck with everything!
Glad to hear your wife recovering! Thanks for the awesome content!
Such a good tutorial. It's amazing to see how things got improved in React world in last 5 years
Thank you, Jack, seriously man from the bottom of my heart, your tutorials helped me become a way better developer, thank you and please continue doing that, if you have a paid course one day I will definitely buy it.
Very nice walkthrough, Jack. I wish you and your family the best ❤️
Thank you for empowering us developers to be the developers we want to be.
This is so out of the box and imaginative. Awesome
React Query is an amazing resource, which I didn't know before ... Thanks Jack as always 😊
Prayers for you guys. Thank you for the content and service you continue to provide 🙏🏾
I love the idea of using react-query as a global state manager. I'd like to experiment with it. I thought it specifically had to be fed an async function as the data source..
Hi @jack, really appreciate your hard work. I watch your videos most of the time and it is really helpful. Please keep updating the new videos. Hope your wife will get well soon.
hey, you might be working with the same backend guys im with because this IS exactly how they model APIs 🤣 once again, nailed it. thank you so much
As usual Jack, excellent content, hope your wife gets better soon man! Sending prayers champ
Wish you the best, thanks for your time, really appreciated Jack. Thanks for sharing
At work, we have to make 4 requests in order to get all the info needed to display a list. Only the first one is mandatory and will cause the app to display an empty state if it fails, the other 3 have logic and verifications to be made before the requests are made and add data to the list returned from the first request, we also want the data from those requests to be available in different components/hooks. At first, I thought the "single await function" approach was enough but the further I dig into the old code, the more I think that creating a giant "useMultipleQueries" hook is the way to go, despite being a pain in the ass to write.
I think a single react-query might still work since you can put it in a shared hook and then reuse that hook and I _think_ react-query will reuse the result because the name of the query is the same.
I have learned a lot from your videos, and I always look forward to new ones. Thank you and best of my wishes to you and your family.
Thanks! To you as well!
thinking outside the box and having fun. Love it XD
THE BEST channel I've seen in this website
Woah the SWR global cache is super clever
Great content! Thank you and I'm sending more positive energy back!
Thank you for the great content. Sending lots of ❤️ and healing to your family.
awesome content as always. much love to you and your wife, im glad she is getting better
Do you think you care to deep deeper about profiling or something like optimization?
Like when is the bare minimum condition we should start to use React.memo (or probably useCallback, useMemo, etc) or probably something like that?
I still find this topic really interesting but has less resources to learn especially on how do we debug using Profiler at its fullest ability.
Thanks as always!!
Take care and be strong
Thank you jack, for every awesome video, you are a good man, Prayers for you
Your channel is gem for us 💎💎
Hey Jack. Dig your videos. Can you do one about Hasura?
Great video, again! We don't deserve content this good lol Please keep it up!
Thanks a lot, Jack. Great video as per usual
You are a good person :) Thank you for everything you do too
Very interesting video! Would love to see a new video about swr 2.0:) also, I’m very curious about the global state part, many suggested that it’s rather a server state manager than a client (UI) state manager. What is your take on this? Should I combine with other client state manager for complex application? If so, do you have experience which one is the best to integrate with swr and nextjs?
Great ideas you have here. It make me want to explore some more :). btw why are you still using cra instead of vite based react? Thanks and hope the best for your family
Thanks! About vite, habit mainly.
Excellent content!
Side question: what do you use in some of your videos to draw on top of your screen/code? Like in the trpc video.
I use Screenbrush and a commodity drawing tablet from Gaomon.
As usual, very helpful content!. Thanks!!
How does using the query client to set data effect component rendering? The QueryClientProvider wraps the entire application, which leads me to believe the entire app would re-render when setting data.
My guess is that any useQuery will check on any provider changes and will force a re-render if the corresponding key has changed.
Hi, in the stopwatch example, createStopwatch function. Why do we want createStopwatch to return a function, instead of just returning the calculation?
Because we need a function that you can call to get the current time. And not just the current time at the point at which we created the timer, which would always be zero.
watched it to the end!
I am so sorry Jack. You and family are in my prayers
So sorry to hear about your wife. My prayers to you and your family.
I adore you Jack, prayers to you and your wife.
Hope to watch a video about fresh and deno soon
Hi Jack, thank you for your video. I have a question about GlobalState example, how to get the initial value for react-query version?
If I do {enabled: false} that function is not gonna run so the initData cannot be populated.
Yeah, that's why I do the data ?? initialData. Actually, I think I forgot that in the code. Do `.data ?? initialData`.
@@jherr got it.
Great video man, I love your videos
God bless you and your family !
Hello sir, I hope all is good, I just wanted to ask, why are you using Yarn instead of npm ? just curious
Thanks for the great content
I switch back and forth between yarn, npm, and pnpm fairly regularly now. They all have roughly the equivalent feature set and performance as far as the features that I use.
@@jherr was doing the same , and i do not find any good reason to pick one in particular
Can you please explain that how will you start learning new stuffs, also how you find these learning asking about research for particular task... Pls reply sir
Thank you very much Jack
Please what font do you use for the vscode
All the best for your wife and yourself/friends/family!
Hi Jack. What do you prefer? SWR or ReactQuery?
great video as always. I just would like to remind to not show personal info like your real coordinates.
Twenty-two houndred is equal to 2200? My mind just boom.
Pd. Great video 🤟🏼
May God bless you and your family all the time..
I got a question and I haven't seen anyone ask. For GlobalState.tsx line 7 (video 38:00). If you pass the key and initData but use a hard-coded key instead of using key props, what is the point of passing the key? Or if I miss something? Thank you for your awesome tutorials as always.
I dont understand what does react-query add, for fetching data... can you explain?
Awesome video as always Jack. My thoughts are with you and your wife 🙏❤️❤️🙏
Q: how did you get the geolocation navigator API to work on your localhost 🤯 i once got stuck while working with it because the docs says it only works over HTTPS and not HTTP (which I reckon localhost is) ?
Yeah, there was an alert for me the first time, but after that it worked.
Okay 👍
I am using react query to fetch data, I want to combine it will some kind of offline storage. What will be the best way to do it? Should I use asyncstorage or SQLite and how can I combine it for better control on data.
Copilot is fun 🤘
Thank you, Jack! I hope that from all of my heart your wife to come back to a such of good MAN! God bless you both!
She is doing a lot better. Thank you for the well wishes.
@@jherr I’m very happy to hear that!
Another great video, thank you!
Thanks for great content!!
Can you make a video on micro front end where react component is exposed wich is dependent on redux store and middle wares such as redux saga???
Nope. I'm not going to do that because, as I believe we have discussed,. I don't think it's a good idea to have a large shared Redux store between MFEs.
I am already using Zustand for global state management and now I am implementing React Query, what do I do? It is a very big project as well. Upon that, it says that onSuccess, onError and onSetteled are deprecated, so I am conflicted to how do I set query fetched data to zustand states, do I use useEffect again, which again defeats the purpose of using react query and worry about setState in useEffect. what is the best way to approach this. Thanks in advance.
My thoughts go out to you and you wife. she will come out strong. Thank you for your selflessness
20:40 why don't just return log instead of a function that returns log?
Because if useQuery called subscribeToLog over and over again it would create a new timer and a new log each time.
great content 🎉
Hey Jack, you didn't really explain why enabled to be be false in State Management use case. Can you please explain it? Thanks
So that it doesn't re-run the query function to update the cache, which resets the value to its initial value. My bad, I'm sorry, I realized late that I didn't cover that.
Thanks for the great video
Thank you so much Jack I do hope you make an advance React/Next Js course. I would glad to pay and subscribe if ever you will made that :)
Wow! Thank you so much!
amazing great shared knowledge, thanks man!
Oh gee. You are such a good person Jack. I hope the wife is ok.
She is fully recovered and doing great. Thank you so much for asking!
Should we do the same thing in next js if we have multiple query request?
With NextJS the multiple request thing becomes a lot easier as it's just the implementation of getServerSideProps. That's a simple function and it doesn't have the same hooks based architecture as a component. So you can just make multiple requests, await them, and then finally return the props to the component, and so the multiple request thing is naturally simplified there.
@@jherr Thank You, Jack
"Bob is your uncle" that cracked me up
Any know what theme he's using? Looks dope
Night Wolf [black] usually with Operator Mono or JETBrains Mono
Fantastic!!!
Thanks so much❤❤❤❤
So nice , some approach to use react-query with graphql?
Oh yeah, that all works. graphql is really just a different way of formatting the request payload.
@@jherr nice to know I didn’t but I need to test hahah maybe it is good theme for video haha
Hi Jack, can you tell me your code autocomplete's name?
Github Copilot.
new hair style!
Please use reat with typescript from next video
Are you going to pay for github copilot ? Cuz its free for 3 weeks now
I am actually. But my React Round Up co-hosts are not going to, so... opinions vary.
Is it possible to have 2 useSWR requests on the same route? I get conflicting data when i use 2 useSWR in different files
Use a custom hook that wraps the useSWR hook.
@@jherr I wonder how to do this, do you have a written article or visual representation of it? :)
@@StringSwoosh Feel free to ask your question on the DIscord server discord.gg/5juHmkzn . Be sure to follow the #rules and be prepared to talk about what you have tried so far.
@@jherr Thanks! Got it working now, but will join the Discord nonetheless. Peek my head in a bit
Hello, do you mind check your podcast link? I will be happy to listen to your podcast :)
Here is a link to the React Roundup Podcast topenddevs.com/podcasts/react-round-up