We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Login to see the application

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

You will be redirected back to this page right after signin

Blog hero image

Cheatsheet to React Lifecycle Hooks (Part 1)

Lakshya Khera 21 October, 2021 | 3 min read

I know this is the topic you can find anywhere so what's the point of writing it again? What if I tell you this is the only post or article you would need to understand react lifecycle hooks and for revision as well.

So, here is the backstory I need to brush my knowledge in React and I started revising lifecycle so I thought I should write a blog and if I need to come back to something I can just look over it.

So, I'm writing 3 part tutorials on React lifecycle hooks.

  • Component creation hooks in class-based components
  • Component update hooks on props and state change in class-based components Link
  • React hooks in functional components Link

What is React lifecycle hooks?:

So every react component goes through a lifecycle(creation, rendering, updating) and react emits certain methods which can be overloaded, so we can(as a developer) use it for anything(Spoiler: with some restrictions).

As in every other tutorial, I'll show you this cool flow diagram! :D

This is lifecycle flow for a class component (yes, now functional components have lifecycle hooks as well npm update react please.)

Before diving,

Side effects are methods which have no relation with the application as it calls 3rd party libraries or API which lives outside the application ecosystem.

Join our newsletter
Join over 111,000 others and get access to exclusive content, job opportunities and more!

Component creation

So, when a component is created it goes through some phases including constructor to ComponentDidMount and we'll be discussing every method in detail and what kind of action you should take in it. Bear with me :D

  • First constructor is called, it takes props as its argument and injects it to the component.
    • Do: Prepare state, according to props if you want so.
    • Don't: Side Effects or anything which might take the time or fail as it'll mess up with the application or impacts performance.
  • Then, getDerivedStateFromProps is called, this is called whenever props are changed, so it exists both in creation and update cycle, as it's doesn't depend on the component instance we use static before it (i.e static getDerivedStateFromProps). It should return an object to update the state, or null to update nothing.
    • Do: Sync your state according to props.
    • Don't: Side effects
  • Now render method is called, and this is the method which returns JSX so what you should do in it? Structure your JSX nothing else!
  • Now Childs Components are rendered! The same cycle is followed in children and so on.
  • Now ComponentDidMount is called, everything is done! Congratulations! Now you can call side effects but don't update state it'll re-render the component.

That's pretty it! Hope you enjoyed it :D, please like and add me up on Twitter and Linkedin it does motivate me a lot. Ps: I need motivation these days :')

References:

Originally published on dev.to

Related Issues

open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 2
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 2
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Open
  • 0
  • 0
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 1
  • Intermediate
  • HTML

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email