Criminally underrated. Short, sweet, and directly discusses the topic at hand. He gives you the critical information needed without wasting time with irrelevant boilerplate details. Bravo 👏
I love the way you explain things, extremely simplified. I develop in both, angular and react, as for backend mostly NestJS (Coming from Java to Python to NodeJS). I know a lot of what you say, but I watch to learn something new, I have adopted your style somehow. Thank you.
Didn't know about the observable-hooks library, since most of the stuff i've seen are about redux-observable but that was amazing. Thanks for the great content 😁
fyi RxJs by industry standard is used more than any other State Management library or frame work. We need more content. for example how you apply RxJs in a big application( folder structure(architecture) ,valid patterns, anti patterns, debugging, testing..)? Thank you for the awesome content! You rock!!!!
At my current job I am creating a highly interactive map application that uses a native Javascript library (leaflet), so I needed the reactivity and interactivity that integrates well into React, as well as just plain Javascript. I searched for hours, finally discovered RxJS lately and I got to say I am loving it. Having streams of data, combining them and having the whole application react to that (not only the React, but the javascript map part as well) is life changing. The first time I created a complex stream I felt like a genius, everything is so readable and all interactions flow so well. Also being able to separate the business logic of your application and the actual React UI components feels great. React was intended to be a UI library, and now all my React components are only concerned about the UI, with all the complex logic being written outside of them. If you need complex interactions with data (inside and outside of React), RxJS is a life saver. Coming from Redux even with Redux Toolkit, I am crying at how happy I am switching to RxJS. No more endless one liner actions, no more selectors and dispatch slugs. You can make RxJS as easy as Jotai or as complex as you want it to be.
Rxjs is bundle heavy. It’s also better used if you have more help in unsubscribe. Like the pipe async in angular that auto unsubscribes As it is right now , i don’t see the combo being practically effective.
Great video as always @Jack! More and more recently, I have seen the true power of RX and see how the observable pattern is so powerful (Svelte stores). Can we please see a video on SingleSPA server-side rendering and possibly even see if we can integrate NextJS into SingleSPA’s ecosystem. If not, even a demo on the recommended SingleSPA SSR integration would be awesome 😀
Thanks again for being very concise and provide this practical walkthrough on state management with rxjs, [...] Learning a lot from all these State Management series. I guess what I can get from it is that there are just subtle differences between which library we use to handle our app state. But to understand those core principles is better than relying on more complex lib... Will be awesome if a series on functional programming with typescript comes from this channel! Just core principles, perhaps Monads?
Thanks for the great video Jack! I don't know if it's my end or not, but the microphone was distorted (by means of being too loud) a lot in the video... Anyhow, would love to see some more nextJS, especially statically generating static content which is gated - or locked (meaning you need to be authenticated and authorized to see it)! Keep up the great videos!
would love to see more xstate, of all the packages i use with react/react-native, feel that one is the one i should get really good at, i see the benefits so much in area i use it. Maybe more on the Actor model etc
I would love to see RxJs used in combination with React-Query. You could demonstrate an example combining and filtering content feeds from an API. Or using RSS feeds from news sites that update very frequently so we can observe changes in the resulting feed live.
I can confirm this is a wildly powerful technique. I looked at useQuery and useMutation, they are just setting up subscribers that properly update react or force update. so i converted this logic into rxjs with subscriber.next etc, just replicating when react would update and trying to get same sequence of events. its amazing, i made it so that query options are passed in as stream, same with mutation observer. if the options change, the observer does not get thrown away, it is its own observable logic so i keep that around and just let it emit on changes. i can observe the state changes of a whole bunch of related API's and do derivations or side effects from them and its simplified logic like optimistic updating to be way easier. I set up an optimistic updating stream that uses scan to maintain an online reducer for all the api events that would change the entity being updated/read/created from a CRUD-api then you subscribe to that stream and there is your reduced state from side effects, no need for a global store or emitting event to represent the value somewhere else
Thank Jack. It's an amazing tutorial. Can you create another video that describes how you apply rxjs in the big application( folder structure , debugging, testing..)?
Really like the simple explanation on how to implement rxjs in a React project. I am just a little bit curious on the why part tho. What sort of project would you recommend rxjs over any other state management library? I really like how this works, but it does make a project much harder to understand for developers who don’t have any rxjs experience. When would you choose rxjs over just regular context or any other state management library? Also another question, what were there any more advantages in exporting the observables in the context instead of just importing them as constants?
Gotcha. Yeah, this video was a question about how to do it, and not about why to do it. So I wanted to cover a lot of the methodology bases. As for the why, it really depends on the nature of how data is modeled in your system. If you have real-time data then RxJS would be a good fit for that. But if you are looking to just do shared global data there are a lot of other simpler options for that, for example, recoil or jotai, would be good substitutes and would be a lot simpler. In fact, you could do the whole thing in custom hook/context combination since the entire tree needs to re-render on any state change anyway.
video request :). If you were going to start a brand new "next cool billion $ website" what would the first few hours looks like of development? How would you setup the project that you're going to do real work on for the next several years? What things would you put where? How would you build the login and that first page?
Thanks Jack, first time learning RxJS and this was the biggest help by far. One question, what do you think of the React-RxJS library vs Observable Hooks?
It is. And hooks does the reactive state management as well, if you get the hooks right. But if you need some global state (e.g. a shared shopping cart, or a count of pending chat messages), this is actually a pretty nice solve for that.
Yes, yes, yes and YES. All our microservices at work use Spring Boot webflux which is built on the Reactor Project. I've been wanting to experiment with an RxJS conversion of our web apps and this video will hopefully fill in some of the gaps in my understanding.
Thank you for your awesome videos! I have a tutorial recommendation. How to approach DDD or clean architecture in a more functional and JS idiomatic way to suit React applications. For example how to structure and implement the domain layer with immutable entities, use cases, the data layer such as repositories (here maybe a more OOP or imperative style), so to extract business logic from state management solutions such as xState for separation of concerns! That would be a great topic which I can't find good enough resources! Thank you!
Hi Jack, I have an application which is developed using (RTK + Redux Saga) I want to replace this with (Zustand and RxJs) is it feasible to implement side effect actions like we do it in Redux Saga?
Thank you for this nice tutorial. I think you could do everything demoed with just useState and derived states in react. I think those would be pure functions and easier to look at? What's the advantage of using rxjs?
@@jherr Awesome! Just applied to beta myself, hope to get accepted soon. It is a nice feature which at first I resisted, but seeing the potential for speeding up dev and making us more productive, I'd say, why not.
How often do you personally use reactive programming with Rx*, at work and personal projects? I'm wondering if it's used all that much and whether I should avoid learning it, because it seems to have a huge learning curve
I am always looking to use reactive programming, but I don't often use Rx to do that. Most often I'm doing reactive React hooks using the basic hooks (useState, useReducer, useEffect, useMemo and useCallback) with the dependency arrays.
@@tevoj It's not going to replace you. It takes a good engineer to know when to take the advice as-is, or take the advice and tweak it, or just ignore the advice. But it is helpful. And sometimes... it's scary right.
@@jherr Yes, watching your video felt more like..you know when you stop typing to search smth in google ˜trying to remember the syntax˜ and basically the copilot gives you the hint. But for me at least it was super cool because inside my head when you were typing I was like: ok he's gonna complete this AND the copilot showed you exactly that!!! hahaha so cool, jeez!
Having gone through this exercise my general sense is that RxJS is an event based state management system. From what I understand about React however, already is reactive in nature, and has its own state management system via React hooks. Is there any specific advantages that RxJS has over React hooks?
The RxJS subjects can be global. Which you can kind of do with context, but even then it's not global to non-React sources. But there are a bunch of different ways to do simple global reactive state (Recoil, Jotai, react-hooks-global-state, etc.)
Thanks for reminding me. That looks really cool, technically speaking. But I'm super wary of SSR, having come from doing Walmart and Nike which were both big SSR shops. SSR, even in different forms, comes with headaches over SSG and CSR. I'll definitely look at it though.
Please do a video on combining Redux-Toolkit with RxJS..! I've been developing in React for about two years, but before that I was working a lot with Angular - so I miss Observables a lot ^^
So... I'm not quite sure what that would look like. They are two different methodologies for state management and I'm not sure what the fusion would look like or how it would work. Could you elaborate a little?
@@jherr ...actually, the Redux toolkit currently covers everything I need for my daily work. But after seeing this video and this package (redux-observable) regarding async actions, I'm wondering if they can't just be combined in a meaningful way that creates a clear benefit - which I can't imagine at the moment as well : )
@@codehan Yeah, if I was going to do observables I'd probably just do something like MobX or Valtio and then do everything through that. I'm not super keen on mixing state managers. Unless you consider React Hooks a state manager. :P
I would love to see more content about nextjs (protected routes , i18n) there is no much content about these topics especially the auth and protected routes most content talking about auth from nextjs api routes and i real world project no one uses them most practices are about using an external api and separate your front from your back
@@armanmkhitaryan16 Just have a google around, it's actually pretty interesting. There are some environments that support it: kangax.github.io/compat-table/es6/ The issue appears to be that supporting it actually slows down none tail recursion code. So it's a chicken and egg problem, you have to get folks to write for tail recursion so the can us the feature but you have to do it while it's not supported, then enable, it, blah blah blah. Honestly, just another reason why JS is not a true FP language, and no FP language built on top of JS will be a true FP language.
Great question. There is GraphQL Code Generator (www.graphql-code-generator.com/) which looks pretty good, and there is also the Apollo code generator, which if you are doing the Apollo thing, would be my preferred first go-to. Personally I would start with Apollo and URQL and then see what "global" state they did not manage, and then figure out how to manage that remaining state. If it was something like identity and auth tokens I'd just use context. If it was something larger then I would use something like zustand or xstate.
@@nepalcodetv6298 That's just my take. :) The move to the Flux model was a push towards singleton state (i.e. "local state is evil"). Then hooks pushed us back the other way; "local state is ok/preferred." Now, IMHO, the trend is a combination of local state right where you need it, and a smaller set of shared globals. And in that world the big infrastructure of large scale global state management doesn't pay for itself. Why do I need something like Redux Toolkit, or Sagas, if all I'm sharing is user identity and the content of their shopping cart? (Just an example.) I can get by with something much smaller, e.g. valtio, zustand, recoil/jotai, shared state hooks, etc.
I'm maintaining a large legacy codebase at my job with react and rxjs and my god the code stinks. Every single logic is deeply coupled and nested with those rxjs apis, I had no idea whats was going on. Watching this tutorial I could understand what most of the main functions do, its going to help me a lot. Thanks Jack! And if there is anyone considering mixing rxjs with react, just know that there are much better options for state management now days.
Ouch. FWIW it’s a tough call on whether to pull this video or not, since on the one hand it’s helpful. On the other hand I don’t recommend RxJS for FE state management.
Bro please do latest (2021) crash course on 1.Angular 12 2- reactjs 3- nodejs- 4-- meanstack 5.mern stack 6-Real time project (product) development 7.Frontend development interview questions and answers
But at the end you ended up using RxJS with React, not React with RxJS, well only if you make global and local variables. I feel like is lost the purpose of using React and the philosophy of states IDK...
I'm not sure I understand the different between RxJS with React vs React with RxJS, is there something that covers the "philosophy of states" that I can look at? Basically this is doing what every state manager does with React. React components register listeners on the state, the state changes, that triggers the listeners, then listeners trigger a re-ender of the components. The state in this case just happens to be managed by RxJS.
@@jherr yeah, you are right. I think a little bit more and what happens is that is so common to almost always see the useState and useEffect hooks, so I felt that removing them is like removing a core functionality, but as you mentioned React is about re-rendering when there's changes. Also, I think a reason people like React is because all the logic is in one file and removing the logic part of the fetch requests makes it more abstract and harder to understand (that's for me 😅), but it looks cleanner and faster to read. Is the first time I see how is use RxJS with React, and I felt unsure if use this state manager or not, I guess only practicing it I would make a decision. 🙌
It's not always a performance killer. It's fine in this case. As it is with a map. Because you are creating a new object for every object in the array. The problem with spread in a reduce context is when you use it to build new versions of continuously growing object or array.
It maps an inputted value of type T to a value of type V. If you have an Employee class and you called .map(employee -> employee.getSalary()), it would transform each element using that function and create a new stream of just their salaries, which might be an integer type.
Rx js is great until you have to read it and understand it again in a year. Also good luck to the poor devs who inherit it. Lots of tools that manage things in a different way and would argue should only be used where absolutely nothing else does the job.
What is better then? You have local state in your usual useState hooks. Then if it is not enough, you can just create an observable and export/import it wherever you want. Global things are only bad if they are available everywhere unconditionally, but here you need to export/import the observable AND subscribe to it until it actually works. That is a lot different. You decide yourself what is global and what is not, you can make a local observable without exporting it. You just have the choice of using it wherever you want, but no one forces you to do so. tl;dr: Your comment is basically like saying: "Being able to go outside after 12pm doesn't seem like a positive thing. Haven't we agreed that having freedom = bad? You may encounter a robber or something at nights...".
Criminally underrated. Short, sweet, and directly discusses the topic at hand. He gives you the critical information needed without wasting time with irrelevant boilerplate details. Bravo 👏
this is the most underrated programming tutorial channel ...
I love the way you explain things, extremely simplified. I develop in both, angular and react, as for backend mostly NestJS (Coming from Java to Python to NodeJS). I know a lot of what you say, but I watch to learn something new, I have adopted your style somehow. Thank you.
Didn't know about the observable-hooks library, since most of the stuff i've seen are about redux-observable but that was amazing. Thanks for the great content 😁
You are very welcome. Thank you for the great idea.
fyi RxJs by industry standard is used more than any other State Management library or frame work. We need more content. for example how you apply RxJs in a big application( folder structure(architecture) ,valid patterns, anti patterns, debugging, testing..)? Thank you for the awesome content! You rock!!!!
Love the sigh at the end. Another vid well done! Thanks Jack 😄👍
At my current job I am creating a highly interactive map application that uses a native Javascript library (leaflet), so I needed the reactivity and interactivity that integrates well into React, as well as just plain Javascript. I searched for hours, finally discovered RxJS lately and I got to say I am loving it. Having streams of data, combining them and having the whole application react to that (not only the React, but the javascript map part as well) is life changing. The first time I created a complex stream I felt like a genius, everything is so readable and all interactions flow so well. Also being able to separate the business logic of your application and the actual React UI components feels great. React was intended to be a UI library, and now all my React components are only concerned about the UI, with all the complex logic being written outside of them. If you need complex interactions with data (inside and outside of React), RxJS is a life saver. Coming from Redux even with Redux Toolkit, I am crying at how happy I am switching to RxJS. No more endless one liner actions, no more selectors and dispatch slugs. You can make RxJS as easy as Jotai or as complex as you want it to be.
Thank you so much! you explained complex thing in such a simple manner that it was easy to understand! loved the candid smile in the end!
Great, great, great I wish all the internet would be like this
Would love to see the use-cases of RxJS and Redux.
Working on a project like this. Using redux-observable. It's really powerful
@@kostispodaras999 Can you share the github?
Loading list on window scroll. Dragi.g items in a list. Any event/asynchronous events.
Rxjs is bundle heavy. It’s also better used if you have more help in unsubscribe. Like the pipe async in angular that auto unsubscribes
As it is right now , i don’t see the combo being practically effective.
@@yikan1107 All imports from rxjs are tree-shakable, so it's not bundle heavy since you're application are using only what it needs from rxjs.
Thank you so muck for sharing all of this knowledge with us.
Really enjoyed watching you code and I LOVE RxJS
React/Typescript + Apollo/GraphQL. Thanks Jack! awesome content as always
Great video as always @Jack! More and more recently, I have seen the true power of RX and see how the observable pattern is so powerful (Svelte stores).
Can we please see a video on SingleSPA server-side rendering and possibly even see if we can integrate NextJS into SingleSPA’s ecosystem. If not, even a demo on the recommended SingleSPA SSR integration would be awesome 😀
LOOOOOOKING FORWARD TO THIS ONE!
wow... awesome
best rxjs tutorial!
Thanks again for being very concise and provide this practical walkthrough on state management with rxjs, [...] Learning a lot from all these State Management series. I guess what I can get from it is that there are just subtle differences between which library we use to handle our app state. But to understand those core principles is better than relying on more complex lib... Will be awesome if a series on functional programming with typescript comes from this channel! Just core principles, perhaps Monads?
Ah, monads. I looked a while back for a decent video that described Monads. I understand them a little. Maybe I can put something together.
Excellent lecture. You deserve way more subscribers.
Thanks for the great video Jack! I don't know if it's my end or not, but the microphone was distorted (by means of being too loud) a lot in the video...
Anyhow, would love to see some more nextJS, especially statically generating static content which is gated - or locked (meaning you need to be authenticated and authorized to see it)!
Keep up the great videos!
Yeah, that's on me. Bad recording on that and I didn't notice it until it came out. :(
The title is so cool
In Angular RXJS is paramount, really enjoyed this vid to see how React can leverage RXJS.
Hey very nicely explained 😀 Keep the knowledge coming.
this is amazing....love your work
This is what i am waiting for Atlast.
would love to see more xstate, of all the packages i use with react/react-native, feel that one is the one i should get really good at, i see the benefits so much in area i use it. Maybe more on the Actor model etc
Great video as always! Thanks!!!
Would love a video about testing library with React and hooks 😋
You are awesome Jack
I would love to see RxJs used in combination with React-Query. You could demonstrate an example combining and filtering content feeds from an API. Or using RSS feeds from news sites that update very frequently so we can observe changes in the resulting feed live.
You don't need react-query if you use rxjs. IMO react query is a lightweight version of rxjs + useState
I can confirm this is a wildly powerful technique.
I looked at useQuery and useMutation, they are just setting up subscribers that properly update react or force update.
so i converted this logic into rxjs with subscriber.next etc, just replicating when react would update and trying to get same sequence of events.
its amazing, i made it so that query options are passed in as stream, same with mutation observer.
if the options change, the observer does not get thrown away, it is its own observable logic so i keep that around and just let it emit on changes.
i can observe the state changes of a whole bunch of related API's and do derivations or side effects from them and its simplified logic like optimistic updating to be way easier. I set up an optimistic updating stream that uses scan to maintain an online reducer for all the api events that would change the entity being updated/read/created from a CRUD-api
then you subscribe to that stream and there is your reduced state from side effects, no need for a global store or emitting event to represent the value somewhere else
Thank Jack. It's an amazing tutorial. Can you create another video that describes how you apply rxjs in the big application( folder structure , debugging, testing..)?
I really enjoy the video
Really like the simple explanation on how to implement rxjs in a React project. I am just a little bit curious on the why part tho. What sort of project would you recommend rxjs over any other state management library? I really like how this works, but it does make a project much harder to understand for developers who don’t have any rxjs experience. When would you choose rxjs over just regular context or any other state management library?
Also another question, what were there any more advantages in exporting the observables in the context instead of just importing them as constants?
Gotcha. Yeah, this video was a question about how to do it, and not about why to do it. So I wanted to cover a lot of the methodology bases. As for the why, it really depends on the nature of how data is modeled in your system. If you have real-time data then RxJS would be a good fit for that. But if you are looking to just do shared global data there are a lot of other simpler options for that, for example, recoil or jotai, would be good substitutes and would be a lot simpler. In fact, you could do the whole thing in custom hook/context combination since the entire tree needs to re-render on any state change anyway.
awesome stuff
Would love to see ReactQuery and/or SWR for API State Management, possibly React query + GraphQL as well
video request :). If you were going to start a brand new "next cool billion $ website" what would the first few hours looks like of development? How would you setup the project that you're going to do real work on for the next several years? What things would you put where? How would you build the login and that first page?
Cooooooool. 🥇
Btw, usual question back again, Which font and theme ? 😅
It’s listed in the description. But it’s night wolf [black] and monalisa.
@@jherr anyways that was naive yet smart this biggest FAQ in description right away. Btw, have you done any mvc with nextjs video? 🤓
@@Sameer_Kumar Not yet, good idea tho.
Thank you
Thanks Jack, first time learning RxJS and this was the biggest help by far. One question, what do you think of the React-RxJS library vs Observable Hooks?
obersvable-hooks seems to be the current best of breed.
what vscode extension you are using ? that let the
GitHub Copilot.
Managing search state with Rxjs looks more complicated for me than with regular useState. Thanks for the video.
It is. And hooks does the reactive state management as well, if you get the hooks right. But if you need some global state (e.g. a shared shopping cart, or a count of pending chat messages), this is actually a pretty nice solve for that.
@@jherr What the name of theme shell you are using - with all the info about branch and node version ? Look cool.
@@KuzyoYaroslav Node is version 14. Theme is Night Wolf [dark] and Monolisa for the font. Not sure about what branch means in this case.
Rxjs is a great reactive library and an example is Angular reactivity
Yes, yes, yes and YES. All our microservices at work use Spring Boot webflux which is built on the Reactor Project. I've been wanting to experiment with an RxJS conversion of our web apps and this video will hopefully fill in some of the gaps in my understanding.
Thank you for your awesome videos! I have a tutorial recommendation. How to approach DDD or clean architecture in a more functional and JS idiomatic way to suit React applications. For example how to structure and implement the domain layer with immutable entities, use cases, the data layer such as repositories (here maybe a more OOP or imperative style), so to extract business logic from state management solutions such as xState for separation of concerns! That would be a great topic which I can't find good enough resources! Thank you!
is there need to introduce react context if we're able to detect changes and share the state with rxjs only ?
Hi Jack, I have an application which is developed using (RTK + Redux Saga) I want to replace this with (Zustand and RxJs) is it feasible to implement side effect actions like we do it in Redux Saga?
TBH, I don't really know enough about Sagas to answer that. Perhaps you should look into Jotai? Zustand + RxJS feels like a weird combo to me.
which vs code extension used to convert json to interface object?
you are the best to explain reactjs 😍, What if you add a global checkbox (select all) will it re-render the whole list if you checked it ?
Thank you for this nice tutorial. I think you could do everything demoed with just useState and derived states in react. I think those would be pure functions and easier to look at? What's the advantage of using rxjs?
Very nice tutorial. Are the code auto completions with suggested code part of the CoPilot beta?
Yep, Copilot.
@@jherr Awesome! Just applied to beta myself, hope to get accepted soon. It is a nice feature which at first I resisted, but seeing the potential for speeding up dev and making us more productive, I'd say, why not.
Ideas for new videos on the same theme: Redux-Observable with epics and marble testing. Wish you a great Sunday!
@@dorindumitrascuta4755 It's just a copilot. You are the one steering the ship. It's just helping out.
How does he do that hining that you just tab and you get everything? It it the github pilot?
Yep.
Hi Jack. This is a Great video! Can you share your thoughts on using Recoil with RxJS ?
Never tried that combo. What would be the point?
Hey Jack, what VS extension did you use to convert the JSON to a TS interface?
marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts
Thanks a lot, this is an awesome tutorial. Is it possible to use rxjs and share data between two projects? Like in microfrontend based projects.
Yes, have a look at my freeCodeCamp tutorial where I do exactly that: ua-cam.com/video/lKKsjpH09dU/v-deo.html
What difference between context and just directly import observable inside component file?
If you get it from context then potentially you could change which observable certain components look at based on that context.
what vs code extension use to convert from json to typescript interface
Is rxjs framework agnostic? Can I pub / sub using window between MFE’s?
Yup. Framework agnostic.
@@jherr thanks! Love the videos!
@@robmcmahon3883 Thanks!
How often do you personally use reactive programming with Rx*, at work and personal projects? I'm wondering if it's used all that much and whether I should avoid learning it, because it seems to have a huge learning curve
I am always looking to use reactive programming, but I don't often use Rx to do that. Most often I'm doing reactive React hooks using the basic hooks (useState, useReducer, useEffect, useMemo and useCallback) with the dependency arrays.
You sir are a fire 🔥 ...
Was that code complete the gh copilot in action?
Yuup
@@jherr Dang, that's amazing!!!
@@tevoj It's not going to replace you. It takes a good engineer to know when to take the advice as-is, or take the advice and tweak it, or just ignore the advice. But it is helpful. And sometimes... it's scary right.
@@jherr Yes, watching your video felt more like..you know when you stop typing to search smth in google ˜trying to remember the syntax˜ and basically the copilot gives you the hint. But for me at least it was super cool because inside my head when you were typing I was like: ok he's gonna complete this AND the copilot showed you exactly that!!! hahaha so cool, jeez!
how can we track changes within the object using rxjs
can we do like Redux with Rxjs, i can't find any tutorial in react native programming
Having gone through this exercise my general sense is that RxJS is an event based state management system. From what I understand about React however, already is reactive in nature, and has its own state management system via React hooks. Is there any specific advantages that RxJS has over React hooks?
The RxJS subjects can be global. Which you can kind of do with context, but even then it's not global to non-React sources. But there are a bunch of different ways to do simple global reactive state (Recoil, Jotai, react-hooks-global-state, etc.)
@@jherr That's helpful to know, thanks for the response
What extension are you using to show the predicted code? (intellisense?, please don't tell me copilot)
It is copilot. Sorry. :(
@@jherr what's the font tho it's pretty xD
@@mohammedsofienebarka6400 Monolisa
@@jherr thanks
@@jherr I mean theme, sorry..
What color theme are you using for vscode?
Night Wolf [dark] and Monolisa (I've also started listing it in the description.)
@@jherr thanks alot!
what was the magic done to convert json to typescript type?
Is it a common thing for React? Only used it with Angular so far.
Hi Jack, fantastic video. Any chance you would be able share some ideas about how to incorporating a timer for fetching Pokémon data?
Hi, what do you think about the Server components planned for react 18?
Thanks for reminding me. That looks really cool, technically speaking. But I'm super wary of SSR, having come from doing Walmart and Nike which were both big SSR shops. SSR, even in different forms, comes with headaches over SSG and CSR. I'll definitely look at it though.
@@jherr you worked for NIKE! Thats awesome, i spend so much time on stuff maybe you helped build then.
@@chris3079 Well, if you bought anything on nike.com then, yes. :)
@@jherr that even better, because the website is perfect, but the NRC app is little buggy lol
@@chris3079 No comment. :) (Actually, I really don't know since I left there a year ago.)
React is not detecting the iPAD screen showing the iPhone screen effect not iPAD effect what you think about this Issue in React?
I don't think it's a React issue. React doesn't have any device specific code.
why did you use useMemo instead of useCallback ?
Because we want memoize a value, which is the matching pokemon. useCallback is used to memoize a function.
So basicaly you just created SolidJs. I am curious if the render count is the same as Solid
Hahah, yeah, a React render count will only be as low as Solid if the app is not dynamic. :)
Please do a video on combining Redux-Toolkit with RxJS..! I've been developing in React for about two years, but before that I was working a lot with Angular - so I miss Observables a lot ^^
So... I'm not quite sure what that would look like. They are two different methodologies for state management and I'm not sure what the fusion would look like or how it would work. Could you elaborate a little?
@@jherr ...actually, the Redux toolkit currently covers everything I need for my daily work. But after seeing this video and this package (redux-observable) regarding async actions, I'm wondering if they can't just be combined in a meaningful way that creates a clear benefit - which I can't imagine at the moment as well : )
@@codehan Yeah, if I was going to do observables I'd probably just do something like MobX or Valtio and then do everything through that. I'm not super keen on mixing state managers. Unless you consider React Hooks a state manager. :P
I wish the browser itself made reactive streams available as native objects.
Hi Jack
Can we have a video on Redux Saga with most possible combinations of methods available.😶
And any good example on Graphql would be also helpful
I would love to see more content about nextjs (protected routes , i18n) there is no much content about these topics especially the auth and protected routes most content talking about auth from nextjs api routes and i real world project no one uses them most practices are about using an external api and separate your front from your back
Please what auto complete tool is being used?
It's Github Co-Pilot
Dear Jack can you please make a video about tail-recursion? would be grateful
Is node even supporting tail recursion optimization? It did for a release or two as I recall but it got pulled out.
@@jherr I'm afraid, I can't answer that))
@@armanmkhitaryan16 Just have a google around, it's actually pretty interesting. There are some environments that support it: kangax.github.io/compat-table/es6/ The issue appears to be that supporting it actually slows down none tail recursion code. So it's a chicken and egg problem, you have to get folks to write for tail recursion so the can us the feature but you have to do it while it's not supported, then enable, it, blah blah blah.
Honestly, just another reason why JS is not a true FP language, and no FP language built on top of JS will be a true FP language.
Please make video on React + ReactQuery + Redux how can we differentiate between client state and server state how manage them
Hello, in your opinion what is the best global state system for graphql apps with graphql code generator?
Great question. There is GraphQL Code Generator (www.graphql-code-generator.com/) which looks pretty good, and there is also the Apollo code generator, which if you are doing the Apollo thing, would be my preferred first go-to. Personally I would start with Apollo and URQL and then see what "global" state they did not manage, and then figure out how to manage that remaining state. If it was something like identity and auth tokens I'd just use context. If it was something larger then I would use something like zustand or xstate.
@@jherr wow, no to redux-toolkit and redux-saga !?
@@nepalcodetv6298 That's just my take. :) The move to the Flux model was a push towards singleton state (i.e. "local state is evil"). Then hooks pushed us back the other way; "local state is ok/preferred." Now, IMHO, the trend is a combination of local state right where you need it, and a smaller set of shared globals. And in that world the big infrastructure of large scale global state management doesn't pay for itself. Why do I need something like Redux Toolkit, or Sagas, if all I'm sharing is user identity and the content of their shopping cart? (Just an example.) I can get by with something much smaller, e.g. valtio, zustand, recoil/jotai, shared state hooks, etc.
How do you code so fast?
It is all scripted. When I'm researching and writing the code the first time it's not that fast. :)
Can you do a video on Symbols in Javascript
next js + typescript video also focus on next js specific topic with typescript
please make a video on SWR and React-query
Would love to see the use cases of OpenLayers and React.
What is OpenLayers?
Can you make a video about a react /next app implementing the "Twelve factor app", that's some real world app creation right there
Jack just did a speedrun at coding
I'm maintaining a large legacy codebase at my job with react and rxjs and my god the code stinks. Every single logic is deeply coupled and nested with those rxjs apis, I had no idea whats was going on. Watching this tutorial I could understand what most of the main functions do, its going to help me a lot. Thanks Jack!
And if there is anyone considering mixing rxjs with react, just know that there are much better options for state management now days.
Ouch. FWIW it’s a tough call on whether to pull this video or not, since on the one hand it’s helpful. On the other hand I don’t recommend RxJS for FE state management.
Why not exports and use react context
Just wanted to provide some different options depending on how you want to use it.
Bro please do latest (2021) crash course on
1.Angular 12
2- reactjs
3- nodejs-
4-- meanstack
5.mern stack
6-Real time project (product) development
7.Frontend development interview questions and answers
All in one video? :)
@@jherr no separately
@@jherr or in one tutorial series, showcasing typescript support across all platforms using an nx workspace!
But at the end you ended up using RxJS with React, not React with RxJS, well only if you make global and local variables.
I feel like is lost the purpose of using React and the philosophy of states IDK...
I'm not sure I understand the different between RxJS with React vs React with RxJS, is there something that covers the "philosophy of states" that I can look at? Basically this is doing what every state manager does with React. React components register listeners on the state, the state changes, that triggers the listeners, then listeners trigger a re-ender of the components. The state in this case just happens to be managed by RxJS.
@@jherr yeah, you are right. I think a little bit more and what happens is that is so common to almost always see the useState and useEffect hooks, so I felt that removing them is like removing a core functionality, but as you mentioned React is about re-rendering when there's changes.
Also, I think a reason people like React is because all the logic is in one file and removing the logic part of the fetch requests makes it more abstract and harder to understand (that's for me 😅), but it looks cleanner and faster to read.
Is the first time I see how is use RxJS with React, and I felt unsure if use this state manager or not, I guess only practicing it I would make a decision. 🙌
Can we do PHP AND NEXTJS
PHP and NextJS used together?
why we use rxjs in react
You have used {...spread}. You told us it is performance killer in another video. you should use p.power = ... return p;
It's not always a performance killer. It's fine in this case. As it is with a map. Because you are creating a new object for every object in the array. The problem with spread in a reduce context is when you use it to build new versions of continuously growing object or array.
Seriously, why the heck did they call map "map".
It maps an inputted value of type T to a value of type V. If you have an Employee class and you called .map(employee -> employee.getSalary()), it would transform each element using that function and create a new stream of just their salaries, which might be an integer type.
Rxjs is the only thing Javascript ecosystem needs, nothing more....
Rx js is great until you have to read it and understand it again in a year. Also good luck to the poor devs who inherit it. Lots of tools that manage things in a different way and would argue should only be used where absolutely nothing else does the job.
That voice yo
Without microfrontends... it's boring 😉
I still don't see the benefit
I remember when I used to think like this... the benefit of rxjs is that it is used to make complex tasks simple.
jack, grow your beard out!
Nah, shavin' that thing off today. Getting itchy.
Maybe this is just me, but the “global” here doesn’t seem like a positive thing. Haven’t we agreed as a community that global state = bad?
Global state is definitely bad and should be avoided where possible and minimized otherwise.
What is better then? You have local state in your usual useState hooks. Then if it is not enough, you can just create an observable and export/import it wherever you want. Global things are only bad if they are available everywhere unconditionally, but here you need to export/import the observable AND subscribe to it until it actually works. That is a lot different. You decide yourself what is global and what is not, you can make a local observable without exporting it. You just have the choice of using it wherever you want, but no one forces you to do so.
tl;dr: Your comment is basically like saying: "Being able to go outside after 12pm doesn't seem like a positive thing. Haven't we agreed that having freedom = bad? You may encounter a robber or something at nights...".