Ads Top

Mental Modelling in React

Anyone who knows me, knows I am a big fan of the the Feynman technique. For a quick review of the technique, there are 4 basic steps.

1: Pick your topic to learn
2: Learn it to the point of being able to explain it to someone so that they can understand it themselves
3: Notice your flaws in teaching it to someone else, review those flaws, re-read/learn and repeat step 2
4: Simplify your explanation further by using simple language and adding analogies

For a deeper explanation see Learning to learn .......

Step 4 is a great step to not only teach others but also solidify the knowledge within yourself. This is often called creating a mental model.
I came across this article today using mental models to explain some concepts in ReactJS and found it interesting, and a great example of a key portion of the Feynman technique.

React’s philosophy is simple: it handles when and how to render elements, and developers control the what to render. State is our tool to decide that what. When state changes, its component renders and therefore re-executes all the code within. We do this to show new, updated information to the user. In my mental model state is like an special property inside the box. It’s independent of everything else that happens within it. It will get a default value on the first render and always be up to date with the latest value.


Ask yourself this. Does this imagery help solidify some key core concepts of react for you? Does it get you thinking of your own mental model to explain some of these ideas?
Continue reading and see if this makes sense or if you want to tweak the models to fit your own understanding

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

No comments:

Powered by Blogger.