This is going to be a short article and an opinionated one. React team introduced hooks in release 16.8. Now, even after 2+ years, the main documentation still is primarily class based, with Hooks are tucked away as an advanced topic. I wonder why.

We’ve been developing several large React…


A good strategy can eliminate several classes of bugs

Image by Annette Meyer from Pixabay

According to the paper The Mythical Man Month by Frederick Brooks, developers are optimists and I agree. Most of us tend to focus on the happy path of a feature, working within the warmth of hot-reloads, VSCode and Chrome dev tools, trusting the APIs to always work and assuming that…


Back to basics — Writing conditionals

Image by Steve Buissinne from Pixabay

Case 1. Simple if / else if / else blocks

if (mode === "A") {
return { isDisabled: true };
} else if (mode === "B") {
return { isDisabled: true };
} else {
return { isDisabled: false };
}

This is a common pattern that we see in applications. However, it is ripe for future spaghetti like updates…


Use the “unknown” type

TypeScript provides a certain comfort that nowhere will your functions or components be invoked with the wrong input, your code is always checked statically as you write. However, most applications have some kind of server-side API that drives its state; at this point, TypeScript is not in play because the…


For React devs, it is not hard as you think

Source: Wikipedia

A few years ago, I started seeking simplicity and minimalism in everything. It reflected in my work too. So, when the TypeScript “hype” started, I simply shut myself out to it because adopting it seemed like a huge undertaking and it would disturb my zen. It would take a year…


Quality of an abstraction depends on the quality of its units

Image by Edi Nugraha from Pixabay

Fresh grads, recruits from coding camps, ex-Java/Perl/Ruby/Python coders tend to write in an imperative style. There is nothing wrong with it, I was in the same boat. I remember sometimes certain data transformation functions were so nested with conditional logic strewn through out, I couldn’t reason my own code after…


Happy and focused developers write better code

There are no ideal software projects. Challenges are plenty, caused by technology and people. But I believe that if you provide a fantastic developer experience, you end up creating a higher quality product. Bugs are a manifestation of lack of knowledge, confusion, short cuts, bad practices and over dependence on…


You don’t have to. Leave it to Prettier.

Image Source

Search online about using nested ternaries and you will see varying degrees of approvals. IMO, nested ternary expressions are compact and a better alternative to using if/else. Let us take a fictitious large if else condition:

const pageName = (index, state) => {
if (index === 0 && state…

Forming the correct mental picture of an important tool

Image source : https://pixabay.com/users/publicdomainpictures-14/

In my experience, a lot of developers write the reduce function with a mental model of its semantics. It is approached as a boilerplate-y function. A reduce function kinda gets booted like this in the code:

data.reduce((acc, item) => {
// do the thing;
// return something
}, initialValue);

All…


useState() vs useReducer()

Image adapted from Pixabay

useState()

useState() manages a single state variable, it is the most atomic state management hook in React.

const [counter, setCounter] = useState(0);

It returns the state variable that you can bind your components or logic to. It also provides a setter function that you can update the state’s value with. Modifying…

Rajesh Naroth

Frontend Architect, San Jose, CA

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