Recently I received a comment on a blog post. It suggested that the event handler functions in my code example should be wrapped with useCallback. This seems to be a common misconception.

To really get our heads around useCallback lets look at something tangible.

The following is a very simple form component. It has some basic state and event handlers for updating that state when the inputs change. Take a minute to quickly scan through it. (Please note that this code deliberately misuses useCallback).

The common misconception here is that wrapping updateField in useCallback will improve performance. It will…

Its common to need to pass arguments to a React event handler (such as onClick or onChange) when a button is clicked or radio input changed.

In the following code we pass the rate function to the onClick property, the problem is that we also want to pass the selected rating to the handler

const rate = (val) => {
// Send rating
return (<button onClick={rate}>Rate 1</button>);

There are many ways of achieving this.

We could wrap function in another anonymous function, giving us control over the arguments that are passed.

const rate = (val) => { // Send…

We can use Array.reduce and Promises to sequentially process a list of async actions, such as XHR requests, ensuring they are processed in the order they are supplied.

function createSequentialProcessor(iterator) {
// return a function that accepts the items to be processed
return (items) => {
// create an empty results array
const results = []
// use Array.reduce to iterate over the array
return items.reduce((promise, item, idx) => {
// when the previous promise resolves...
return promise.then((result) => {
// ...add the result to the results array
if (result) results.push(result)
// call the iterator function with previous result…

Primitives are the simplest elements of a programming language. JavaScript currently has six primitive types: string, number, boolean, null, undefined, symbol , everything else is an object — yes, including arrays and dates.

All the types are used to define immutable values — values which can not be changed. We call values of these types primitive values.

A primitive type has a fixed size in memory. For example, a number occupies eight bytes of memory, and a boolean value can be represented with only one bit. The number type is the largest of the primitive types.

Variables hold the actual…

The code related to this post:

Functional programming allows us to craft applications using functions as building blocks. Wiring simpler functions together to define more complex functions & business logic. Because of its declarative, side-effect free nature code is easier to reason about, easier to test, becomes more readable and you become more productive (probably).

What are pure functions?

A pure function is a function where the return value is only determined by its input values, it will always evaluate to the same result value given the same arguments — we can call this function side-effect free. …

Trying to decode the following JSON

"key": [
"value": {
"id": "1000000000",
"active": true,
"config": {
"templates": {},
"id": 17,
"name": "Somename"
"key": [
"value": {
"id": "1110022222",
"active": true,
"config": {
"templates": {},
"id": 200,
"name": "something"


import Graphics.Element exposing (show)
import Dict exposing (Dict)
import Json.Decode exposing (Decoder, (:=), succeed, object2, list, string, bool, dict, int, maybe, decodeString, map)
type alias Model =
{ key: List String
, values: Value
type alias Value = { id: String , active: Bool…


Web Development Tidbits

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