Forem: Arnas

Destructuring React props for the cleaner code

Arnas — Sun, 04 Nov 2018 12:48:30 +0000

In React it's very common to pass multiple props to the component. So it's no wonder that many of the React component functions interact with few or more props.

Class Component

For example, if we have simple component, which in render function uses 4 different props.

import React from "react";

class Row extends React.Component {
  state = {
    showEmail: false
  };

  render() {
    return (
      <div>
        <div>
          <span>First Name: {this.props.firstName}</span>
        </div>
        <div>
          <span>Last Name: {this.props.lastName}</span>
        </div>
        {this.state.showEmail && (
          <div>
            <span>Email: {this.props.email}</span>
          </div>
        )}
        <button onClick={this.props.doSomethingAmazing}>Click me</button>
      </div>
    );
  }
}

We could apply ES6 destructuring assignment to simplify code.

import React from "react";

class Row extends React.Component {
  state = {
    showEmail: false
  };

  render() {
    const { firstName, lastName, email, doSomethingAmazing } = this.props;
    return (
      <div>
        <div>
          <span>First Name: {firstName}</span>
        </div>
        <div>
          <span>Last Name: {lastName}</span>
        </div>
        {this.state.showEmail && (
          <div>
            <span>Email: {email}</span>
          </div>
        )}
        <button onClick={doSomethingAmazing}>Click me</button>
      </div>
    );
  }
}

Note: I didn't destruct showEmail variable because in the render function I am only using one property one time from state.

In my mind function like this

showAlert(){
    alert(this.state.showEmail)
}

reads more easily than

showAlert(){
    const { showEmail } = this.state;
    alert(showEmail);
}

Especially if there is a lot of code between destructing and variable usage. Though I would destruct variable if I want to use one prop for it more than one time.

showAlert(){
    const { showEmail } = this.state;
    alert(showEmail);
    alert(showEmail);
}

Function component

The benefits of ES6 destructuring assignment looks even nicer in the function component.

If we would have a similar component without a state:

import React from "react";

const Row = props => (
  <div>
    <div>
      <span>First Name: {props.firstName}</span>
    </div>
    <div>
      <span>Last Name: {props.lastName}</span>
    </div>
    <div>
      <span>Email: {props.email}</span>
    </div>
    <button onClick={props.doSomethingAmazing}>Click me</button>
  </div>
);

Applying props destructuring technique allows to write code like this:

import React from "react";

const Row = ({ firstName, lastName, email, doSomethingAmazing }) => (
  <div>
    <div>
      <span>First Name: {firstName}</span>
    </div>
    <div>
      <span>Last Name: {lastName}</span>
    </div>
    <div>
      <span>Email: {email}</span>
    </div>
    <button onClick={doSomethingAmazing}>Click me</button>
  </div>
);

Isn't that neat!

Prototype Design Pattern

Arnas — Wed, 31 Oct 2018 23:06:50 +0000

What is a prototype design pattern?

It's a software pattern that allows to use a prototype(sample, model) to replicate, clone or create objects that follow the same structure.

Type: Creational

Main use Cases

Cloning existing object instead of creating new one assuming that the object creation is an expensive operation.
The expensive operation examples include: sending multiple requests, querying a database, generating complex object property etc.

What problems does it solves?

It solves performance issues. By reducing resources hungry objects creation it allows an application to be more performant.

Furthermore, the pattern can abstract some of the object creation logic.

Related creation patterns:

Abstract factory who allows dynamic configuration.

How does it work?

There are few ways to use prototype pattern:

The standard that is used in object orientated languages
Based on the native prototype inheritance

The OOP one, mostly used in objective orientated languages. The AIPrototype class takes the initial prototype of an AI and uses it as a temple to create multiple AI's.

class AIPrototype {
    constructor(prototype){
        this.name = prototype.name;
        this.type = prototype.type;
        this.brains = prototype.brains || this.generateBrains();
    }

    clone(){
        // NOTE: if any of these properties are not a primitive type you need to create a shallow or deep copy.
        // For example if `this.brains` would be an object all AI objects that are generated 
        // from this `clone` function would use brain.
        // Though that may be good as they would think as one.
        return new AI(this.name, this.type, this.brains)
    }

    generateBrains() {
        // super expensive operation
        const randomStringThatSimulatesBrainFunctionality = Math.random().toString(36).substring(7);
        return randomStringThatSimulatesBrainFunctionality
    }
}

class AI {
    constructor(name, type, brains) {
        this.name = name;
        this.type = type;
        this.brains = brains
    }
}

const prototype = new AI("GLaDOS", "rampant");
const rampantAIPrototype = new AIPrototype(prototype);

const rampantAIV1 = rampantAIPrototype.clone();
const rampantAIV2 = rampantAIPrototype.clone();

console.log(rampantAIV1.brains === rampantAIV2.brains) // true

Native one, it uses Javascript prototype inheritance to share the same brains across multiple AI's.

class AI {
    constructor(name, type, brains){
        this.name = name;
        this.type = type;

        AI.prototype.brains = brains || this.generateBrains();
    }

    generateBrains() {
        // super expensive operation
        const randomStringThatSimulatesBrainFunctionality = Math.random().toString(36).substring(7);
        return randomStringThatSimulatesBrainFunctionality
    }
}

const rampantAI = new AI("GLaDOS", "rampant");

const friendlyAI = new AI("GLaDOS", "friendly");

console.log(rampantAI.brains === friendlyAI.brains) // true

Additional examples that could benefit from Javascript prototype inheritance might be Calculator. There could be add, div, sub functions defined in the prototype.

Feedback

Hey if you reached this place please tell me how did I do. I am experimenting and learning how to write a post.
So I would really appreciate the feedback, how was it, was it too short, was it too long :)

Sources

Why Hacktoberfest is an amazing event!

Arnas — Sat, 27 Oct 2018 22:48:48 +0000

I really fancy the idea of contributing to open source projects. But like every year on the non-October months, I am really great at avoiding sitting down and coding a feature for a lib I love. (wondering if that's just me ¯\(ツ)/¯ ) It's not something that I am proud of, but the GitHub contribution grid is great at confirming it.

Because of that, I am really grateful for the Hacktoberfest event. It's been the third time that it has given me a long needed push to do something for the community. It helped me finally make a pull request for an issue that was months old. Finally, I could create a feature that I could use in my project, feel the thrill of an issue hunt, raise issues that could improve projects. I'm happy that I did it.

And I am happy that I did it.

Big props to DigitalOcean who started it five years ago, and to the many other companies who joined it for the greater good.
You can look into https://devswag.io/ with tag Hacktoberfest for more companies that have joined this year.

P.s It's is my first post, how did I do?