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!
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.
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.
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.
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 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
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 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).
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.
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.
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..
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!!
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
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.
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.
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?
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 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.
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 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.
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.
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.
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.
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.
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.
Both SWR have additional features not provided by fetch (fetch on an interval, retries, etc.) Both have support for SSR. And both support non-fetch async requests. That being said, I'm not here to play the "why do you need it" game. Look at the feature set yourself. If you don't need it then don't use it. Just because you personally don't have need of it on your project doesn't mean that it is value-less to other developers.
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
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!
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.
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.
You are helping a lot of junior/senior reactjs devs around the world. I just wanted to so my appreciation for your work. Thanks.
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.
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.
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 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
I just started with react-query and this video is gold. Thank you, thank you, thank you 😊
This is an awesome video! I worked with SWR on a project several months ago and it came to be very handy!
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 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.
Respect for providing the article link in the description. Also, thank you for these informative videos!
You're the man. I've been using react and react-query since their releases but learned something today!
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.
Thank you Jack,
Prayers for your family and your wife.
Thank you! She is doing a lot better!
Such a good tutorial. It's amazing to see how things got improved in React world in last 5 years
React Query is an amazing resource, which I didn't know before ... Thanks Jack as always 😊
Very nice walkthrough, Jack. I wish you and your family the best ❤️
This is so out of the box and imaginative. Awesome
Take care and be strong
Glad to hear your wife recovering! Thanks for the awesome content!
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
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.
thinking outside the box and having fun. Love it XD
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!
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..
Great content! Thank you and I'm sending more positive energy back!
Thank you for empowering us developers to be the developers we want to be.
Prayers for you guys. Thank you for the content and service you continue to provide 🙏🏾
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.
Woah the SWR global cache is super clever
Wish you the best, thanks for your time, really appreciated Jack. Thanks for sharing
Thank you for the great content. Sending lots of ❤️ and healing to your family.
THE BEST channel I've seen in this website
awesome content as always. much love to you and your wife, im glad she is getting better
As usual Jack, excellent content, hope your wife gets better soon man! Sending prayers champ
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!!
watched it to the end!
Thank you jack, for every awesome video, you are a good man, Prayers for you
Thanks a lot, Jack. Great video as per usual
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.
I adore you Jack, prayers to you and your wife.
great video as always. I just would like to remind to not show personal info like your real coordinates.
Great video, again! We don't deserve content this good lol Please keep it up!
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.
Twenty-two houndred is equal to 2200? My mind just boom.
Pd. Great video 🤟🏼
Hey Jack. Dig your videos. Can you do one about Hasura?
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.
God bless you and your family !
So sorry to hear about your wife. My prayers to you and 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.
My guess is that any useQuery will check on any provider changes and will force a re-render if the corresponding key has changed.
Hope to watch a video about fresh and deno soon
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?
Your channel is gem for us 💎💎
"Bob is your uncle" that cracked me up
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
As usual, very helpful content!. Thanks!!
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!
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
May God bless you and your family all the time..
Thank you very much Jack
Please what font do you use for the vscode
I am so sorry Jack. You and family are in my prayers
My thoughts go out to you and you wife. she will come out strong. Thank you for your selflessness
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!
Great video man, I love your videos
Another great video, thank you!
great content 🎉
Any know what theme he's using? Looks dope
Night Wolf [black] usually with Operator Mono or JETBrains Mono
All the best for your wife and yourself/friends/family!
Thanks for the great video
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.
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!
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.
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.
Hi Jack. What do you prefer? SWR or ReactQuery?
new hair style!
Thanks so much❤❤❤❤
amazing great shared knowledge, thanks man!
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.
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.
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.
Fantastic!!!
Please use reat with typescript from next video
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.
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
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
gold!
that ending 😂😂😂😂😂😂😂
My question is why do u need react query? data is already there. fetch itself have 3 cache mechanism
Both SWR have additional features not provided by fetch (fetch on an interval, retries, etc.) Both have support for SSR. And both support non-fetch async requests.
That being said, I'm not here to play the "why do you need it" game. Look at the feature set yourself. If you don't need it then don't use it. Just because you personally don't have need of it on your project doesn't mean that it is value-less to other developers.
Thanks!
Wow! Thank you do much!
I dont understand what does react-query add, for fetching data... can you explain?