In React, useRef is a hook that…

returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component. (Source)

It is normally used to reference underlying DOM elements, an input field for example. However, you can also use it to store reference to any variable. In this way, it may seem no different than useState, but what distinguishes it from useState is that when we update a useRef reference, it does not cause the component to re-render. …

When two or more events are described as “asynchronous,” it refers to them not existing or happening at the same time. If you have ever worked in the service industry, then you probably know well how to manage your tasks asynchronously. For instance, if you were a waiter in a restaurant, once you entered an order on behalf of a customer, you don’t simply stop all you need to do to wait around for the chef to make the food. …

If you’re new to React, the concept of the virtual DOM has likely left your head virtually spinning. You’ve read that React solves the problem of DOM manipulation by using a virtual DOM, which is a lightweight representation of the DOM object. You’ve read that manipulating the DOM is slow, whereas doing so with virtual DOM is fast. And yet you’re still confused as to what all this really means.

In this article, I will simplify the React virtual DOM in a way that hopefully will build a better representation of this concept in your head!

The Problem

The DOM (or the…

Hi there. This is the first in a series of articles in which I will be covering computer science concepts in simplified, easy-to-understand terms. From my own personal experience, despite the enormous amount of resources out there, it might be difficult as a beginner to learn new programming concepts. This is because many sources often explain them using overly technical jargon.

So my goal here is to break things down to analogies/everyday examples as best as I can in order to serve any beginners out there who might be struggling to understand these core concepts.

Let’s jump into our first…

Hi! Previously, we learned how to build a basic Header component using Material UI and React to achieve the static result below:

Hey, all. Anh here. I am a web developer who recently helped build a responsive header for Femmecubator, an up-and-coming web app that seeks to provide resources and support for women of color in tech. In this article, I will guide you through how to create your own simple desktop header using MaterialUI and React.

By the end of this tutorial, you should accomplish the following result:

Hello all! Today I would like to walk through my iterative solution of how to reverse a linked list. But first, what is a linked list, you ask?

According to Wikipedia:

In computer science, a linked list is a linear collection of data elements whose order is not given by their physical placement in memory. Instead, each element points to the next. It is a data structure consisting of a collection of nodes which together represent a sequence.

A linked list is made up of nodes. Each node composes of two things: 1) some data value and 2) a pointer…

Hello, fellow soon-to-be software developer. If you are preparing for upcoming interviews like me, you’re most likely (or will about to be) grinding away on loads of algorithm problems. In this post, I’d like to share a walkthrough of a problem I recently solved, in hope of better understanding it myself, as well as helping anyone who might be struggling with similar problems.

For this particular bad boy, we’re tasked with writing a function that prints out a two-sided pyramid of n levels that follows a couple of simple rules. I figured out two ways of tackling this (one I…