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...
RSS Feed