How to use Mobx with React Hooks

[@SaleemKhan-ln3ly]

I was wondering why did you wrap the count store in context, when we can use the store directly? is there any advantage of wrapping it in context?

[@bawad]

I don't think so, at the time I didn't know you could use it directly

[@loba8924]

where is the second part?

[@qazyhn94]

this tutorial is sick, I like it!!

[@MrJoaopaulofurtado]

How do I persist state with mobx and react hooks?

[@muzamilhussain9908]

can any one tell me how this is different from context api

[@impzeropvp]

Where are you willing to store the workouts data, firebase?

[@bawad]

I was going to store them in localStorage

[@techstacker5361]

@@bawad if it's localStorage, then you won't be able to access the same exercise data on the web/mobile version? Or will the data be sync’d between mobile & web?

[@bawad]

yeah we won't be syncing between app/website, so each will have different data

[@fr3fou]

How do you decide when to use interface vs type

[@bawad]

interface for objects and types for everything else

[@arafatzahan3697]

@@bawad OOh my, never thought it like that. Makes too much sense now haha

[@punreachrany5706]

Do I have to write in Typescript if I want to use mobX?

[@zulq2075]

i'm getting error * error: bundling failed: Error: Unable to resolve module `mobx-react-lite`* if i go to root directory node_modules it showing me *mobx-react-lite*. can u plz help me

[@zulq2075]

it's working on the web but not on native

[@bawad]

I couldn't get the native to work either

[@zulq2075]

@@bawad so why we created three folder(web, common, app) , is there any method so i can i use only one codebase for web and mobile.

[@bawad]

yeah, checkout expo web

[@minionsmedia1761]

@@bawad Did this thing started working on native now ? curious.....

[@danieldosen5260]

I like using the data format like '2019-02-19' as that's how postgresql uses/displays dates natively.

[@bawad]

I'm cool with using that

[@wagnercsfilho]

Provider component?

[@mayur9876]

Amazing content as always

[@bawad]

thanks!

[@muratasarslan2359]

Very helpful, thank you Ben.

[@goulenstring]

Only works with JS scalar types (types.string, types.number, etc..). If MobX Store property if of type "types.array(Other model)" or "types.map(Other model)", react hooks does not take care of those properties updates (useEffect/useMemo/etc). Do you why ?

[@bawad]

Weird, I'm not sure

[@aleksandarhough7710]

fantastic tutorial!! thanks

[@gonzalochristobal]

how difficult it will be to create a react-native-web-cli with a create-rnw command that creates a folder with all the packages configurated? i dont have any idea of how to do it, but it will be a good exercise if you ask me, i'm in to try to help if you want to do it

[@gonzalochristobal]

a workspace generator

[@gonzalochristobal]

its kinda hard getting the workspace configurated to get up and running

[@bawad]

yeoman.io/authoring/index.html

[@gonzalochristobal]

@@bawad thanks!

[@kresimircosic3753]

Very cool, I am having difficulties with MobX now, the page renders indefinitely after a Promise with data resolves and fills up an array with data. No idea why...

[@Chocoholic1337]

Silly question perhaps, but CMD + Space doesn't open up the intellisense / import thingy... How did you set that up? And what is currently set to your CTRL + period?

[@bawad]

They are default keybindings CTRL + Space brings up intellisense CMD + period brings up quick fix menu which includes imports

[@gosnooky]

Getting the "Invalid Hook Call" error when using the useContext hook when the component is wrapped in observer()

[@danieldosen5260]

Will you build in an ability for the React-Native app to work 'offline' / not connected to a server?

[@bawad]

yeah, we are going to be saving the data to AsyncStorage/Localstorage

[@natanaelfernandes2565]

saved me, works fine!

[@Lessep922]

Seems good BUT i think using mobx with hooks is not ideal (or maybe i still dont get it) why? because the magic of mobx is that you pick which properties you want your component to listen without all that extra setup by default. Anyway you're awesome Ben!

[@bawad]

I think it still works like that. The component we made will listen for when the count field changes. Hooks just make the syntax for it a little different.

[@SalientKnight]

I don't have a tsconfig or a jsconfig. I've been in hell trying to get rid of this error -- using CRA3 and JS

[@bawad]

I think you need to add a babel plugin

[@MarioIliev]

Damn that's a boilerplate that I would liike to avoid. I prefer something easy to use like "Store me".

[@deannno1]

I just don't understand anymore why use something else to manage the store, than the context.

[@Chocoholic1337]

From my own experience: context is used for shared component state / props that don't change often or that isn't complex (application-wide theme as example). As soon as you start using complex state logic, a store starts to make a lot more sense. I'm sure Ben can give his own experience on the matter.

[@bawad]

mobx is an alternative to useState, either way you would/could use context

[@devilmanscott]

One main reason usually more tooling, but another is that it's normally more optimised.

[@chaimochs7437]

@@bawad So, I should use both observables/observers and context?

[@trejohnson7677]

ancient knowledge repository.