renderedCallback in Lightning Webcomponent

It is used to perform the logic after a component has finished the rendering phase.
The hook flows from child to parent.
childComponent.html
<template>
</template>
childComponent.js
import { LightningElement} from 'lwc';
export default class ChildComponent extends LightningElement {
  renderedCallback(){
    console.log('Yes I am in child component');
  }
}
parentComponent.html
<template>
    <c-child-component>
    </c-child-component>   
</template>
parentComponent.js
import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
  renderedCallback(){
    console.log('Yes I am in parent component');
  }
}
LightningApplication
<aura:application extends="force:slds">
	<c:parentComponent>
	</c:parentComponent>
</aura:application>
Note:since the flow is from child to parent to it will display childcomponent output first later on it will
print parentcomponent output.
output:
Yes I am  in child component
Yes I am in parent component
Can we update the value in the renderedCallback?
Yes
parentComponent
<template>
    {blogName}
    <lightning-button label="update" onclick={handleClick}>
    </lightning-button>
</template>
parentComponent.js
import { LightningElement,api } from 'lwc';
export default class ParentComponent extends LightningElement {
	@api blogName;
	renderedCallback(){
		this.blogName='salesforce by brahmanaidu';
	}
	handleClick(){
		this.blogName='sfdcscenarios.blogspot.com';
	}
}

LightningApplication
<aura:application extends="force:slds">
	<c:parentComponent>
	</c:parentComponent>
</aura:application>
output:
By default it will print salesforce by brahmanaidu
once the button is clicked then it will print the same value(salesforce by Brahmanaidu).
Explanation:
renderedCallback gets executed even though when you click on a button so we will not able to update the values.
Still in the ui it will show the renderedCallback values. To get rid of this we need to make the use of Boolean variable.
Create a Boolean variable and assign the default value to true. Once it enters in to the renderedCallback at the end of method need to set it to false so that it won’t load again.
By using above methodology we will able to refresh the value in the ui.
parentComponent
<template>
    {blogName}
    <lightning-button label="update" onclick={handleClick}>
    </lightning-button>
</template>
parentComponent.js
import { LightningElement,api } from 'lwc';
export default class ParentComponent extends LightningElement {
   @api blogName;
   //By default set it to true
   @api hasRendered=true;
    renderedCallback() {
        if(this.hasRendered){
           this.blogName = 'Salesforce by Brahmanaidu';
           //set it to false so that it won't be executed once the button is clicked 
           this.hasRendered=false;
        }
    }
    handleClick() {
        this.blogName='sfdcscenarios.blogspot.com';
    }
}
LightningApplication
<aura:application extends="force:slds">
  <c:parentComponent>
  </c:parentComponent>
</aura:application>
output:
Salesforce by by Brahmanaidu
once the button is clicked then it will update the value and it will print sfdcscenarios.blogspot.com