Up until now, I have learned many features of this amazing JavaScript library β€” React. I talked about nearly all of them in my earlier blogs. Now, after spending more than a week learning it, I am somewhat getting a hold of this JS library.

βœ” Type error – Debugged

Let’s start with where I left off yesterday. Yes! The error. It has been solved. Not by me, of course, but by two different persons – Ashar Irfan and Saqib Ameen. πŸ™Œ

Later yesterday, Ashar saw my code and figured out why the application was crashing. Saqib did the same in the morning. He resolved the issue and opened a pull request (PR) on GitHub.

So what was the error!? I made a typing mistake in my App component. I mistakenly wrote onDelele instead of onDelete as an attribute to my Counters component. This small typo was causing the application to crash whenever I pressed the delete button. πŸ˜•

You can see that I have made a typo in line number 10. After it was resolved, the application became stable and stopped crashing. Yeay!! πŸ₯‚

πŸ“¦ Stateless functional component

As the title suggests, React components which don’t have a state method, or any helper methods are called stateless functional components. You can write these components in a class, but there is also another way to code them.

You can write stateless functional components as a function. How!? Let me show you.

⚑ This function is called a factory function. It usually returns an object but in our case, JSX expressions. If you notice above, I have passed props as an argument to the NavBar function. It is because now we are using a functional component, and in functional components, we pass props as an argument. So that, later, it can be accessed inside the function.

πŸš€ Destructuring object

In my project, I have extensively used this.props[property name] in many places. This repetition has made my code messy. So what should we do about it?

We can make our code a bit cleaner by destructuring the props objects in the stateless functional components. We can then use the destructured object variables at the place of this.props[property name]. 🀞

πŸ” life cycle hook

React component go through a series of phases during their life cycle. They are the mount, update, and unmount phase. There are also other phases, but they are not frequently used. All of these phases have some unique methods called life cycle hooks. React automatically call these life cycle hooks according to their particular phase. πŸ’―

In the mounting phase, an instance of a component is created and inserted in the DOM. The mounting phase has three life cycle hooks

  • Β constructor
  • render
  • componentDidMount

πŸ“ƒ Update state happens when the props of a component get changed. In this phase, we have two life cycle hooks:

  • render
  • componentDidUpdate

Unmounting phase occurs when a component is removed from the DOM. It contains a life cycle hook called componentWillUnmount.

I have learned these life cycle hooks in details but I will not write more about how they work. Life cycle hooks were my last topic of today. Tomorrow, I will write about what I learned on my 9th day. Until then, cheerios ✌