Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

Don't Forget About Class Variables In React!

4/10/2018

0 Comments

 
This is a quick little tip about sharing local variables across functions in your React components. It's something that a fellow developer, Ben, reminded me of in a pair programming session recently so I decided to write a blog post about it!

The Situation

We were coding up a component in React, and we had some piece of data that was only the concern of this one single component but needed to be used in two independent functions of our program. I went to reach for the "Reacty" things like throwing the data onto this.props or even using React's this.setState method to add it to the state. However, Ben reminded me that you could also just put the data on this itself. Since we were using Es6 JavaScript and all arrow functions "this" would refer to the context of the class instance itself in any place throughout the code and that putting it here would simply make it a class level instance variable. 

Why?

Why did we choose to put the data right on this? Well, we knew that the data was not changing and not directly being represented in the view of the application. React watches the props and state of the app's components and based on that determine when re-renders and invocation of lifecycle methods are needed so it seemed like a performance slowdown with no benefit to put the data on the state or props of the component. This is all because we were not displaying it, of course, just using it in some of our functions. To me Es6 classes are very interesting because you cannot declare instance level variables outside of your functions, something that was the norm and foundation of working with classes in many similar-looking OOP, Algol-descendant languages like Java or ActionsScript 3. Interestingly, JavaScript still gives you the power to create and modify instance level variables (by just referencing them on the this object in functions within the class), although in JavaScript you lose the explicit control of what can access these variables. 

React And Es6

Code and programming languages come and go at an incredibly quick pace. I think one of the things that ultimately put the nail in the coffin for AngularJS was that it was so tightly coupled to Es5 Javascript, which, at its peak, was at the bleeding edge of JavaScript. JavaScript Es6 Classes to me are a HUGE improvement to prototypal inheritance, global variables, the wacked out scoping of variables, and other Es5 quirkities. Although I was glad to see these going away, as a ClojureScript fanboy and functional programmer I was weary when I first saw JavaScript moving to a more class-based, OOP system. I think it's nice to think of a JavaScript class as a wrapper for a set of functions. Try to have you functions be as pure as possible and don't overuse this variables. React and Es6 JavaScript are the kings of the castle right now so if you are using them then, high five, this post and this tip about this are things you can take home and use right now! And as a bonus tip, make sure to be always open-minded and learning! You never know how the web and JavaScript will evolve over the next few years and how long it will take before someone new takes the throne...
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Want FREE access to
    my daily stock tips 
    ​newsletter called,
    "The Triple Gainers"?

    Sign up here!

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2021