React – how to use pseudo-selectors with Radium

Image source: Tranmautritam/ @tranmautritam on Pexels

If you’re a fan of using inline styling and you find it difficult to deal with things like pseudo-selectors or media queries in React, one of the solutions for you could be Radium.

As specified on their website, Radium is a set of tools that help you manage inline styles on React elements. There are some features which this type of styling has issues accommodating (modifiers, pseudo selectors or media queries) and Radium is here to fix just that. Let’s see some code to understand how it’s used:

Read more

How to use the nullish coalescing operator (??) in Javascript

Image source: Negative Space/ @negativespace on Pexels

he nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

Simply put, the nullish coalescing operator let’s us truly check nullish values instead of falsey values.

Read more

The traps of useEffect() – infinite loops

Paul Esch-Laurent/ @pinjasaur on Unsplash

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

The Effect Hook lets you perform side effects in function components.

This article assumes you already know the basics of useEffect, but as a reminder: useEffect() mimics the behavior of componentDidMount, componentDidUpdate and componentWillUnmount life cycle methods from class components. UseEffect takes two arguments, one call back function (our effect) and a dependency array. This hook watches for changes and every time one of the dependencies changes, the effect runs again. If we want it to run just once, we leave the array empty.

Read more

How to use the ?. operator in Javascript

Image source: Kevin Ku/ @kevin-ku-92347 on Pexels

Because in Javascript objects can be very complex and have unpredictable structures, sometimes is hard to access their properties. There’s a real possibility that some nested objects or properties might not exist so when trying to use them, we run into errors. Optional chaining, as a part of ES2020, changes and simplifies the way properties are accessed from deep objects structures. It is also available in TypeScript, starting from version 3.7.

The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. The ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.

Read more