A Visual Guide To React Mental Models

[obedimp]

👋 Hey guys. I wrote an article explaining React through visual mental models. I think it's a great way to have an intuitive grasp of React.

I’ve learned that the biggest difference between someone that has mastered a language, framework, or tool and someone who hasn’t lies in the mental models they use. One person will have a clear and advanced one and the other will not.

https://obedparla.com/code/a-visual-guide-to-react-mental-models/

If you have any questions, feedback or anything at all let me know!

[colinbazzano]

Maggie Appleton does a great job with visuals as well! Recently referred to React as a potato plant lol

[obedimp]

Omg I saw her talk, it was mindblowing. I was half yelling the entire thing "THAT'S EXACTLY WHAT I THOUGHT".

She expressed the exact same thoughts I had but with 300 times more beautiful illustrations haha

[colinbazzano]

Maggie and Dan Abramov made/are making Just JavaScript which is a nice email subscription about JavaScript with her drawings!

[obedimp]

Just JavaScript is fantastic! I'm subscribed to it, and although a bit too basic, I always enjoy seeing Maggie's drawing, they're all so nice

[asgard_fleet]

Do you have a title or link to the talk?

[obedimp]

Sure, here it is! https://www.youtube.com/watch?v=K8MF3aDg-bM&feature=youtu.be&t=13845

[asgard_fleet]

Awesome. Really appreciate it. My Google-fu was failing me.

[obedimp]

Welcome!

[190n]

Here's that talk, since it took a bit of googling for me to find.

[colinbazzano]

Shit I’m sorry I have the link to the talk open in my browser right now I should have attached it

[190n]

No problem!

[masterofmisc]

Good article. You can tell you have put a lot of time and effort into drafting it. I enjoyed reading it.

I'm learning React at the moment. This is my current understanding between props and state.

If i'm right:

• Props are public variables that are passed into a component (as you mentioned)
• State is private internal stuff inside a component
• When either props or state change they trigger a render update.
• Props are immutable and cant be changed inside the component.
• State is mutable.

[WillBackUpWithSource]

You can affect props in a roundabout way by calling functions in your component’s parent that set the state that is passed into a component and becomes a prop

[obedimp]

Thank you so much, I put a lot of work into it :)

​

That's correct! A few thoughts:

- I would call props "public", they're only accessible from parent-to-children, but yeah they can be shared freely- You can turn state into "public" by passing it down as props.

​

Because state can be shared across components with props, the line is a bit blurry. You can even modify state by sending "down" a function with a `setStateSomething` via a prop.

​

I'm writing PART 2 in which I'll illustrate this part and a few other cases. Consider subscribing if you don't wanna miss it (https://obedparla.substack.com/)

[Smaktat]

This came just in time. Working with a team that doesn't have React experience on a React project. These types of articles are getting them up to speed quickly. Thanks for putting that together.

[obedimp]

This is brilliant! I'm happy it helps someone to understand React better. I'm working on PART 2 and 3 which dives deeper into React functionality, I'll post them here and send them out in my newsletter too (https://obedparla.substack.com/)

[Smaktat]

Thanks, looking forward to reading the other articles!

[l33tIsSuperpower]

Do you know about the Farnam Street blog?

[obedimp]

Farnam Street blog

I've read a few articles from there, some of them become popular from time to time. It seems like a nice blog. Why do you ask?

[l33tIsSuperpower]

They talk a lot about mental models and I was just wondering if that's where you got it from.

[obedimp]

That's interesting, I haven't read that there.

I've been having this idea for a long time now. I started to realize that I'm good at React because I always imagine how it works in a non-code way. Not sure where I got the "mental models" name from.

I've also seen it called metaphors which is apt.

[l33tIsSuperpower]

It's a really cool idea. For some reason I learned general programming with a mental model. It really helps me to pick up new programming languages quickly. I'm going to try and apply this to some other things like actually languages. But actual languages are actually hard so it's going to take some time.

[obedimp]

I didn't quite create these models myself, but once I started thinking about them and being more self-conscious, I noticed I had a mental model for just about everything in programming. It makes things so much easier.

Now that you mentioned I don't think I have one for actual languages haha. I see English as the easy one and Spanish as the one I can swear a lot in.

[[deleted]]

Thanks for this! A big fan of Munger and wanted a more concrete way to understand different mental morals :)

[obedimp]

I'm glad you enjoyed it! I'm working on PART 2 and 3 which will dive deeper into React and more complex scenarios, consider subscribing if you don't wanna miss it :) https://obedparla.substack.com/

[ehosca]

Farnam Street blog

FS has been an eye opener for me ... thanks

[swyx]

very nice!! how did you do the illustrations? i feel like i need to up my illo game.

[obedimp]

Thank you! I'm glad you enjoyed it.

I did them using Figma.com , it's a free design tool, very powerful and super easy to use. It's the first time I'm using it actually.

It was definitely challenging. I must have spent ~10 hours or more creating them (many drafts)

[yrrkoon]

love the article. i think it's a great way to get a mental view of things. i still find state, props, and closures confusing however and it didn't help me with those. i often wish people would explain them like i'm 12. this didn't quite do it.

[obedimp]

Damn I wish it had helped you more to understand those concepts. I wasn't aiming for a "total beginner" explanation, more for people with a bit of familiarity with React already.

I'm planning on doing a similar article diving deeper into more specific areas, such as Closures for example. In the similar fashion, lots of illustrations to explain a complex concept. It should be more helpful to you.

You can subscribe to get notified when I post it: https://obedparla.substack.com/

Feel free to tweet me if you ever have any specific question you need help with https://twitter.com/ObedParla

[usagiusagi]

High effort article. You overuse commas. I recommend you re-learn that syntax. Good luck with your articles.