In this instalment of Spot the Bug, we have a ToDoList component which takes an array of items and renders them in a list. However, there’s a small bug in the code: Solution If you run the code, you’ll notice that tomorrow’s to do list doesn’t render nothing as expected…

In this instalment of ‘Spot the Bug’, we have a simple React toggle component which switches between active and inactive when clicked. However, it’s not working as expected. Can you see what the problem is? Solution The problem here is with how we’re passing the toggleActiveState function to the onClick…

OK, bear with me on this one… — I, like many other people, became the owner of a brand new puppy during the pandemic. It was something I had wanted to do for a long time, but switching to remote work meant it finally became a possibility. It has been both life-affirming and challenging in equal measure. But…

Make your code the best version of itself — I recently wrote an article about using object literals rather than if/else and switch statements to make your code more readable and was interested to read through the responses. It’s clear that code readability means different things to different people. …

Build awesome UIs in your React apps — One of the biggest challenges as a UI developer is making your code reusable whilst also keeping it clean and maintainable. I’m sure this pattern is familiar: You get some designs for a component that you build, test, and deploy. Everything is looking great. A new feature comes along that…

A deep dive into optional chaining and the nullish coalescing operator — Of all the new features released as part of the ES2020 (aka ES11) specification, I have found optional chaining and the nullish coalescing operator to be the ones I find most useful. In this article, I will show you how they can benefit your projects. Nullish Coalescing Operator In JavaScript, undefined and null…

Write better conditionals in JavaScript with object literals — Writing complex conditionals in JavaScript has always had the potential to create some pretty messy code. Long lists of if/else statements or switch cases can get bloated quickly. When there are multiple conditions, I find object literals to be the most readable way of structuring code. …

Know how useEffect works to avoid lint warnings and infinite loops — If you have ever worked with useEffect, you have probably come across the following lint warning: React Hook useEffect has a missing dependency. Either include it or remove the dependency array. Sometimes it’s as simple as just adding the required dependency, but often this results in some pretty unexpected behaviour…

Sharing some insights from the past 9 months — Last year, I started in my current role as a lead UI engineer. At the time, it felt like an intimidating step up — I had no experience of management, and I was moving to work in an industry I knew nothing about, in the middle of a pandemic. …