Typescript for React and MobX From Beginners to Masters

[@CodingNuggets]

I haven't looked into MobX because I haven't had a need for it and haven't had any request for it in projects. Still good to know, so thanks for giving me a quick look.

[@CodingNuggets]

Hey hey! Thanks for the pin Jack. I was just giving you accolades in Jesse's (codeSTACKr's Discord) for the weekly news inclusion. Love your content and watching you grow. Growing with you my friend. 🙂

[@ngochunglongnguyen4523]

OMG you're a great teacher. You helpt me learn MobX in under 15mins while Redux and Redux toolkits took me at least 2 days to go through all the practical implementation. That is really productive.

[@clins94]

this is such a nice little video for introducing mobx ! thank you. i'm going to share it with the new hire since we will be using it on the project ❤

[@НикитаКальнов-л8ш]

You deserve bigger audience with such a content! Thank you a lot for great introduction to MobX!

[@sarthakshah2236]

exactly

[@craigjohnson8279]

This is awesome, thanks Jack. I love that you did some Fetch requests as well! :)

[@luisalejandropena5063]

I was a little bit scaried about using Mobx but you explained so easy that I want to implement it. Thanks

[@jherr]

Nothing to be scared about, MobX is good stuff.

[@SachinDolta]

This is top notch high quality channel

[@MaulanaRamaIbrahim]

Thankssss Jack, your videos are really helpful! I hope you continue to make more!

[@sarthakshah2236]

big thank you for the video. i can now efficiently use it in my projects

[@Freedom_Code]

thx Jack , i'm working React developer , and i 'm beginner in TS and MobX, offcourse your code's strange for me, but i repeated my-self and it's greate. Good Luck and be healthy !

[@Raubritterr222]

That SATURN V is gorgeous!

[@HillelGarciaAustria]

Very well explained, thank you! I like the way you go straight to the point and the use of pure functions. You have +1 subscriber.

[@rizwanatta7845]

i was struggling with mobx to handle a small app as I am more inclined towards doing all with redux! but had to had it in this small all! so MOBX and your tuts helped! thanks

[@cappuccinopapi3038]

This is such a quality tutorial, great job!

[@josemfcheo]

Just what I needed! Thanks!

[@afganhalilov1442]

Hi Jack, thanks for your videos, they are much helpful and superb! Hope you will continue to make so useful stuff

[@lactobacillo79]

Hi Jack, thank you so much for your videos. I love MobX too and MST, but in this example your are modifying directly some observables, meanwhile in the MobX documentation it's highly adviced to modify the observables properties using an action, what's your opinion about that? Regards...

[@jherr]

In larger applications you definitely should use actions to mutate the state instead of directly mutating it.

[@BlackSlimShady]

Amazing content, thank you!

[@Elantry]

Thank you! I've spent a long time on this. Easy as soon as it works :-)

[@jherr]

Aint that always the way? 😀

[@antongron]

Thanks a lot for the video

[@DOMAN89]

Hi Jack I have some suggestion: 1. In your case you can omit the returning type of functions like in addTodo, because TypeScript is able to infer the type. 2. Maybe would be nice to show that, we can create for example: type AddTodo = (todos: Todo[], text: string) => Todo[]; and use it in this way: const addTodo: AddTodo = (todos, text) => [ .... But of course very nice video and thumb up :)

[@TheScottShepard]

The return type helps to make sure you don’t make mistakes internally to the function before returning the result. It’s a good idea to create a type contract before you write your logic. This is the same mindset as test-driven development where you first decide what your outcomes should be, then code your implementation to achieve your desired outcome. Happy coding!

[@DiegoBM]

Great video Jack, as per usual! Could we get access to that performance test you mention in the video? Thanks!

[@tanercoder1915]

what playlist is this video belong to?

[@balfouri4579]

thank you so much for great video. i could understand so easily 👍

[@andrewclarke8163]

Very helpful video! What are you using to change the way arrows and inequalities in your code are displayed?... I assume it's some VSCode plugin

[@jherr]

Enable ligatures with the a font that supports ligatures.

[@MrJoaopaulofurtado]

Great video!

[@Dysfunctional704]

Hi! I'm trying to learn MobX. With it, why would need React's context hook when I can just import my MobX container freely throughout the app?

[@jherr]

I don't think you need to use context if you are using MobX.

[@Dysfunctional704]

@@jherr Thanks Jack!

[@zephyr242]

Hi Jack, great videos! Heads up, it looks like your Discord server invite link is invalid.

[@jherr]

Yep. Looks like it times out? I need to write a script to update all the video descriptions. 😂

[@AwadheshKumar-rk2mu]

Hi Jack, Can you please make detail video on mobx.

[@yogenp]

Been using Mobx lately and loving it. Any clues on persisting data without the use of decorator?

[@jherr]

No, but as I recall they always have decorator-less alternative. So if you can't find it in the docs I'm sure you can ask in a support channel.

[@yogenp]

@@jherr Thanks Jack. Awesome contents, btw. Cheers.

[@Freedom_Code]

Why do you throw MobX class methods outward ?

[@jherr]

I'm not sure what that means. Could you clarify that a little?

[@Freedom_Code]

@@jherr when you realised TodoStore you code functions with enter values, why you didn't use class methods ?

[@jherr]

@@Freedom_Code Can you point to a particular time in the video where I do this?

[@Freedom_Code]

Why independent functions instead class Methods ?

[@jherr]

@@Freedom_Code Oh, I see, no particular reason. Feel free to drop to those in the class. Honestly, this video is part of a series of videos I've done across a variety of state managers. So if you are familiar with that series I use those same functions across all of them, and so it would let folks know that the implementation of addTodo isn't changing between any of them. They all do addTodo and removeTodo the same way. But you are correct, the "correct" implementation here would be to put that logic into the class.

[@daheck81]

Hey Jack, thanks for all your videos! What is your personal favorite when it comes to state management in a rather large project? The amount of state management tools is crazy and makes it difficult to choose the right one for your needs since they are all pretty similar but still offer different nifty solutions. Would you say at the end of the day it is personal preference and what would you personally recommend? PS: My current go-to solution is using React's Context API with actions and reducers so it looks pretty similar to the Redux boilerplate code but doesn’t really bloat the project since it is a built-in solution. Works great on smaller projects but the amount of rerenderings would probably slow down the application as it grows so I'm looking for an alternative for bigger projects. And since most of the backends I currently build and interact with are Apollo/GraphQL/Lambda based, using Apollo Client as a state manager (with its cache) would also be a good solution for bigger projects no? Thanks in advance 🙌

[@jherr]

I personally haven't tried using just Apollo for state management. I realize that there is an overlap there between Apollo and global state management, but I always found I needed some number of globals (e.g. user ID, auth state, etc.) I'd probably go with Zustand for large projects. It's very lightweight. It has solid Typescript support. And you can't just directly set values on the store, which is great for small projects but a little less awesome in larger team projects.

[@daheck81]

@@jherr Awesome, this was exactly what I was thinking about as well. Thank you for answering! Looking forward to your upcoming videos and happy coding :)

[@adicide9070]

What is that funky theme you like so much?? :)

[@jherr]

Apollo Midnight with some tweaks to make it Italic.

[@adicide9070]

@@jherr Thanks, and just so you know--the vids on TS/React => very helpful as a distillation of the cheatsheets and more.

[@jherr]

@@adicide9070 Thanks!

[@asdfaam]

Are there any videos for testing react components with MobX -- you alluded in the video that it would be more difficult because you need to wrap the components, but unsure how to approach that. @JackHerrington

[@Ruzakisan]

For things like newTodo should use local state like useState rather than store, even in mobX.

[@oluwatobisholanke4117]

This is cool

[@SoulProxy9001]

I prefer using MobX store actions as it enforces cleaner flow.

[@SoulProxy9001]

And what I mean by that - if for example you have multiple consumers of the same store and variables actions allow for easier debugging to see where did the change for the store came from.

[@jherr]

I should have added a section on actions, they are definitely a good way to ensure the integrity of the store.

[@ram-bk4mu]

Could you please make videos on design patterns with examples? :)

[@jherr]

Yep, that's what I've been doing a lot of lately: kzbin.info/www/bejne/iYuVnHShgsl0kKc

[@ram-bk4mu]

@@jherr Oh great!!! thanks! also videos on Algorithms can be very helpful, I would pay for your courses Sir! I will at least get all my friends subbed to you channel! Cheers

[@romanmed9035]

20201 and class?

[@travisarndt853]

Agree Mobx is a terrible name of a observer library. I guess the "ob" is for observer but still

[@denilsoncosta9837]

MobX seems pretty straightforward, but i think zustand simplify my life.

[@nathantorquato9777]

nah.. just too easy, don't like it ahhahahaha question though: what about rendering performance? does it cause unnecessary re-rendering?

[@DavidSmith-ef4eh]

nope... only re-renders if the mobx properties used in the components change.

[@B3NALLAL]

💙🙏

[@m00nreal]

I liked better Zustand =)