Day 9: Done React

The Fyeamn tehcinuqe syas taht taecinhg a sbujcet makes you better at it, which is what I'm trying to do here. You may correct me if you saw mistakes in this post

Lifecycle components

• componentDidMount()

If any state updates happen here, it will be automatically be rendered. This is useful for API updates, where the data are not present immediately. Once the data was there, it will be rendered 💫.

class Cupcake extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flour: 200
    };
  }
  componentDidMount() {
    let newFlourMass = delayedApiCall(); // I should learn how to call an API lol
    this.setState({
      flour: newFlourMass
    });
  }
  render() {
    return (
      <div>
        <p>Flour amount: {this.state.flour}</p>
      </div>
    );
  }
}

Additionally, this where most people put their event listeners, so note it down, folks 🗒️.

• componentWillUnmount()

Let's say you have a temporary component (like, the congratz message of Duolingo).

After the component go out of the screen (and you saw your eye bags), anything associated with that should be cleaned up 🪥, including event listeners.

You can use this function to achieve this:

class Cupcake extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flour: 200
    };
  }
  componentWillUnmount() {
    document.removeEventListener("old-event", eventHandler);
  }
  render() {
    return (
      <div>
        <p>Flour amount: {this.state.flour}</p>
      </div>
    );
  }
}

• shouldComponentUpdate()

As we have established before, any state change will cause an UI re-render. If you have multiple states that don't cause any change in UI, that's just a waste of CPU time and memory.

And your users probably wouldn't like this 'feature' 🥴.

Instead, you can tell React when to re-renders the component:

class justTens extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  shouldComponentUpdate() {
    return this.state.count % 10 === 0
  }
  render() {
    return (
      <div>
        <p>Multiples of 10: {this.state.count}</p>
      </div>
    );
  }
}

Only when shouldComponentUpdate() returns true that the component will re-render. Isn't that sweet 🍬?

Inline CSS

Inline styling is a common practice in React. Especially considering that UI components come and go.

The syntax is kinda different though:

<p style={{backgroundColor: "purple", fontSize: 70}}>Life sucks.</p>

Notice those camelCasing? JSX won't accept standard CSS here, so we have to use an object literal (the curly brackets), with key-pair values.

Also numbers without units default to px. You need to use string to pass the number with its unit, e.g: "7em".

Return components with a condition

Yes, an if statement can do this (and ternaries too, for those people), but this solution is simply elegant:

<div>
  <p>Number of Children Captured: {childCount}</p>
  {childCount === 0 && <h3>Dang it.</h3>}
</div>

If the expression returns true, then the JSX is returned.

Early render 🕊️

If you are tempted to, you may write your whole app in React.

The problem is, it would took a longer time for the user to see the site loads. Another problem is JS is not something understandable by Google crawlers (me too), so you smash your SEO opportunities.

Kill two birds with one stone by rendering part of them on the server (if you use Node).

ReactDOMServer.renderToString(<h1>Render pls.</h1>);

Afterwords

Alright, that's all of React in FreeCodeCamp 🎉. Our next adventure would be Redux, which is a state management library (I have no idea what it is) 👀.

Happy learning everyone!

Follow me on Github!
Also on Twitter!