Photo by Sigmund on Unsplash

What is useParams?

useParams is a React Router Hook that allows you to access dynamic parameters in the URL.

useParams returns an object of key:value pairs of URL parameters. The key is the name you've assigned in the URL; the value is what is being passed in.

How do we use useParams?

  • Import useParams from react-router-dom.
  • Replace the part of the path that you would like to access as a parameter with a colon and an identifier of your choice. …


Photo by Markus Spiske on Unsplash

What is an effect/a side effect?

The terms side effect and effect are used interchangeably and mean the same thing in React: they refer to operations that don’t affect the UI or output value. If the operation you are performing is managing any state change other than the final return value, then it’s a side effect!

The function of a React component is to handle render and manipulate the UI. Because side effects don’t impact the render phase, they don’t belong in the main body of a component.

What is useEffect?

useEffect is a React Hook that allows you to…


Photo of seven leaves in a line, showing the progression of autumn leaf colours. The left-most leaf is green and each leaf is in various stages of colour change; the final colour is red, as shown in the leaf on the right.
Photo of seven leaves in a line, showing the progression of autumn leaf colours. The left-most leaf is green and each leaf is in various stages of colour change; the final colour is red, as shown in the leaf on the right.
Photo by Chris Lawton on Unsplash

What is state?

State stores the current status of components and allows us to track changes. State is created and updated in React by the useState function, and is fully controlled by the component.

What is useState?

useState is a React Hook, which is another way of saying that it's a React function that allows us to hook into React features and easily manipulate a functional component.

useState receives an initial state as an argument, and returns an array of 2 items:

  • a variable that represents current state;
  • a function that we can use to update that specific piece of…

Photo by Noah Näf on Unsplash

As a JavaScript developer, it’s pretty common to be asked — whether in an interview question or in an effort to manage data — to merge two or more arrays and remove all duplicates, returning only the unique values. The process is often referred to as “de-duping,” and it’s part of your life if you’re a dev working with any sort of data.

As with everything in JavaScript, there are a few different ways to tackle this. I’m going to talk about two approaches:

  • using the spread operator to merge and filter() and indexOf() to remove duplicates;
  • the newer Set


Two brass mail slots are on a wooden door. The left slot is labeled A and the right slot is labeled B.
Two brass mail slots are on a wooden door. The left slot is labeled A and the right slot is labeled B.
Photo by Jason Dent on Unsplash

Two array methods that can be easily mixed up are map() and forEach(). Keeping track of the differences between the two can be a little murky — but each has distinct advantages that can make them ideal for certain situations!

When you’re choosing an array method, the first thing to think about is what you need to get back after it executes. Do you need a new array? Do you just want single items? What will allow you to do the next things that you need to do?

map() and forEach() both iterate over an existing array, and they both…


Should you use if-else, switch, or a lookup table?

One of the things that differentiates a programming language (like JavaScript) from a markup language (like HTML) is the ability to handle control flow. Control flow is what makes a language smart, and it’s the process of directing which part of your code should run and at which time. You might not even realize that you’re actually using control flow — and conditionals — every single day! Is it raining out? If true, bring an umbrella. Are you tired? If true, go to bed. If false, go ahead and start the next episode of Bridgerton.

Conditional statements are one of…


Or, how to create an array that does what you expect

A JavaScript array is an incredibly smart object that at its core is a fancy list. Really: you put things in order, they’re stored in order, they’re given back to you in order. They’re magical and, if you’re not creating them properly, incredibly frustrating.

There are two main ways to create arrays in JavaScript: you can use a literal, or you can use a constructor.

The literal looks like this:

const myAmazingArray = [];

and can be defined with or without any array elements. The one above doesn’t have any elements yet.

The constructor looks like this:

const myAmazingArray =…


I’ve recently heard a few people saying that it’s bad form to comment your code — that it makes your code dirty and cluttered, and that it encourages poor coding syntax.

Everyone has their own coding preferences (tabs! Camel case!), so in light of people speaking up about commented code, I felt this would be a good time to talk about one of mine. Here’s why I always comment my code:

  1. Nobody can read your mind. When you’re working in a team, whether it’s with one other person or 30 devs and engineers, people need to understand not just what


How to set and forget (part of) your icon design

I’ve recently rediscovered Adobe Creative Cloud (and by ‘rediscovered’, I mean that I’ve got a licence through my work that brings me no end of joy), so I’ve been re-learning some of the Creative Suite programs. The last time I was intimately familiar with Illustrator was in CS…3 maybe? I assumed that Adobe had since made CSI-like effects possible with the tap of a single button, so I was eager to take this baby from zero to a whole bunch of icons in 60 seconds.

Part of my job involves making icons, and there’s never just one colour of an…


How to help make your code make sense

From the moment I first had to pull a CSS class name out of thin air, I wanted to know if there was a standard naming convention that could make my style sheets feel a bit less haphazard. Assigning classes felt messy because it was so arbitrary, so I was thrilled to learn that about several different methodologies for streamlining, slimming, and organizing CSS, each based on its own type of logic.

Semantic names: related to meaning in language or logic

In my earliest web design projects, the CSS class names under the hood weren’t pretty. I knew that naming was really important, but I struggled to find names…

Jessica Del Grande

Web Developer, @junocollege alum (cohort 13).

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