What if ReactJS component methods were Hindu Gods?
So, this is my first article on Medium and I would like to start with a wild topic. What if Hindu Mythology gods were real and they exist in the form of react component lifecycle methods? Now, before you imagine me as a hardcore religious person who says anything in the name of religion, let me make this clear that I consider myself to be fairly atheist and I hope by the end of this article, you concur with my bold declaration! :)
But first, A little background story
Around 6 months ago, when we were planning to revamp our new checkout at HighApe, we were looking for a stack that could best address our demands. We were looking for a front-end framework which could:
-> Efficiently be used for creating SPAs
-> Help us seperate our complex checkout logics without writing complex code
-> Provide fast rendering
-> And be learnt fast as we had to minimize the development time
React seemed to be the best choice for the above requirements, due to its reusable component based approach, virtual DOM support and clean abstraction which helps you keep yourself away from being involved in all the complex internal mechanisms of a framework.
And once you get a hang of react component lifecycle, half of your work learning react is over. But that is easier said than done. The complete intutive understanding of react components, comes only with time after you have put in considerable effort working on the framework building a few simple products.
The technical jargons that seem alien when you start working on something new cause a lot of information overload and can often feel overwhelming. This happened when I started learning React. Coming across terms like props, state, ES6, component mounting et cetera et cetera made me feel like I was reading a foreign spoken language.
Introducing The Trimurti
So, when I learned react, I thought there has to be an easier way to make people understand this. And the perfect way I thought of doing this, was the analogy I developed to understand React Component Lifecycle methods. I compared them with … wait for it … Hindu mythological Gods — The Trimurti. Yes, you read that right! As crazy that might sound, it helped me immensely to get an initutive understanding of React Component lifecycle methods.
Wikipedia describes The Trimurti as:
The Trimūrti ( “three forms”) is the trinity of supreme divinity in Hinduism in which the cosmic functions of creation, maintenance, and destruction are personified as a triad of deities, typically Brahma the creator, Vishnu the preserver, and Shiva the destroyer…
According to Hindu mythology, Brahma gives birth to anything that comes into this world, Vishnu takes care of all things that exist in this world and Shiva destroys things as they exist to make room for new.
A background on React Component Lifecycle
ReactJS lifecycle methods are methods which are executed at different stages of the lifecycle of a component. Lets refer to the official image on the Reactjs.org that explains it perfectly:
Every react component goes through a lifecycle. It takes birth when its mounted, you define state for a react component when it is to be mounted using the constructor method. You render the component with the defined state using the render method. The birth cycle of the component is now complete.
But, because you are building a dynamic application, you will make significant changes to your component through out the time it exists in DOM. The most used method that you will use to make change is componentDidMount method which triggers just after a component is mounted.
And this is not the end of it. You need to nurture and take care of your component. You need to make it grow and adapt as per the actions of your user. This is done in the update lifecycle, generally through the componentDidUpdate method.
Sadly, after the component you gave birth to has completed its obligation, it will have to die. This is done in the unmounting lifecycle. You kill the component and remove it from the DOM. But if there is any cleanup action that you must do, you can do that using componentWillUnmount method which will trigger just before a component is unmounted.
Lets talk about the analogy now
The way I see it, React components are not very different than us “The Homo Sapiens”. We take birth in this world, live our lives here and finally die. The world for react components is the DOM that they live in, they take birth in it, live their lives there, and finally die when they are unmounted/removed. If you are unaware of it, DOM stands for Document Object Model, basically a tree like model of objects which a browser creates for every webpage that is loaded in it. I wont go much deeper into it, but if you are new to it, you can read more about it here.
constructor and render — The Brahma
The Brahma is the creator god in Hinduism. He is the one who has created all that we can see and feel in this world.
In react, Constructor gives the basic state to a component with which it takes birth into the DOM. You can also pass certain properties to a component from its parent, just like we received our basic properties (or genes, if you want to be specific) from our parents. Render method takes the properties passed on from constructor and gives birth to the component.
componentDidUpdate — The Vishnu
Once we take birth in this earthly world, its the duty of Vishnu to look after us. He takes care of all the living things. In react, this is done by the componentDidUpdate method. Whenever the state of a component is changed, you can handle the actions that you want to do through the componentDidUpdate method.
If you have a little experience in React, you might ask where componentDidMount method go? In my analogy, I consider the componentDidMount method as the first componentDidUpdate method which is executed the first time the component is rendered. Although, the exact technical definition is a little bit different.
Every time a state is changed, a component is rendered again, just like important moments in our lives posess the power of affecting (or “re-rendering”) our personality.
componentWillUnmount — The Shiva
Shiva is responsible for the destruction in this world. But thats not a bad thing. If things are not removed, how will it make place for new things in this world?
Similarly, in react, you can remove elements from DOM which are no longer required by unmounting them. And the componentWillUnmount method is executed right before a component is removed, just like Shiva opens his 3rd eye before causing destruction which allows him to see things more fiercely. Use this method to clean up anything you want and make way for the destruction of the component.
The above analogy may not be the best one, but as crazy as it might sound, its my attempt at re-imagining the process of learning react and I believe it can help beginners get a hang of what react component lifecycle is about (given the assumption, you know a thing or two about Hindu Gods). In fact, there’s a whole lot of research on how imagination can help you learn things faster. Google it.
And as Memory Grandmaster Kevin Horsley has said:
The more skilled you become in using your imagination the more you can know, comprehend and create. In this way, you become the director of your mind.
But obviously, its recommended to always refer the React official documentation to understand the proper purpose of each component method once you get an intuitive gist of what they do. I provide my perspective only with the intention of showcasing a fun way of understanding React component lifecycle methods.
Let me know your feedback on my analogy. And if it makes any sense to you, please feel generous to give me a few claps. That should keep me motivated. :P
You can follow me on medium, I will be sharing more of my weird tech analogies if you like them!
You can also connect with me on LinkedIn and follow me on GitHub.
