Why Uninstalling React.js Made Me a Better Dev

Intro

If you can explain to a 5 year old how the React Virtual Dom works to a 5 year old right now, then go ahead and resume your doomscrolling, otherwise I need your undivided attention for the next 4 minutes.

At this very moment, thousands of developers around the world are suffering from a horrendous condition known as abstraction.

An abstraction is a simplified representation of a more complex system or process. Most are you are likely familiar with hearing the term from the D in SOLID principles (Dependency Inversion).

Problem

The problem with Abstraction is you have no idea what your code is doing, you just rely on the abstraction; if your apart of the most recent generation of developers who were born into the world of automatic garbage collection, old enough to have browsed Stackoverflow.com, but couldn't tell you what a stack overflow is, then this is for you.

This is a part of a greater commitment I have to the principle of deep learning, a concept I got from reading Cal Newport's book: Deepwork. I got fed up with not knowing why state objects in React must be immutable, or why writing async await inside of a for loop won't behave the way you expect it to (I once spent 4 days on this problem early in my career).

There is no such thing as raw talent as an engineer, however there is such a thing as raw understanding. The straw that broke the camel's back was when I attempted to learn React.js before understanding plain 'ol valilla Javascript as a bright eyed jr. developer. I thought I was above learning the basics.

I was writting a class component (the barbarian days of pre-hooks in React.js 16), and I created a function to serve as my event listener to handle user input on an input form:

import React from 'react';

class UserForm extends React.ClassComponent {
	
	constructor(props) {
		super(props)
		
	}
	
	state = {
		email: ''
	}
	
	handleUserInput = function(event) {
		const emailInput = event.target.value;
		this.setState({ email: emailInput });
	}
	
	
	return (
		<form>
		<input name='email' value={this.state.email} onChange={handleUserInput} />
		</form>
	)
}

I was quickly haulted in my tracks when this code did not run the way I anticipated it would, and I was left staring at an input form that simply would not recieve user input, it remained empty no matter how much I typed.

After unsuccessful attepmts to solve the issue myself, I tucked my tail between my legs and scowered the internet for solutions to my problem. The reason my component wouldn't work is because I did not understand binding and scope in Javscript.

The this keyword in Javscript is a resereved keyword, that allows you to reference the current object that you are inside of, so that you can refrence other properties or methods from within an object:

function callName(name) {
  constructor(name) {
	  this.name = name;
  }
  
  name = '';
  
  callName = function() {
	  console.log(this.name); // refrences the callName object/function
  }
}

You can change what object this refrences, by using the bind method in order to bind a different context to the this keyword.

TODO: Add a concrete code example showing this binding — what fails, what works, and why.

Since I, in all of my jr. developer genius had decided that I was above learning vanilla Javascript, I didn't know that in order to get my event handler to set the user email properly to state, I had to bind the event handler to the class:

function callName(name) {
  constructor(name) {
	  this.name = name;
	  
	  this.callName = this.callName.bind(this); // This is the key
  }
  
  name = '';
  
  callName = function() {
	  console.log(this.name); // refrences the callName object/function
  }
}

Let's take a look at a code example using C:

Agitate

TODO: Write the agitate section. Suggested angle: paint the larger picture — every React dev with this problem is one stack overflow click away from "fixing" the symptom without learning the cause, which means the same bug recurs in different shapes for years. Tie back to the cost of not learning vanilla JS.

Solution

TODO: Write the solution. Suggested angle: the concrete habit / framework you used to actually learn JS deeply (uninstall React, build N things in vanilla, the 4-hour rule from Newport, etc.).

Conclusion

TODO: Land the plane. Recap the lesson, name the action, drop a CTA.