React JS Lifecycle Methods – both Common & Uncommon!

React JS lifecycle methods contain three lifecycle stages in a React app. Mosh Hamedani says it best: it is a cycle from the birth of a component to its death. Let’s dive deeper.

Birth of the component – Mounting stage

Growth of the component – Updating stage

Death of the component – Unmount stage

Common React JS lifecycle methods


class Hello extends Component{
      return <div>Hello World!</div>

This method is used in all React Components this is because render() is the only required method within a class component in React. The render() method returns JSX which is displayed in the UI. Execution of this method happens at the mounting and updating stage of your component.

Beware: you cannot modify the component state in the render() method!

React requires your render() method to be pure. Pure functions are those that do not contain side-effects. If you do need to modify the state it would have to happen in the other lifecycle methods.


Your component has been mounted and is ready: that’s when the React lifecycle method componentDidMount() comes in.

componentDidMount() is called when the component is mounted and ready. This is a good place to initiate API calls.

componentDidMount() allows the use of setState() . When calling setState() the state will be updated and cause re-rendering before the browser loads the UI.

It is recommended that you use this method with caution as it will lead to performance issues. The best practice is to ensure that your states are assigned in the constructor.

The reason why React allows for the setState() functionality is for special cases such as tooltips, modals and similar concepts when you need to measure a DOM node before rendering something.

import React, { Component } from 'react';

class App extends Component {

    this.state = {
      data: 'Jordan Belfort'

    setTimeout(() => {
      console.log('Our data is fetched');
        data: 'Hello Wall Street'
    }, 1000)


  render() {

export default App;


componentDidUpdate(prevProps) {
 //Typical usage, don't forget to compare the props
 if (this.props.password !== prevProps.password) {

This lifecycle method is executed as soon as the updating happens. The most common use case for the componentDidMount() method is updating the DOM in response to prop or state changes.

You are able to use the setState() method at this lifecycle stage. However keep in mind you will have to invoke it in a condition to check for state or prop changes from the previous state.

Incorrect usage of setState() may lead to an infinite loop.


This lifecycle method is called just before the component is unmounted and destroyed. If there are any clean-up actions you need to perform then this method is perfect for that!

You cannot modify the component state using the setState() method in this lifecycle method. This is because the component cannot be re-rendered at this lifecycle method.

componentWillUnmount() {
 window.removeUploadListener('upload', this.uploadListener)

Common clean-up activities performed in this lifecycle method include, clearing timers, cancelling api calls and removing caches in storage.

This diagram below showcases the different React lifecycle methods and when they are invoked. Picture is from the official React documentation.

Uncommon React JS lifecycle methods


This method is useful for when you don’t want React to render your prop or state changes.

Anytime setState() method is called, the component will re-render by default. This lifecycle method is used to let React know that the component is not affected by state and prop changes.

Beware: this lifecycle method should be used sparingly and it exists only for certain performance optimisations.

You cannot use the setState() method in this lifecycle method.

shouldComponentUpdate(nextProps, nextState) {
  return this.props.description !== nextProps.description || 
  this.state.input !== nextState.input 

In the above code snippet, this method should always return a boolean value to the question “Should I re-render the component?”

static getDerivedStateFromProps()

This method is quite new and was recently introduced by the React team!

This method is a safer alternative to the previous lifecycle method componentWillRecieveProps(). This method is invoked just before the render() method. ComponentWillRecieveProps() is only implemented for rare use cases where the state depends on prop changes in a component.

static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
    // Return null to indicate no change to state.
    return null;

This is a static function that does not have access to “this“. GetDerivedStateFromProps() returns an object to update state in response to prop changes. It can return null if there are no changes to state.

This method above would be great for a TransitionAnimation component to come in that compares its previous and next elements to decide which ones to animate-in and animate-out.


This is also a newer method released by the React team. This method will be a safer alternative to the previous lifecycle method componentWillUpdate().

getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...code

This lifecycle method is called just before the DOM is updated. The value that is returned from this method is passed onto the componentDidUpdate() method. Use this method sparingly or don’t use it at all.

My initial thoughts on building a Full Stack JS application

Hi, been a while? I know right! … Well straight to the point. The reason why i’ve been offline and have not been documenting my journey as a Software Dev consistently is because I’ve been really busy building a Full Stack JS application.

JS is really weird, like really weird especially if you’ve come from C#. The reason why I say that is because of the notion weakly typed. I mean there’s nothing wrong with it but it’s just a little weird.

Anyway on to the positives… I think JS is awesome! You can really master this language and write extensive, feature-rich end-to-end applications. That means you can write JS on the front-end as well as the back-end.

That advantage alone makes it really really powerful!

In my spare time I have been conducting research and developing a Full Stack JS solution (currently built on top of the browser). This solution is a forum application whereby users can post threads, start communication and like comments.

I am an avid researcher and love to research about technology. After researching about the pro’s and cons about JS i decided to write the entire API in Express JS. The front-end was a no brainer! I am using ReactJS and Redux.

I love the fluidity of JS because you can partially update the data held by a component. This means that load times are technically faster because you only partially load the important data 😉 …

How totally awesome?

Initially I didn’t want to show you guys a sneak peak of what i’m building because it’s unfinished but, once done, the full project will be listed on my portfolio page. Here is a link to my portfolio page.

Here is a screenshot:

Screenshot of CoinGalore
CoinGalore forum

I mean it’s not the prettiest and neither does it show you the dashboard. The aim was to first finish the back-end and focus on the aesthetics after. This project is ongoing and will have its own domain once completed.

I will be extending this application to be fully cloud-ready. So stay tuned on future blogs!

After i’ve completed this application, I will soon after write up a blog about my journey designing the API, structuring React components and some tips about Redux.

If you liked reading this blog, please comment below i’d like to say hi to you!

If you get inspired or motivated to learn React please head over to this youtube video. Mosh Hamedani is the instructor and this guy really knows his stuff!

Build a React app for beginners

Mobile Application for IOS and Android devices using Xamarin

One of the biggest reasons I write blog posts is that so I can provide you value and so whenever I stumble across something valuable I will share it with you all! This time round I will be talking about the popular Xamarin framework for building cross-platform mobile applications.

I know that I have not posted anything in a while …. :/
But for those viewers who are coming back to the site, hello there! and for those who are new, Welcome to my abode 😀

Oh BTW, slightly off topic … there are now 300 monthly active people who consume my content!! Which is fantastic right? So… i’ll be doing a giveaway as a thank you gesture!

(Further info about the giveaway is at the bottom of the blog post!)

Xamarin Logo

This post covers my initial experience and opinion on developing mobile applications written with C# and the Xamarin framework. It is pretty awesome, you should check it out…

I’m a big BIG FAN of writing once and re-using code. With Xamarin’s framework you are able to write complete loosely coupled mobile applications in C# that run on both Apple and Android devices.

This means you write your logic once and both platforms (IOS and Android) utilise it. Not only is your coding logic shared across multiple platforms but also your UI Layer. I love this!…

Click the following link to watch some awesome content by Xamarin University: their video content covers building mobile applications based on the Xamarin technology.

I’ve watched quite a few myself and i must say that the content is quality and I’ve learnt a lot from them!

Messaging Center in Xamarin

Recently, I wrote a new feature which essentially downloads data in the background. No user interaction is needed. Basically it is a background service. When I was writing this feature I had the trouble figuring out the architecture of this feature. It had to be loosely coupled and there could not be a single tightly-linked dependency.

Soo.. anyway.. I tried many different ways but the one that I chose, included a Messaging Center infrastructure. The messenger service had a publisher and a subscriber. The code I wrote was encapsulated within a method and that method was invoked once the “subscriberreceived a message from the publisher.

Which is awesome because the subscriber does not know about the publisher and vice versa! Why?…

This is because there is an intermediary communication service built within the core of Messaging Center. Typically the publisher would “publish” a message to the Messaging Center and the subscriber would subscribe to the message signature via the Messaging Center..

Diagram showing the architecture of Messaging Center for Xamarin C#
Diagram for Messaging Center in Xamarin

It’s extremely cool because Messaging Center can be integrated across different platforms. For example if the C# Portable Class Library (PCL) needed to send a message to only the Android Platform then guess what? IT CAN! 😉 … The beauty of Messaging Center is that multiple subscribers can be listening to the same message!

My take on Xamarin

I love it! As the Xamarin community and technology grow, I could only imagine it getting better ! Also, there are many libraries out there which provide a lot of functionalities out of the box!

I’ve read up a lot about Xamarin’s mobile application performance. One of the things in the article was about slow app performance when using Xamarin. But, in my personal experience I’ve had 0 performance issues when deploying a production ready mobile application onto an Android or an iPhone.

Messaging Center is awesome! Definitely give it a go, it provides the functionality to write decoupled code.

That is all for now!!

Give away

I know that I have not posted anything about User Experience (UX) and User Interface (UI) design. But, it is a great hobby and passion of mine. In my spare time I have created many different User Experience flow charts and User Interfaces for both Web-based applications and mobile applications.

So be on the lookout for these designs on the Portfolio page. Let me know what you think about them too, I’d love to know!

In terms of the “give away” itself, please use the contact page
( to get in touch with me if you need a newly designed User Interface and User Experience for your mobile app / website-application.

PS. Only one of you will be selected!

Ciao! Have a great day 🙂

SOLID – Software Design Principles


Been a long while since I have posted on my blog, hope you are all well. Thought i’d share some knowledge and in particular design principles to make your code more usable, extensible and test-ible!

Btw, if you feel that you need certain aspects of programming explaining then give me a shout via the contact page. Also, stay tuned as I will post a series of blogs where I will show you, step by step, how to build an application with the fundamentals of object-oriented programming.

[ S ] Single Responsibility Principle

Do one thing and Do it well!

The single responsibility principle is a computer programming principle that states that every module/component/class should have responsibility over a single part of the functionality provided by the software.

[ O ] Open Closed Principle

Be Open for extension, Closed for modification!

In OOP, the Open/Closed Principle states that ‘software entities’ (classes, modules, functions, etc) should be open for extension, but closed for modification; an entity can allow its behaviour to be extended without modifying its source code. If it is open for modification, you run the risk of unattended side affects – bugs in your code.

[ L ] Liskov Substitution Principle

Derived Classes Can Stand In for Base Classes

Programming to an interface provides the correct structural trait for the Liskov Substitution Principle. The Liskov Substitution principle was introduced by Barbara Liskov in her conference keynote “Data abstraction” in 1987. A few years later, she published a paper with Jeanette Wing in which they defined the principle as:

Let Φ(x) be a property provable about objects x of type T. Then Φ(y) should be true for objects y of type S where S is a subtype of T.

But let’s be honest such a mathematical representation of a principle might be necessary but it wouldn’t be entirely helpful for our daily work as software engineers.

The principle basically defines that objects of a base class shall be replaceable with objects of its subclasses without breaking the application.This means the objects of your derived classes will need to behave in the same way as the objects of your base class.


[ I ] Interface Segregation

The interface segregation principle states that no client code object should be forced to depend on methods it does not use. This basically means that each client code object should only implement what it needs & not be required to implement anything else.

Interface segregation principle is all about having lots of small, focused interfaces that define only what is needed.

Note: Put your interfaces on a diet, don’t feed them burgers!!


[ D ] Dependency Inversion

Dependency Inversion is based upon [ O ] and [ L ] and the general idea of this principle is as simple as it is important: high level modules, which contain complex logic, should be easily reusable and unaffected by changes in low-level modules, which contain utility features.

To achieve this you will need to introduce an abstraction that decouples the high-level and low-level modules from each other. Robert C.Martin’s definition of the Dependency Inversion principle consists of two parts:

High-level modules should not depend on low-level modules. Both should depend on abstractions. Abstractions should not depend on details. Details should depend on abstractions.

High-level and low-level modules depend on the abstraction. The design principle does not just change the direction of the dependency, as you might have expected when you read its name; but, it splits the dependency between the high-level and low-level modules by introducing an abstraction between them.

SO we end up with two dependencies:

  1. The high-level module depends on abstraction
  2. The low-level module depends on the same abstraction


That is all for now… I could go on forever showing code examples but I’m not sure if that is something you guys want. Please let me know if code examples help you more to understand design principles and I will remember for future to include them.

A ReactJS Overview


In this post, I have covered what ReactJS is and the benefits of implementing it. I have not covered anything in depth here in terms of the basic concepts; Google will provide your answers.

ReactJS is an amazing library for creating highly reactive and super fast JavaScript-driven applications. Since JS runs in the browser, it allows you to create superfast applications which feel like mobile apps; users don’t need to wait for page reloads.

I understand the controversy of Angular and React; although the learning curve is different, it does not mean it is harder/easier; I think this is a matter of how good of a problem solver you are.

Currently, at my workplace, I’m developing an Angular based web-application and in my personal time, I am developing a dashboard using ReactJS. Experimenting with both technologies, I think the latter is better. The use of components makes it easier to develop the front-end and easier to manage. It is also scalable as the same component can be re-used over and over again.

Material UI is Google design. This is fantastic as you can explore many components which are ready to be used (open source ofc!) for your web-app. Many of these components you’ll be able to recognise on Google’s website. (Click here to go to Material UI Design)

With ReactJS you also have the option to create your own elements in HTML and render them as a component; this provides a lot of flexibility for when developing a tailored web-application.

There are many benefits of using and learning the basic concepts of ReactJS. ReactJS will allow you to increase your developer skills and code structure. This is vital for programming because when code is duplicated it becomes a really messy one.

What is React?

Simply put, “A JavaScript library for building User Interfaces”. React applications are not server-driven; by this, I mean that the application runs directly in the browser; you don’t have to wait for a server response to get a new page or render something new.

React is all about components; components on a web-page could be the “navigation bar”, “side-menu bar” or a “photo gallery” (etc). A component is an entity which exists by itself, and this component can be rendered by multiple different web pages. This means you can create a component, and re-use it over and over again.

If you take a look at any web-application, a lot of components are being re-used. Copy n pasting code is done to achieve this without React. However, with React, you can simply create and import a component wherever you would like it. As you can imagine, this makes life a lot easier.


Why React?

React makes it a lot easier when managing UI State. UI State becomes difficult to handle with Vanilla (normal) JavaScript. In bigger JavaScript applications, you have to manually target elements in your DOM and if you change the structure in your HTML code, chances are you’ll have to change the way you target your elements.

React allows you to focus more on the business logic and prevents your application from exploding. The UI and UX are seamless when using ReactJS framework; the speed at which the components are rendered is phenomenal and this should be something to think about as it will increase average time spent and conversion rates.

PILOT : A software developer’s journey and the amount of coffees consumed?

it can be bliss…

Although, blogging, has become something of the past and vlogging is something of the present, but we can all conclude that quality software content will always exceed; no matter which way it is presented..

To answer the question we must both look at each side and what they offer..

Blogging is text formatted mostly and is presented only on text..  they say if you can captivate someones attention for around 30 seconds on a web page that they will stay longer?…. is this true? comment below and tell me if you read up to this bit with a hashtag of #attentionSpan30Seconds. The lucky winner gets £5 to their PayPal account no question about it!

Vlogging is more video based and provides a transition of moving pictures. Visual form is more interesting, as it can lead to more creative paths and you can really see the flare of an individual. I think this is the reason that vlogging is a true winner. 

About me:

about me

Software software software…

My art of blogging may be different from what you normally consume. But that is okay, I guess the style of writing could be stemmed from consuming content that I naturally find interesting. Some of those is reading the biographies of billionaires, architectural design patterns for software,  SEO-related books (it’s awesome). Also, I’m a Casey Neistat fan too!

ASP.Net Core 2.0 Cross Platform Web Application Framework

Swiftly moving into the reason for writing this blog…


I’ve made an intention, which is to populate my personal blog which could be about anything to do with software; what I learn through reading; any architectural design pattern I come across (worth understanding and implementing): I’ll put it all up here maybe with examples (if you are lucky). From now on the goal is to just blog…

It is difficult to step foot into software developing, to be honest. Some of you computer science majors are finding it tough (the ones that usually skip class) and some are quite fluent. Programming is an art form and the more you program, the more you craft your art. 

Few reasons why I found software programming hard…

  • I came from a pure science background, Biology, Chemistry and Physics. 
  • I started university completely baffled at the idea of programming and its concepts
  • and just a lack of knowledge of computing in general as compared to those who took IT or Software classes in College – or ” in school “ for those of you living outside of England.

I thought I’d blog about software

After deciding whether to vlog or blog, I thought it’s easier with code related content to be on a blog layout. I can attach things directly to the topic I’ll be talking about, I can show code examples, and the list goes on…

There are 10 people in the world, those who can read BINARY and those who cannot.


I think the quote above, is important. You either understand computer science or you don’t. I like the idea of that because not everyone will be able to strive at it and that gives the people that do have the ability, to shine with their talent.

Here’s a book I’ve got a copy of (currently reading):


Definitely get this book, it is a must read. Gary Hall does a wonderful job.

Current software stack

I am currently using Microsoft’s tech stack. It’s pretty awesome. You can do some dynamic stuff when it comes to cross-platform, web-application development.

What do you code with? (comment your code stack)

Angular is a must when it comes to the front end framework, I guess most of you would argue that React is… to be honest, I don’t care. You pick a framework and you work with it.. don’t overcomplicate the small details, you’ll forever find yourself in a loop!

Code is Poetry

Catch you later!