Four days lost to a broken React form because I never learned how 'this' binding works. Skip vanilla JavaScript and the same bug just keeps shape-shifting.

stage: #baby tags: react.js, javascript, deeplearning

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.

<generate code example of binding this keyword>

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

Solution

Conclusion

-------- WRITING FRAMEWORK TEMPLATE -------

Introduction

Hook with a relatable scenario or question that hints at the problem
Briefly acknowledge you understand the reader's struggle

Problem (25%)

Clearly define the specific problem your reader faces
Make it personal and relatable
Use concrete examples or scenarios

Agitate (35%)

Dig deeper into why this problem matters
Explore the emotional and practical consequences
Paint a vivid picture of what happens if the problem persists
Use "what if" scenarios to amplify urgency
Share statistics or data that reinforce the severity

Solution (35%)

Introduce your solution as the answer they've been seeking
Explain how it directly addresses the problem
Provide proof points (case studies, testimonials, data)
Break down the solution into digestible steps or components
Address potential objections preemptively

Conclusion (5%)

Summarize the transformation possible
Strong call to action
Create urgency or FOMO if appropriate

Stop Prop Drilling: The React State Management Solution You Actually Need

The Problem: Your React App is a Tangled Mess

You're building what should be a simple feature—maybe a shopping cart, user preferences, or a notification system. But suddenly you're passing props through five, six, seven levels of components. The Header component doesn't care about cart data, but it needs to pass it down to CartIcon. The ProductPage doesn't use user preferences, but it's shuffling them down to AddToCartButton.

Your component tree looks like a game of telephone, and you're spending more time tracing data flow through files than actually building features. You know something's wrong, but everyone says "just lift state up" or throws around terms like Redux, Context, Zustand, and Recoil without explaining when to actually use them.

The Agitation: It Gets Worse Before It Gets Better

Here's what happens when you ignore proper state management:

Your codebase becomes unmaintainable. Adding one new piece of global state means touching 10+ files. Your App.js balloons to 500 lines of prop declarations. New developers on your team get lost trying to understand where data comes from.

Performance tanks. Components re-render unnecessarily because they're receiving props they don't even use—they're just middlemen. Your users notice the lag. Your Lighthouse scores plummet. You start getting bug reports about "the app feeling sluggish."

Debugging becomes a nightmare. When something breaks, you can't tell where the state actually changed. Was it the grandparent component? The great-grandparent? You add console.logs everywhere, trying to trace the data flow like a detective solving a crime.

Feature development grinds to a halt. That "quick feature" your manager requested? It'll take three days because you need to refactor the entire prop chain first. You start avoiding certain parts of your codebase because they're too painful to touch.

And here's the worst part: you know you're doing it wrong, but you don't know what "right" looks like. You've heard about Redux, but the boilerplate seems overwhelming. Context API tutorials make it look simple, but then you read it's not for everything. You're paralyzed by choices, so you stick with what you know—even though it's clearly broken.

The Solution: A Clear State Management Strategy

The truth is, React gives you multiple state management tools because different problems need different solutions. You don't need to pick just one—you need to know when to use each.

For simple, localized data: Use useState and useReducer right in your components. Forms, toggles, modals—keep it simple.

For app-wide data that doesn't change often: Context API is your friend. Perfect for themes, authentication status, user preferences, and language settings. It's built into React, requires minimal setup, and eliminates prop drilling for data that many components need to read.

For complex, frequently-changing global state: This is where Redux Toolkit shines. If you have a shopping cart, real-time notifications, or interconnected data that updates from multiple places, Redux gives you predictable state updates, powerful debugging tools, and clear data flow. Modern Redux Toolkit eliminates the boilerplate nightmare of old Redux.

The framework that actually works:

Start with the smallest tool that solves your problem. Don't reach for Redux when Context will do.
Use Context for "read-mostly" global state. Theme, auth, user profile—things that many components need but don't change frequently.
Graduate to Redux Toolkit when you have:
- Complex state that updates from multiple places
- Need for middleware (API calls, logging)
- Desire for time-travel debugging and state persistence
- Multiple slices of related data
Keep local state local. Not everything needs to be global. Form inputs, modal visibility, dropdown states—these belong in component state.

Real-world example: In a recent e-commerce project, I used all three approaches simultaneously. Local state for form inputs, Context for user authentication and theme, and Redux Toolkit for the shopping cart and product inventory. Each tool did exactly what it was designed for, and the codebase was clean, performant, and maintainable.

Take Action: Fix Your State Management This Week

Stop prop drilling. Stop the chaos. Here's your action plan:

This week: Identify one piece of data you're currently prop drilling through 3+ components. Refactor it to use Context API. You'll see immediate results—cleaner code, fewer files to touch, and components that only know about the data they actually use.

Next week: If you have complex, interconnected state, try Redux Toolkit on one feature. Follow the official tutorial. You'll be surprised how much simpler modern Redux is compared to what you've heard about.

The payoff: Faster development, better performance, easier debugging, and a codebase you're proud to show other developers.

Ready to master React state management? Download my free decision tree that tells you exactly which state management solution to use for any situation →

Stop guessing. Start building clean React apps with confidence.

Retry

Claude can make mistakes.
Please double-check responses.

give

Sonnet 4.5

Why Uninstalling React.js Made Me a Better Developer