Introduction to MobX & React in 2020

[@waffstacks]

Thank you Leigh! This has been the easiest tutorial to follow, better than the official documents!

[@leighhalliday]

Thank you very much, David, I appreciate it!

[@motionsiren]

Hey Leigh. This video was my entrypoint. The Ten minute introduction is perfectly fitting, but I was failing to hook in and feel the flow until you took us through this minimal high-level overview. Thank you!

[@leighhalliday]

Nice :D Thanks Ben, I appreciate the kind words! Glad the vid was able to help.

[@ticos.thepsourinthone9150]

Thank you so much for making this easy-to-follow tutorial, Leigh! I was struggling to find a React + MobX tutorial that was as clear and concise as yours! The speed with which you present, the injection of the "why" we do this, the memorable example of 'bugs', and the numerous 'recaps' are like food for my brain, Leigh! YOU. ARE. AWESOME.

[@leighhalliday]

Nice! I'm glad it was able to help! Thanks for saying hi and the kind words, Tico!

[@KirkQuesnelle]

This was such a good introduction. You have a very good teaching style. I'm able to get up and running now because of the work you put in. This is so greatly appreciated! I was hoping you had a course on it. I'm a subscriber now at the very least

[@leighhalliday]

Hey Kirk! I do have a course... but it doesn't use MobX unfortunately... we just use useState to manage things :) It's available at next.leighhalliday.com

[@stillbald5827]

Thank you! I think I finally understand MobX. Now I'm off to try and it, and realize that I don't understand it at all!

[@leighhalliday]

Haha... don't stress! You don't even have to use MobX... you can accomplish most things with normal state in react and context without any issues. I plan to push out a MobX 6 video shortly... but the truth is that personally I don't really use MobX/Redux any more ever since hooks came out.

[@Sukis666]

Hey man! I've previously only programmed C# for games and have a tough time with the super quickly advancing web development world. I needed state management for an app and failed hard with Redux. After watching this I got state management sorted out with MobX instead. Thanks, you are a lifesaver :) !

[@leighhalliday]

Nice! Glad I could help :) Web dev is the sort of thing where if you look away for a few minutes, you feel years behind... but in a sense, who cares what you're using so long as you're shipping things for users. Doesn't matter if it is the latest or greatest state management library.

[@TheJrw456]

super helpful! I finally understand. Also, in 2022 now, useLocalStore is now depreciated and there are saying that useLocalObservable is the way to go.

[@sarfarazalam6077]

Very easy to follow & great simple example to follow.

[@romimaximus]

Wow !! Mobx is a LOT simpler than freaking Redux !! i absolute loved it !! thankx for sharing it.!!😁👍

[@abessesmahi4888]

It will be nice to update all your old tutorials. Thank you so much for this tutorial.

[@leighhalliday]

Hey Abesse! I'll try to do this for my popular ones... maybe not all of them though, I think I am over 80 videos now :D

[@les2997]

Thanks for the video. I like how MobX turns getters into computed properties. If I didn't use MobX and wanted to have a similar functionality, I'd have to use useMemo and provide a list of dependencies. The MobX approach looks a lot easier when there is a lot of computed/derived data.

[@leighhalliday]

Thanks for watching and replying Les! Glad you enjoyed the video.

[@philippeclavier4190]

Loved it! Completely clear and easy to follow

[@leighhalliday]

Thanks Philippe! I have an even newer (AND BETTER muahaha) video to check out on MobX if interested: kzbin.info/www/bejne/jYK0omSHl76fd9k

[@philippeclavier4190]

@@leighhalliday I have seen it! Will watch it soon

[@danielnadar75]

Awesome and Quick ❤️

[@plaxdan]

Excellent job. Great cadence and clear concise examples.

[@leighhalliday]

Thanks Daniel, I appreciate it!

[@ignaciodelamadrid]

Awesome work Leigh!

[@leighhalliday]

Thank you Ignacio!!

[@karmanw5678]

Thanks for this great video :) So happy to see an SLC grad doing such great amazing things!!!!

[@leighhalliday]

No prob, Karman!! Loved my time at St. Lawrence. Scott (twitter.com/svinkle) was in my class/year and is doing amazing things too... sadly haven't kept in touch with others (graduated 15+ years ago now).

[@karmanw5678]

@@leighhalliday Thanks, I'll follow him too :) Time really does fly! Janis and Colin Banger are still teaching us. Still a lot of mainframe haha... Donna is retiring this year!

[@calistusobeke7520]

Nice job. thanks for sharing. LOVE FROM NIGERIA

[@leighhalliday]

Thanks Calistus, love from Canada!

[@onmakaev]

Красапет!)) That means you did a good job. Thanks!

[@leighhalliday]

Thank you very much, Emil!!

[@iqwebserve3973]

Great tutorial Leigh, thanks.

[@leighhalliday]

You're very welcome!

[@jumavipe]

Hello Leigh, do you have recommendations to File structure? or how could we use this having the components in diferente files and the provider in diferent files? I got the concept but if you have a repo that you can share with us in wich they use the storeProvider and the components in separate files would be so much help!

[@leighhalliday]

Hey Jumavipe! That's a good question and I don't think I've thought about it enough to have a really good answer. If I only had 1 store, I'd probably put it in a `src/utils/store.js` file, and if there were multiple stores, maybe I'd have a folder for them all. I've seen "atomic design" structure work well in React: cheesecakelabs.com/blog/rethinking-atomic-design-react-projects/ I haven't built many large React applications myself... at work I focus on backend Ruby, so I think that's why I don't have a great answer :)

[@lordfresh]

What a great explanation! Thanks!

[@leighhalliday]

Glad you enjoyed it!

[@嘴吸杯子]

Thank u for the video. I want to know what is right way to handle with side effects, something like fetch?

[@leighhalliday]

Good question! I **think** you can just do them inside store functions (actions)... give it a try and let me know! Here's a video I made on this previously, but it was using a class based store and I think things have changed a bit since then: kzbin.info/www/bejne/qGPVepikatV4mLM

[@vitaliano01]

Thanks for the update video and the intro to Mobx with React

[@leighhalliday]

Glad you enjoyed it, Paul! Thanks for saying hi :)

[@DjLeonSKennedy]

That was perfect, cool video, many thanks bro!

[@leighhalliday]

No problem!! Glad you enjoyed it :)

[@jonwatte4293]

It's 2022. This feels twenty web years old! :-)

[@edwinwong9033]

Interesting! MobX + useContext. combination are working perfectly.

[@leighhalliday]

:D Yea, pretty cool eh? I've always been a big fan of MobX!

[@alexwong1771]

So the StoreContext instance should be imported in any component which wanna access the store, right?

[@topogigio10]

Muchas gracias por tus videos! Saludos desde Argentina

[@leighhalliday]

Gracias por el apoyo Ignacio :) Saludos desde Canada!

[@leap8351]

This guy has the best analogies

[@leighhalliday]

Haha thank you. Never been so proud of being this guy :D

[@Turtlesnakemoose]

Thanks for this, very helpful.

[@leighhalliday]

Thanks Michael! I actually recently published an updated version if you're interested kzbin.info/www/bejne/jYK0omSHl76fd9k

[@kylenakamura4353]

What's the best way to persist the LocalStore on page refreshes, and more importantly, up the Component tree to access that store from another page or component? For example, how can I have index.js print the value stored in `store.bugsCount`?

[@leighhalliday]

Hey Kyle! What about setting up a useEffect hook that detects when the store changes and writes that data to local storage? Then when the page loads, you set its initial value to whatever is in local storage if anything is there.

[@_Yolandi]

thank you for redoing this video! you are a real bro!

[@leighhalliday]

Thank you, Yolandi! A lot had changed in MobX land since the first one.

[@damonwu9658]

Thanks Leigh, good stuff

[@leighhalliday]

Thanks, Damon! :D

[@robbieg25]

Super clear and helpful video. Thank you.

[@leighhalliday]

Nice :D Thank you, Robbie! Glad you enjoyed it.

[@muhammedabdurahman6026]

can we put observable above all component

[@timbabs1]

what theme are you using for vs code?, I quite like it

[@hgohgo12]

Hi Leigh Thanks for the nice tutorial. How would you do it with the latest version of mobx ?

[@leighhalliday]

Hey HGO! Honestly not sure! I haven't used MobX since I made this past video... I plan to do a 2021 version probably within the next few weeks.

[@rudeadyet1992]

Nice and clean! Thank you 🙏

[@leighhalliday]

Thank you Sarthak!!

[@kieranosgood3297]

In terms of typescript, it complains that object is possibly null if I do a React.createContext() without a default state, is there a best practice for defining a default state without having to redeclare everything I declare in the useLocalStore, or how best to handle/set this up? (p.s. great vid - realised when I watched this a few weeks back I subbed but didnt turn the bell notifications on, will defo be following your stuff dude) edit: I created a type for the store and in the create context I did React.createContext({} as StoreType) - Seems to have worked, hopefully that's the ideal way

[@leighhalliday]

Cool, glad you got it figured out Kieran! I'm not an expert at TypeScript, so I don't think I have too much of an opinion on it, other than I'm glad you got it working. Thanks for your support :)

[@cnascimentobr]

@@leighhalliday Thanks for the video! I've made a repo based in your video but using TypeScript just for training. Check it here: github.com/cbfn/pomodx

[@leighhalliday]

Awesome, thanks for sharing, Christian!

[@cnascimentobr]

@@leighhalliday ;-)

[@murraybauer3535]

Nice 2020 'update' for Mobx. Would like to see a vue.js video using Mobx with the new composition API.

[@leighhalliday]

Hey Murray! I've actually never used Vue.js before, so I don't think that's coming any time soon haha!

[@jacoblu9407]

Great Video. Very clear

[@leighhalliday]

Thank you Jacob!

[@frostyghostman6430]

Always lovin the content mate, any chance on an updated async mobx tutorial to complement this vid??

[@leighhalliday]

Hey Frosty! I see that version 6 is being worked on now... I may do a new video when it has been released and I'll try to cover async actions!

[@frostyghostman6430]

@@leighhalliday fantastic mate lookin forward to it

[@BlademanZX]

So if I'm understanding correctly (making this comment at 4:45 in the vid), if I wanted my store to be in a separate file I would put Const StoreContext ... Const StoreProvider ... those functions, (so lines 4-14) in a separate file and export, then in App or wherever I would import that component and use it as a wrapper for all my child components?

[@leighhalliday]

Hey Kizuna! Yea, you could totally put that into a separate file, export it, and import it wherever you need it. I'd probably use your StoreProvider within the App or a high level component so that the state is available to all of your application... then you can just import the context into whatever child component that needs to read the state.

[@BlademanZX]

@@leighhalliday I don't really understand the importing the context part - also I don't understand why some of this is necessary, other vids I've seen as well as the MobX docs seem to suggest I just need to import MobX (Observer or Observable) and set each value in state to an observable and then the components which need to update based off of that to be an observer

[@BlademanZX]

@@leighhalliday Can you explain how importing the context into other child components would work please?

[@mrkhoros]

Correct me if I am wrong but everytime state updates the component reload. If this is the case, won't wrapping everything in context make unnecessary reloads and mess some stuff up ?

[@leighhalliday]

If that becomes an issue you could look into this technique. But otherwise I wouldn't worry too much!! kzbin.info/www/bejne/eXWqc4eggqd9sMk

[@CkerCky]

Awesome video! Btw, which font are you using in vscode?

[@leighhalliday]

Thanks! "Code Lens Font Family"

[@abonoah-3495]

Awesome! Thanks, you made my day.

[@leighhalliday]

:) Glad you enjoyed it, Muhammad!

[@jumavipe]

hello there again! haha I have another question! is it really neccesary to use mobX considering the new context and hooks features are supposedly supposed to replace redux and mob-x since it helps manage the state because before them you couldn't manage it as easily

[@leighhalliday]

Hey Jumavipe! No, it isn't necessary... you can use useState, useContext, useReducer, useEffect, etc... and avoid using MobX or Redux... I'd honestly just go with whatever you're most comfortable with or you enjoy using the most.

[@louisdedecker4807]

Thanks, this was a good introduction !

[@leighhalliday]

Thank you Louis! Glad you enjoyed it.

[@stevereid636]

Thank for the intro. You made look really simple.

[@leighhalliday]

Thank you, Steve :)

[@blissofkundalini]

Ok fine, but how do I use it when splitting components into individual files?

[@AmberCheaaa]

What auto formatter is used at 8:45?

[@leighhalliday]

Hey A W! Most likely prettier... that's the only one I use.

[@SavijCoder]

Great video for using react with functional components. Question - If I wanted to use multiple stores, what would that look like? Multiple contexts or just an array of stores as the value? What's the best approach? Thanks again!

[@SavijCoder]

weird place to put code, in youtube comments, but I solved it like this (typescript) export const StoreProvider = ({ children }) => { const store = useLocalStore(() => ({ loginStore: { email: ['[e-mail]'] }, applicationStore: { firstName: 'neil', lastName: 'peart' } })) as StoreType; return ( {children} ); };

[@leighhalliday]

Thanks, Jeff! Check out this documentation to see if it points you in the right direction for dealing with multiple stores: mobx-react.js.org/recipes-context#multiple-global-stores

[@Dron008]

What about data fetching? Where it happens and how to initiate it? UseEffect or something high level?

[@leighhalliday]

Hmm, good question. The truth is that I typically wouldn't fetch data inside of MobX. I like to separate my app state from external data, and I'd use something like react-query, swr, or apollo.

[@Dron008]

@@leighhalliday I see. We use Redux/sagas with api level and mainly class components and want to get rid of Redux boilerplate. So it looks like MobX is not enough and we need additionally a separate data cache library.

[@kmylodarkstar2253]

Eres muy chevere, I like to practice english watching this. Very useful, I'm newbie with observables, looks pretty easy in react with mobx, than RxJs

[@leighhalliday]

Eres muy chevere tambien Kmylo! I haven't tried RxJs yet... should I?

[@kmylodarkstar2253]

@@leighhalliday Hi dude, yes I think is a bit more complex than mobx, it's what I feel at high level. But is a great tool with many features. I saw this old conference and was really inspiring to check this stack.

[@pauek]

Excellent video!

[@leighhalliday]

Gracias Pau!!

[@CoryTheSimmons]

Have you used easy-peasy yet? The guy who made MobX made Immer (and then use-immer). use-immer is a dependency of easy-peasy, and easy-peasy gives you Redux Devtools. It's like mobx-state-tree. A bit of mutability + Redux Devtools. Alternatively, I've been considering just throwing out all 3rd party stuff and just using useReducer locally on components, and alongside useContext for global state. I need to go back and watch your xState videos. David K. Piano is an IRC legend and I'm curious what state stuff he cooked up.

[@ftnsco]

Cory, this is awesome man. Thank you. I'm working on a project where I'm using useReducer with useContext but, I really like how intuitive and simple easy-peasy looks. Can't wait to try it out.

[@terrysahaidak]

No, easy-peasy isn't like mobx-stat-tree. It's more like redux on steroids with all its problems. MST allows you to navigate through your tree and operate on references to models, since it isn't using the immutable data structures. You can safely point a reference as a property of your model and be safe it won't change in the future until you destroy it by yourself. You can connect ReduxDevtools to MST as well as Reactotron to track all the changes. But still it's using mobx under the hood. And the main point of mobx - you will have the best performance out of the box, because of how observer (useObserver) works under the hood. Since mobx offers you mutable style of programming, you can mutate any prop and if you wrap your components with observer/useObserver, if will figure out where did you use it and rerender ONLY that component even deep in the tree. With useReducer and useContext you'll have redux withhout redux. You will still HAVE to use reselect and do many optimization such as shouldComponentUpdate/memo and you won't probably get the same performance mobx offers to you for free. Also, Mobx/MST is TypeScript friendly. You can check out mobx-keystone too as it aims to fix all the problems you migh have with mobx-state-tree and typescript (its written by MST TS maintainer).

[@CoryTheSimmons]

@@terrysahaidak Thanks for the thoughtful reply. I didn't realize MobX was faster than something like Immer. Now I'm very interested in state management perfs. Do you happen to know the fastest? Also, why do you say easy-peasy is "more like redux on steroids with all its problems"? What problems specifically?

[@terrysahaidak]

@@CoryTheSimmons mobx and immer are not comparable, since they are doing different things. immer is mostly a tool to allow you to easily write reducers in mutable way (in context of redux or any other flux-like lib), mobx is about observables and observers (components which tracks usage of observables and "subscribes" (because they don't really subscribe) for changes automaticaly. But if you choose mobx, you will have the best available performance yet in a big application (benchmarks are showing nothing) without any work on optimizing your components. Tte othres, those with immutable data structures, all have same problems in context of react: when you update a object deep in a tree, you create new objects/arrays for all of its ancestors (just look on how you use all those spread operators in redux or try to update an object deep in a tree via immer), so now every component will receive updated props (those ancestors) deep-deep to the actual component which uses that exact object you've just updated. You can optimize it using reselect, but there are still cases where you won't. Mobx don't have that problem at all. You can watch that talk in order to learn how mobx works and you'll realize why it's so fast: kzbin.info/www/bejne/hpC6on6QrdWLbsk

[@CoryTheSimmons]

@@terrysahaidak Ah, I thought Redux might have been doing some normalizing, but apparently it isn't unless you use Reselect. Sigh. And Immer/easy-peasy don't. I tend to use Apollo, which I believe uses selectors on whatever data it queries, so using Immer/etc. on components didn't seem to slow anything down. I've definitely used Mobx on a couple huge projects before, and was on the fence about the API (not a fan of classes). The more I work on projects though, the more I'm concerned about perf, so yeah, I'll check out that vid you linked and probably give Mobx another try. Leigh, this kind of selector/perf stuff in the state ecosystem would make a really valuable playlist.

[@armenstepanyan2954]

great video!

[@jackzeelzadirgarciavalleci1457]

Really like your videos!

[@leighhalliday]

Thank you very much, jackzeel!

[@mominahmad5575]

By pushing in the array, you are not changing the reference, then how react is able to rerender?

[@leighhalliday]

MobX handles this, they use something called proxies to detect when you mutate an array or object and this in turn triggers a render

[@mominahmad5575]

@@leighhalliday Thanks a lot for clarification.

[@terrysahaidak]

Nice video! Love it. Several notes for future readers: 1. It's probably better to use `observer` instead of `useObserver`. It will allow mobx to track all the properties you're accesing in your component, not only in the "render" part of it. It uses `useObserver` under the hood, but just looks a bit nicer. github.com/mobxjs/mobx-react#observercomponentclass 2. The `useLocalStore` is a hook, so you should use it only inside a component.

[@Kanexxable]

Do you prefer to use a root Store when using mobx or just importing different stores and can you use a root Store with mobx state tree

[@terrysahaidak]

@@Kanexxable since I'm using mobx-state-tree, it won't work without a root store, but for mobx it's ok to have several stores, without a root one, you can even create a hook for each, like `useAuthStore`, `useUsersStore` etc.

[@leighhalliday]

Thanks Terry! All good points :)

[@DalerAsrorov]

@@terrysahaidak separation of concerns within the store is awesome. I do not want components that are handling user authentication, for example, to re-render if I am just changing data in the the bug list

[@chulkim3556]

Great introduction!! Thank you!!

[@leighhalliday]

Thanks Chul Kim! Glad you enjoyed it :)

[@zakircinjarevic3115]

why didnt you make a new folder and separate the concerns ? This way its harder for me to do it myself

[@leighhalliday]

Hey! I might do that in a real app that will have a larger store, but it's easier for a small demo on video to keep things in a single file... less jumping back and forth. That said, I'm not against having multiple related components in a single file.

[@solelan1094]

@@leighhalliday for me it was harder this way, because I cant separate it now, Im not sure what vars needs to go where

[@okoiful]

How would you pass something like store.bugs as props to make the components reusable... otherways they are coupled to the data. thanks!

[@leighhalliday]

Hey Giorgio! How about just separating it into 2 components... the outer one which is coupled to the store, and then another one which just receives props from the outer one?

[@АлМ-ы8ъ]

Why we must use 'get' insted simple function?

[@leighhalliday]

Hey! I'm not sure why MobX prefers that for computed properties, but this is what `get` is: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

[@gikizayKG]

How can i create multiple useLocalStore? pls help

[@leighhalliday]

Ask and you shall receive: mobx-react.js.org/recipes-context#multiple-global-stores

[@finzaikofin]

Thanks bro, waiting for next lesson I saw udemy.com currently migrate from old angularjs to react+mobx

[@leighhalliday]

Thanks Finz! I'm working on more ideas :)

[@Norfeldt]

As always interesting content and great teaching. Thank you very much. It would be interesting if you did a second video with the exact same bug app but using useReducer (instead of MobX) and did a quick comparison between the two.

[@leighhalliday]

Hey Norfeldt! Check out this video I published on the LogRocket channel kzbin.info/www/bejne/m3O8e2qFaZ1lesU

[@backendfyi]

Thank you so much for this tutorial

[@leighhalliday]

Thanks for watching, Felix! Glad you enjoyed it :)

[@backendfyi]

Leigh Halliday you’re welcome 😉

[@MrAshwinpatel308]

It was really nice video with perfect and required info. Could u pls make any video for next level in which u can include architecture with service call?

[@leighhalliday]

Thanks Ashwin! I'm waiting for MobX 6 and then I'll dive in a little more. For external "state" (meaning interaction with services, apis, etc...), I honestly think I'd prefer to use Apollo if it were GraphQL, or something like useSWR or react-query for REST APIs.

[@les2997]

If I have multiple MobX stores, is it better to put them all in a single provider or should there be multiple providers each providing a single MobX store?

[@leighhalliday]

Hey Les! I personally don't know, but their documentation has a section covering this I believe: mobx-react.js.org/recipes-context#multiple-global-stores

[@radovansurlak7445]

Thanks Leigh :)

[@leighhalliday]

You're very welcome! I am planning on doing a new 2021 version shortly!

[@giuliotiseo2693]

Finally a good explanation of MobX + React. Thank you! I would ask you just a thing: what is the best approach for a larger store? I have a huge form and I think that manage all the data will be painfull. Is there any good pattern for more complex solution?

[@leighhalliday]

Thanks, Giulio! Hmmm... if it were a single form, to be honest I don't think I'd even use MobX... I'd probably just stick with local state, or use something like Formik which sort of manages the form values for you. If you did want to do it in MobX, I wouldn't shy away from a large store unless you are storing completely unrelated data. For multiple stores, check out this section here in their docs on how to potentially tackle it: mobx-react.js.org/recipes-context#multiple-global-stores

[@giuliotiseo2693]

@@leighhalliday Right, thank you for the good tips :D

[@marcelorecio3208]

what about persisting a store using this MobX approach?

[@leighhalliday]

Hey Marcelo! I think the best way would be if you can "observe" changes to your store, and sync those to local storage (I assume this is what you mean)... but I couldn't see an easy way to do this with hooks. There must be a way, I just wasn't able to find one. Let me know if you figure it out!

[@wedding_photography]

From that example it's not clear at all how StoreContext is passed to the child components, if they aren't in the same .js file. Do you have to drill it all the way down?

[@leighhalliday]

Hey olegkikin! The file that contains `StoreContext` must export it, and then you can import the `StoreContext` into any component you want to use it in. Then you use `const store = React.useContext(StoreContext)` to actually access the store within your React component. Sorry, I put it all in a single file to make it easier to show in one place, but I see how that would make things more confusing.

[@wedding_photography]

@@leighhalliday I'm pretty sure that only works for functional components, not class components.

[@leighhalliday]

Yessir. Sorry that's all I've been building ever since hooks came out. Truth is this video won't help you at all for class components, you might want to check out my older mobx video from a couple years ago, it should help!

[@stanna23]

In this example, why wouldn’t I just use context? I can omit using the observer by just wrapping it up in a context consumer. This way I’d have no external dependencies that I have to worry about and all my implementation is from react.

[@leighhalliday]

You can just go with useContext, useState, useReducer, useEffect, etc... MobX or Redux aren't necessary. Use whatever you enjoy the most :) React is a lot better these days at sharing global state than when MobX and Redux first became popular. Either way, I'd start with local state and only bubble it up higher in the component tree when necessary.

[@stanna23]

@@leighhalliday thank you for the reply and clearing it up!

[@nipunravisara389]

Good explanation, Thanks

[@leighhalliday]

Thank you Nipun :)

[@preyashhojiwala6626]

Which is the best state management library? React.Context, unstated, mobx, redux, redux thunk, apollo link state or something else

[@leighhalliday]

Hey Preyash! They are all good, choose the one you like the most! Check out mobx state tree as well, it's pretty cool.

[@preyashhojiwala6626]

@@leighhalliday Currently using mobx but I ain't getting the full vibe so just today started with unstated, I think it's cool.

[@vasileturus]

Very cool, thanks!

[@leighhalliday]

Glad you enjoyed it d d!

[@ionutcirja7121]

Can't really see any advantage in mutating state... Another thing I really would hate in a big app (where not everything will not be in one file) is to remember the names of all the methods from the store in order to update the date. But I suppose nothing can be perfect, right?

[@leighhalliday]

Hey Ionut! Thanks for watching. I *think* it's possible to have multiple mobx stores if one gets too big. But I also think you'd run into the problem with any state management library in a very large application... how to know what all the redux actions that you can dispatch are?

[@ionutcirja7121]

@@leighhalliday You are right Leigh. Forgot to say thanks for the video. I think I will give a try to mobx in my next project... which starts right now :)

[@nocoolming]

Can you teach us about mobx react navigation integration?

[@leighhalliday]

Hey! Hmmm.... I've never done that before... if I come across it in a project, I'll definitely tackle it in a video.

[@nocoolming]

Can you open source a mobx react native example project like pet store? In this way, we can see how mobx implements business in real project scenarios, thank you

[@ilyasoloveychik4504]

thanks a lot! I hope it will help me deal with these React States better ;)

[@leighhalliday]

Excellent! That's my goal, to help people get to the next level or get past a problem they're facing!

[@mrginn]

Thank you!

[@SEOTADEO]

thanks for this video. Was fiddeling around with xstate before but it was too intimidating.

[@leighhalliday]

You're welcome! Glad you enjoyed it :)

[@amidaobscura]

Why use context with Mobx? You need a lot of boilerplate to setup the context and in the end you have to import the provider like a global variable.

[@leighhalliday]

I used it so that I can provide my mobx state globally to the rest of the application.

[@amidaobscura]

@@leighhalliday But context is not needed for that. You can import the global store directly.

[@gerda-morozova]

Hi, I have one question. Am I right what in MobX use React.Context for providing global data, like Provider in react-redux? Or it one of example how we can manage data with MobX? P.S. sorry for bad english anyway

[@leighhalliday]

Hey! You're correct, React.Context is exactly for the purpose of sharing global data... it will give you a Provider which is the same idea that you see in Redux.

[@kylemcshea9433]

Not sure the root of this error: Line 23:17: React Hook "React.useContext" is called in function "colorHeader" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks Line 24:10: React Hook "useObserver" is called in function "colorHeader" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks EDIT: I am dumb I pulled the rookie mistake of forgetting to Capitalize Component names, Keeping this comment up incase any other newbies have this issue

[@leighhalliday]

Hehe, glad you figured it out cause I was definitely stumped! Thanks for sharing the solution!

[@markodivji]

Which there are you using in VSCode?

[@leighhalliday]

One Monokai

[@markodivji]

@@leighhalliday Ty mate :)

[@BearkFearGamer]

Awesome, maybe you can make a video about mobx-persist or something like that

[@leighhalliday]

Thanks Beark! I'll see what I can do. I haven't used mobx-persist before.

[@trta90_42]

Tnx alot man, realy good stuff

[@leighhalliday]

Thanks trta90!

[@tiagoagm]

Thanks for the tutorial. It seems I will be using MobX instead of redux. 🙂

[@leighhalliday]

Cheers Tiago! Let me know what you think when you give it a try (hit me up on Twitter because it's hard to see comment replies on KZbin)

[@tiagoagm]

Maybe, you could build a more complex project using MobX in your next video.

[@tiagoagm]

@@leighhalliday I have one question, instead of the action in useLocalStore you could just simply do "store.bugs.push(bug)" ?

[@patrickren7395]

I'm kinda confused, why use context when I can just import store in children components?

[@leighhalliday]

You could probably do that, Patrick... up to you! Just make sure to wrap `useObserver` or it probably won't detect changes and re-render.

[@andrewpavlov9128]

This could be useful in unit testing to provide fake store implementation

[@michaelblum4557]

Thanks so much for the video! Immensely helpful as always. I was wondering: are there any performance downsides to using Context in this, uh, context? As in, using it with MobX (which I take it is one of the more/most performant state management libraries). I've seen some poor performance when using Context in the past, and this seems to be the experience of others as well (see leewarrick.com/blog/the-problem-with-context/ and blog.theodo.com/2019/07/how-i-ruined-my-application-performances-by-using-react-context-instead-of-redux/, for example). Is this implementation exempt from some of those performance penalties because it's only using Context as a container / provider?

[@leighhalliday]

Hey Michael! There might be, but to be honest I don't really worry about performance until I notice an issue, and I haven't noticed any issues so far. I guess the things I do aren't so intensive that it matters. Let me know what you find!

[@AbhishekNigam]

Nice tutorial!

[@leighhalliday]

Thanks Abhishek! I appreciate it :)

[@嘉石]

Thank you

[@leighhalliday]

The pleasure was all mine!

[@SHELLAC85]

Thanks for this :)

[@leighhalliday]

Thanks for watching and saying hi, Shellac85!

[@ZiedHF]

Thanks sir !

[@leighhalliday]

You're welcome Zied! Glad you enjoyed it!

[@dennisgonzales9521]

Thankyou!

[@leighhalliday]

You're very welcome Dennis!

[@Mannoeu]

awesome!!!

[@leighhalliday]

Thank you very much Emmanuel!

[@patcoston]

I'm watching this in 2021.

[@leighhalliday]

Sweet! I actually did a new one for 2021 that I really like... make sure to check it out! kzbin.info/www/bejne/jYK0omSHl76fd9k

[@les2997]

Hmm... this MobX documentation statement bothers me: "Note that using a local store might conflict with future React features like concurrent rendering." mobx-react.js.org/state-local

[@leighhalliday]

Guess we'll find out in the future 😜