Jump right past the middleman and bypass prop drilling with React’s Context API.

Anyone who’s ever coded anything beyond “Hello, World!” in React knows what a chore prop drilling can become.

Prop drilling refers to the practice of passing props down from a parent component to a nested subchild component, requiring travel through one or many intermediary components that don’t utilize the props data themselves. The Context API—which includes the popular useContext hook, one of the three “basic” hooks built into React along with useState and useEffect—aims to reduce the headache.

As we’ll see shortly, however, useContext doesn’t replace all prop drilling. It’s recommended mostly for passing down global props that are reused…

What’s best for your website, client-side rendering or server-side rendering?

While websites traditionally relied on server-side rendering to display code in a browser, the emergence of JavaScript libraries such as React, Angular and Vue have popularized a newer method known as client-side rendering. There are pros and cons to each approach, and it’s important for frontend developers to understand the nuances in order to make the best decisions for their apps.

Server-Side Rendering

When a user attempts to navigate to a webpage, the request is sent to the server and the server returns a fully fleshed out HTML document that the browser then renders to the screen. …

I recently completed a mock technical interview with Skilled Inc. to test my React knowledge. Though I scored a 4/5 and earned generally favorable remarks, my interviewer suggested a deeper dive into how JSX and the Virtual DOM actually work. Not just what they are, but how they are. I understood the higher-level concepts and answered all of his basic inquiries, but he caught me on this “gotcha” question: “Where does the Virtual DOM live?”

Don’t know the answer, either? Don’t fret—just keep on reading. This blog’s for you!


This React-specific syntax is an extension of JavaScript that allows for…

Have you ever designed an app that looks beautiful on your desktop monitor, but explodes into a shattered mess the second you open it on mobile or a laptop? Unless you’re Pablo Picasso, that’s probably not what you intended.

Responsive design is the practice of styling content to automatically adapt to varying screen sizes, so that a user can interact with it regardless if they’re on a massive professional gaming display or their grandma’s iPhone 5.

Many modern CSS libraries, such as Material-UI or Tailwind, come with some built-in responsiveness. Still, you’ll find yourself having to make the occasional manual…

Controlled form inputs are a core React concept that can be confusing for programmers new to the framework. Along with quirks like props and hooks, it’s one of the few nuances a web developer needs to understand before bringing even a basic React app to life.

Why do we need controlled components in the first place? Mutable state in React is typically kept in the state property of components and can only be changed using setState() or the useState() hook. HTML form elements such as <input> or <select>, however, also hold internal state — they track and save the information…

Hooks were introduced a little more than two years ago, when Facebook released React 16.8 in February 2019. Shifting over to hooks can be a little confusing, especially for developers who’ve gotten used to class components. Once you’ve made the adjustment, however, there’s no looking back.

Here’s what an incredibly barebones class component with state and a fetch call might look like.

Class Component

import './App.css'; 
import React, {Component} from 'react';
import CardContainer from "./components/CardContainer";
class App extends Component {

state = {jokes: []}
componentDidMount = () => {
.then(response => response.json())
.then(jokes => this.setState({jokes}))
render() {…

Event delegation in JavaScript.

Don’t Repeat Yourself.


It’s one of the most common mantras repeated to, and by, newbie programmers. Refactoring code to minimize repetition has many tangible benefits. It makes code easier to read, understand and revise. It reduces load times and creates faster apps. Most importantly for students, it solidifies conceptual understanding and helps a portfolio piece stand out to potential employers.

Event delegation is often a great way to start refactoring novice JavaScript code. This allows you to place a single EventListener on a parent element that does the work of a few, or dozens, or even hundreds of EventListeners…

A black-and-white image of a laptop on a desk with a code editor open.
My new reality.

Every mountaineer, in graduating from a novice to an adept, must master the art of routefinding. Not every path leads to the summit. Often many paths will, though each comes with its own unique challenges and experiences. Finding the best way — and best can be subjective — requires exploration, flexibility and the willingness to backtrack in order to ultimately progress.

A career is like climbing a mountain. There are infinite trails that lead to the summit of retirement, an overlapping web with many twists, turns and junctions. What to do, then, when the track you’re following loses its luster…

Jeff Golden

Full-stack developer. Full-stack adventurer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store