Performance Ops - Memoization/Caching of Functions in React

Summary - Understanding how Javascript stores variable values in memory will help you produce code that uses less memory. In React, we can use this memory to understand when we should create stored functions, rather than arrow functions that need to be recreated with each render.

Another way to do all the stuff below is instead to just use shouldComponentUpdate() which is a function that tells React to update a component or not if the dom re-renders. More on that can be found here..... you can also do things like Tree Shaking, which is supposed to be handled by your bundler like Webpack, which is when the bundler only compiles code that was used in the app and does not load all the code that comes with third-party apps. you can also work on code splitting so that only the code you want to load on a visual page loads. in other words, don't let code load that is for a different page, only have it load when that page is specifically requested. React has a way to do this using its lazy and suspense load technique. Though this guy says it best to use react-loadable. 

Memoization is a way to store results of a function and then return those results the next time the function is called, rather than running the function again. This is meant to improve performance, especially for very expensive functions.

Understand Memory First...
When a variable is created, a spot in memory is created to store the value. When a new variable is created, a new spot in memory is created to store its value. That is why objects and arrays cannot be properly compared by simply comparing a === b. It will always equate to false because they both point to different spots in memory.

var a = {}
var b = {}

a === b   // returns false

but if you made b = a, then b would look at the same spot in memory as a and thus would return true, because they would literally equal the same thing

var a = {}
var b = a

a === b   // returns true

Understanding this concept with React...
In this case, in React, we will use a form of Memoization where we will actually store the function, rather than using an arrow function, which would need to be re-rendered every time since arrow functions are not stored in memory.

class AlertBoxComponent extends Component {
    createAlertBox = () {
        alert(this.props.message)
    }

    get instructions = () => {
        if(this.props.do){
            return 'Click the button!'
        }

        return 'Do not click the button!'
    }

    render(){
        return (
            <div>
                {this.instructions}
                <button onClick={this.createAlertBox} />
            </div>
        )
    }

}

When the component is re-rendered due to a change in props, the button will NOT be re-rendered because its reference is always to the same spot in memory. So even if the 'message' changes, the button stays the same because it is just a reference to some external function, nothing within it is changing.

As opposed to using an arrow function within the button click like this...

        <button onClick={() => alert(this.props.message) } />

In this way, every time the component re-renders the button re-renders as well because the arrow function is being created on the spot, it is not pointing to a spot in memory.

This is not that significant, and probably unnecessary for small little components like this. But if you have a component that takes 5 seconds or so to render, it may be important to save resources by not having it re-render.