I recently wrote an article about using object literals rather than
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. In fact, it’s one of the most subjective things about writing code, which is why it’s such a contentious issue.
So what hard rules can we nail down to make sure we always write readable code?
Let’s start with a definition. For me, readable code has always been about reducing cognitive load on developers who are coming to that code…
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:
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.
null are treated as “falsy” values. This means that it can be tricky to perform null checks around genuine false booleans — for example,
false — which can sometimes be a legitimate response from a function.
Below is a (very contrived) example:
If the response from
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. Let’s have a look at how they work.
As an example, let’s say we have a function that takes a rhyming slang phrase and returns the meaning. Using
if/else statements, it would look like this:
This isn’t great. …
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 that leaves you scratching your head. Worse yet, you may get stuck in an infinite loop as you desperately try to close the browser tab before you bring down the API…
So how can we deal with this warning properly rather than just ignoring it?
TL;DR: If you’re just looking…
With the sands of global state management constantly shifting, it can be difficult to know which option to choose. Redux has for a long time been the library of choice, but with the Context API providing state management baked into React itself, many people have been declaring that Redux is dead. And now with the release of Recoil, an early-stage project backed by Facebook, we have a React-specific library which easily integrates with React’s latest features.
But which one is best for your project? In this article, I am going to integrate a simple application with each library and offer…
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. Nine months on, I want to share some of the things I’ve learnt.
When I started, I was worried that the team would ask me questions I wouldn’t be able to answer. This ended up happening a lot in my first few weeks, but I quickly learnt that it’s absolutely fine…
I recently found myself in a situation where I had to add an additional parameter to a function that is used in multiple places in the codebase. Because of the order of the parameters, adding another one at the end would mean passing unnecessary values when I needed to call the function, but adding it in the middle would mean breaking instances where I was already calling it. I was on the horns of a dilemma.
Let’s have a look at an example:
This is a simple function to post some data, with an option to override the base…
Storing state in
localStorage is a great way of improving UX, so that a user can pick up where they left off when returning to an application. With React hooks, it’s super easy to abstract this functionality so it can be reused anywhere. In this article, I am going to go over the implementation, and also show you how it can be tested.
We are going to be building a good old counter app, and storing the
count variable in
localStorage so the value is persisted between sessions.
TL;DR — you can find the final code for the project here.