Commit31 //JS React [Lifecycle Methods]

I am studying JavaScript React with @skillcrush, in this module we will cover lifecycle methods

I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!

---

🐕 Greetings travelers! We are continuing our JS React course with Skillcrush. My spouse is off on a camping trip, which meant I did get up around 6-6:30AM. Usually I just wake up when he does because he has to be at school shortly after 7. So the pets and I all slept in a bit this morning. I don’t know about other folks, but I NEED rest.

I had a strain in my back and neck yesterday and getting that bit of extra sleep really allowed for it to dissipate. Sometimes it can be hard to get to sleep, but it really does go along way when my body needs to heal. Take this as your cue to go have a nap!

Since I just published yesterday afternoon, not much new to discuss. So let’s get into it!

Lifecycle Methods

LIFECYCLE METHODS
functions that you can add to a class component, which react will call at important moments in the life of that component

Component mounting phase is when you tell a component what it should do when it comes to life, such as opening saved data.

Component updating phase is when a component has been updated, allowing you to do things like saving data every time the component is updated.

Component unmounting phase is when you tell a component what it should do before React removes the DOM elements created by that component, such as canceling a timer.

Steps to make notes (data/changes) available after closing and reopening the UI:

1. Save state to the browser’s storage after each re-render

2. Pull the saved value when the UI is reopened

3. Set state to the value from the previous session

JSON
an object with helpful methods for converting other data types to strings & back to their original format

Using Lifecycle Methods

For our chalkboard app, we are going to update it so that is stores data entered into it, even when we refresh or leave the website and come back.

  componentDidMount() {
    const stateString = localStorage.getItem("stateString");
    if (stateString) {
      const savedState = JSON.parse(stateString);
      this.setState(savedState);
    }
  }

  componentDidUpdate() {
    const stateString = JSON.stringify(this.state);
    localStorage.setItem("stateString", stateString);
  }

My CodeSandbox

Check out the link to try entering in new items and see if they save for you when you refresh!

For me it helps me when typing into the software to see which statements are automatically coming up with an answer. That tells me more if they are a native property in React/JS/whatever or if it’s a name/term that the instructor came up with that’s being utilized.

Viewing Lifecycle Methods via Console Log

First challenge. Basically we are going to see how lifecycle methods work by using the console log.

See the console log.

  componentDidMount() {
    // TODO: read from local storage, and if we find a message there, log it to the console
    const savedMessage = localStorage.getItem("savedMessage");
    if (savedMessage) {
      console.log(savedMessage);
    }
  }
  componentDidUpdate() {
    // TODO: save the message from our component's state to the browser's local storage
    localStorage.setItem("savedMessage", this.state.message);
  }

Basically we created a new variable to save the message in localStorage via the componentDidMount and componentDidUpdate.

Finish Your Name Tags Using Lifecycle Methods

Looks like we are finalizing this for a portfolio project!

  componentDidUpdate() {
    const savedNameString = JSON.stringify(this.state.names);
    localStorage.setItem("savedNames", savedNameString);
  }

  componentDidMount() {
    const savedNamesString = localStorage.getItem("savedNames");
    if (savedNamesString) {
      const savedNames = JSON.parse(savedNamesString);
      this.setState({ names: savedNames });
    }
  }

Now the data will save down in our local browser cache.

My CodeSandbox

Quiz: Lifecycle Methods

100% correct! Woohoo! I guess I like modules that are bit more on the user-end interactive.

I’d love to hear your thoughts on this subject. Share below!

---

How did you learn JS React? Any courses or challenges you would recommend? Please leave me a comment!

---