Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
February 2, 2016

React Lifecycle Events for Sencha Devs

React, Sencha

Welcome Sencha developer! So, you want to learn React. Maybe you’re wondering where to start? Well, getting a basic understanding of React’s components is a great place to start. A big plus is that, like ExtJS, React’s components have some simple lifecycle events. Lucky for us, we can use our knowledge of ExtJS lifecycle events to help us understand React’s and that gives us a nice place to start learning. So, let’s take a quick look at them and see if we can understand when to use each one.

constructor (not an event but important)

“Life can only be understood backwards; but it must be lived forwards.” – S. Kierkegaard

Yes, I know. This is not an event but it’s well worth mentioning. For those of you who are used to beginning your ExtJS components with initComponent(), then constructor() will be where you get started. OK, ‘nuff said. Let’s look at these events.

componentWillMount

“Any fool can know. The point is to understand.” – A. Einstein

You can think of this event much like beforeRender. It’s called only once on both the client and server (depending on where you are executing). As you’d expect, this happens just before the initial render. If you set the component state here you will still only get the initial render and not an extra one. Usually changing a component’s state will cause it to re-render. However, changing it here is one of the exceptions.

componentDidMount

“What the mind doesn’t understand, it worships or fears.” – A. Walker

This method is similar to afterRender and is called only once on the client (not the server). Child component componentDidMount methods are called before the parent. This is where you can get initial access to the DOM and is the best place to hook in other frameworks and set up any other DOM interactions. It’s also the best place to make AJAX requests and set timers. You will definitely use this one quite a bit.

componentWillReceiveProps

“We have to make mistakes, it’s how we learn compassion for others.” – C. Sittenfeld

This one doesn’t really have a direct comparator in ExtJS. However, if it helps, you can think of this as something of a “setter”. It will get called after the initial render whenever our component’s props are received.

shouldComponentUpdate

“Nobody is smarter than you are. And what if they are? What good is their understanding doing you?” – T. McKenna

Here is another event without a direct comparator. It is called before rendering, but not for the initial render, whenever props or state changes. Much like an “apply” method in ExtJS, it’s preventable. So, you can return false to skip an update if you think it would be unnecessary. nextProps and nextState are the incoming arguments. You can easily compare them to the current props and state to determine if the next render event can be skipped. A good use case to use if it is an entire section of the UI tree can safely be omitted from virtual dom diff calc.
** Caution ** Unless you have a really good reason, this method should always return true or simply not be used. Otherwise, things might get buggy and/or out of sync.

componentWillUpdate

“Never memorize something that you can look up.” – A. Einstein

If shouldComponentUpdate does not return false, then this event will be called right after. You can use this opportunity to prepare for the upcoming update if you need to. Unlike shouldComponentUpdate, this event is not preventable.

componentDidUpdate

“Don’t cry and don’t rage. Understand.” – B. Spinoza

This is another method that you can think of as a bit like afterRender. However, the big difference is that componentDidUpdate will be called right after the render method for every update except for the initial render. This is similar to componentDidMount except that componentDidMount is only called once, after the initial render.

componentWillUnmount

“I write to understand as much as to be understood.” – E. Wiesel

You can compare this directly to onDestroy and it should be used exactly the same way. Clean up any extra objects you created, timers you set in componentDidMount etc. As you’d expect, this method is called just before our component is removed from the DOM.

Summary

I hope you found this quick ExtJS <-> React event comparison helpful. As always, don’t let your quest for knowledge end here. Head on over to React Documentation to broaden your understanding some more. If you have any comments or wisdom to share with me in return, leave them below or look me up on Twitter!

* * *

Featured image: ©www.tOrange.us This work is licensed under a Creative Commons Attribution 4.0 International License
Posted in React, Sencha
Share this

Timothy Eagan

Timothy Eagan was a Senior Engineer at Modus Create, and is an accomplished software developer with over 20 years of experience in creating customized business solutions. He can be found in Providence, RI. Tim is also an OIF veteran, former paperboy and part-time comedian.
Follow

Related Posts

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top