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……
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).
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": [
"step",
"17"
],
"value": {
"id": "1000000000",
"active": true,
"config": {
"templates": {},
"id": 17,
"name": "Somename"
}
}
},
{
"key": [
"step",
"200"
],
"value": {
"id": "1110022222",
"active": true,
"config": {
"templates": {},
"id": 200,
"name": "something"
}
}
}
]
Solution
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