React Component Life Cycle

What is your favorite technical article?

For me, Understanding ASP.Net View State is my all time favorite article. I might have read it hundred's of times. It helped me all my career as a dot.net & sharepoint developer.

so, when we have our basics clear, complex tasks will be easy to handle. So the same applies for REACT as well.

Example: 
I have recently worked on a SPFX webpart integration with JqueryUI.

But the twist is, JQuery Accordion binding can only be possible only after DOM is rendered.

Now let me show you how SPFX webpart & React components work together.

Now tell me where i should place the JQuery  accordion binding.  Best place is after step 4. But this code will only be applicable static markup content,  but not to dynamic data generated from any user actions after step 6.  Thus my web part looked like this.

After a great deal of effort, i found that there are a lot of REACT component life cycle events that i missed. So once i figured out  this,  below piece of code changed everything.

So i have updated my code base from earlier post "React Component Basics", to accommodate the log comments.  I have begun all my logs with  "Custom - ", so that it will be easy to filter in developer tools.

Main Webpart Log :

Component Log:
Check the button in the rendered markup. This is used to trigger an user action and thus call a component method to update the state.

Below is the component method and all the other events in the component life cycle.

Now i open powershell , go to working folder of my SPFX solution and run "gulp serve".
Open the chrome and open developer tools and navigate to "console" and add the filter to show only messages that starts with "Custom  -".

First i loaded the webpart and below is the log.

Now when i click the button, thus causing the change in the state of the component, following happened.

Now you understand why i put my JQuery Accordion binding code in "componentDidUpdate()" method.

So to summarize, i think the same picture speaks volumes now.

You can also force a component to render by calling "this.forceUpdate()" method.

 You can download the code from below link to check it. Please note that i haven't put entire solution in zip file. All the modules and packages makes each solution 350 MB. So i zipped only the src folder.
Download link here.

Happy coding!