State and Props

Before digging deep in the life cycle of React events, it is good to have an Idea about what event, prop, and state are? and what are the differences between props and states?

React Events a React event is a method that you can use when defining a React componenet and it allows you to update the UI and the application state, this event has a life cycle that we will demonstrate below.

props

Props stands for properties, and in React these are the holders of data from parent to child elements, you can think of it as they are arguments and components as functions.

State

States are properties for their own components i.e they are not passed from another component. When the state changes; the component re-renders.

What are the major differences between props and states?

1. Props pass data to other componenets, while states hold data for own component.
2. States affects the render of the component.

React Component Life Cycle

As we can see in the diagram the render takes place before componentDidMount, the life cycle of React starts with mounting which in turn begins with constructor.

constructor,render,componentDidMount,React Updates, and componentWillUnmount happens in this order. Each event holds its own charecteristics and is limited to some state and rendering manipulation.

Take componentDidMount for example, it declares that a component has just been mounted, this event is good to load anything using a network request, and subscriptions.

for details see medium,React: Component Lifecycle Events