The React Component Lifecycle 💀

 

Hi, *|USERNAME|*!
One of the trickier things to learn in React is this whole notion of lifecycle methods. Here is one way to think about them. We humans tend to celebrate important milestones in our life - milestones like birthdays ( 🍰), anniversaries ( 💍), getting a pet ( 🐱), earning the high score in Frogger ( 🕹️), eating your first grapefruit ( 🍊), etc. Similarly, components in React tend to celebrate important milestones in their life as well. They tend to celebrate milestones like when the they get initialized, are about to render, have finished updating, are about to be destroyed, and so on.

What React's lifecycle methods do is commemorate these milestones by allowing you to run your own code at these special moments. Think of these lifecycle methods as being no different than special event handlers similar to the ones you may have when listening to the DOMContentLoaded or load events on a HTML page.

The following diagram lists the common lifecycle methods and when they come alive:




To get a deeper spiel on lifecycle methods and how you can use them in your React apps, check out the React Component Lifecycle tutorial.

Learning React (2nd Edition)

---

If learning React from a physical book (or something on your Kindle) is more up your alley, then you sorta kinda might like this. If that doesn't have you reaching for your wallet, this book has been edited by the awesomely talented trio of Trevor McCauley (Senocular), Kyle Murray (Krilnon), and Mark Taber.

View on Amazon.com

TILL NEXT TIME!

---

As always, before I leave you to it, I would love to hear from you on things I can do better, topics you'd like me to write about, and more. Don't be shy! The easiest way to contact me is via Twitter or by posting on the forums (just like the good old days when you'd try to find the perfect avatar to match your creative username!)

Cheers,
Kirupa 😃