Quick start with Math.random — How would you generate a random number? What about a random string? You may already know the built-in Math.random function. It generates a random number between 0 and 1, not including the 1 number. Generating a Random Number Below is an example of using this utility. const no = Math.random(); console.log(no); //0.9045660913804647 As you…

The book is available in kindle and paperback formats — The State Management with React Hooks book is available in kindle and paperback formats. State management is a common challenge when developing web applications. This book explores state management with React Hooks by building several small applications. Here are some of the things we will go through: Understand what state…

Maps of Unicode characters, creating and shuffling a deck, and more — Do you want to know how to render a card with React Hooks or how to shuffle a deck of playing cards? In a previous article, we looked at how to render a playing card from a single suite with React Hooks. Next, we can extend that and show any…

Creating and deleting local and remote development branches — Some of the basic things we may need to do when working on a feature involved creating a development branch and then deleting that branch after merging all the changes. Here is how we can do that. Creating a Local Branch Below is an example of creating a new branch new-dev-branch from the master…

How to render a List with Elm — In this article, we get back to Elm. Do you remember it? It is the pure functional language used to build web applications. In a previous post, we looked at how to render a list in React. Now, we check how to do the same rendering in Elm. Let’s start. Using an Inline Function …

Maps, composite keys, default parameters, and more — In a previous article, we looked at how to search for elements in a large array. There we conclude that is faster to access such elements in an associated map instead of searching for them in the list. When checking to see if an element is present in a large…

Using a generic key name, composite key, and more — In a previous article, we looked at how to remove duplicates from an array. This time we start from that code and try to encapsulate it into a generic utility. Let’s first remember the solution we are going to use. Consider the following list of books. const arr = […

Controlled input, onInput event, e.target.innerHTML, and more — I worked for several weeks on a feature involving the use of a content-editable element in React. During this time I learned a few things regarding the usage of such an element, and I will share these lessons learned in this post. In HTML, elements can be editable. This approach…

Debounce, throttle, useCallback hook, and more — In a previous post, we looked at how to create a hook providing both the current value and the debounced value for a text input. This time we will just debounce or throttle the input callback received by a component. Let’s start by creating a simple component managing a search…