I came across a neat pattern when working with a function in a reducer (a useReducer() hook, not redux).

The goal

I needed to remove a particular property from a list (just a plain object) stored in state.

I have the property id, so shouldn’t be too difficult.

As we’re working in a reducer, we need to be wary of state mutation and side effects of our functions. i.e. we want to return the new and updated state without mutating the original state.

Here is an example of my original attempt at the reducer function:

function deleteProperty(state, payload) { const { id…

If === is not equal to == then what does it equal???

Huh?

Let’s break it down

First, let us define the two operators:

• === is known as the Strict Equality Operator
• == is the Abstract Equality Operator

They both behave the same, in that they both return a boolean value telling us if two expressions are equal.

A === B // returns true or false
Y == Z  // also returns true or false

The difference is that the Strict Equality Operator (===) does no type conversion (also called type coercion).

1 == "1" // returns true1 === "1"…

Remote-working during a pandemic

I recently started a job as a software developer and part of the draw was that I had the option to work from home.

Over the past 8 months, I’ve gradually adapted to a mixed week of 2/3 days of remote work, balanced with days in our London office.

For those who have been forced to working remotely since COVID-19, I want to assure you, this is not normal.

At this moment, you are not just “working from home.” You are “at your home, during a crisis, trying to work.” — Kelli María Korducki

Working during a pandemic, no matter…

So you want to remove an item from an array in JavaScript?

Well, you’re not alone!

It’s one of the most upvoted JavaScript questions on stack overflow and can feel a little unnatural considering how simple it is to array.push().

Method 1 — remove an element with Array.filter()

If you want to remove an element while leaving the original array intact (unmutated) then filter() is a good choice!

Removing a single element:

const itemToRemove = 3const originalArray = [2, 51, 3, 44]const newArray = originalArray.filter(item => item !== itemToRemove)console.log(newArray) // [2, 51, 44]
console.log(originalArray) // [2, 51, 3, 44]

Breaking that down.

We define a…

I recently upgraded the popper in our component library.

The complexities involved in managing the placement, flipping and overflow prevention of a popper make writing your own implementation from scratch intimidating (and above all time-consuming).

Popper.js does a better job than I would at explaining why you should use them.

React Popper 2.× usePopper hook

The documentation on implementing the usePopper hook is relatively limited. (It took me way longer than it should have to get a working version 😅)

The usePopper hook takes three parameters:

• a reference to the toggle element e.g. a button
• a reference to the popper element
• a config object

and…

Recently I was trying to extend a component from our company component library to make the style fit a more niche use case.

The underlying functionality of the component was relatively complex and well written so I didn’t really want to re-write it.

I went with a standard styled-component extension:

const myThing = styled(existingComponent)`
  color: snazzyNewColor;  ... or some slightly more useful styles
`

But unfortunately, no extra styling was applied!

I ran into a situation where my styled-component was not extending the existing component.

A little browse through the styled-components docs and I found this:

The styled method works…

React dev tools are great for inspecting your components, checking their props or state live. Maybe you want to confirm things are working as planned or to help with your debugging.

It can be tricky though when you’re inspecting your code and there is no reference to your component names.

Checking through would be much easier if each of your components had a meaningful display name.

Well, they can.

Here is a simple custom card component and button (pictured above) in the React Developer Tools:

Joining a team as a junior developer means that, by default, you’re working on a codebase that you didn’t write.

Chances are, it’s a legacy codebase written over a long period of time by more than one developer.

You will begin to work on different parts of the project, and as you get more confidence, you will start to spot parts of the project which maybe aren’t up to date with modern standards.

But weirdly, the legacy code still works fine.