DEV Community: Alex Devero

Getting Started with React.memo()

Alex Devero — Mon, 06 Dec 2021 06:33:20 +0000

There are is a number of built-in tools to improve performance of React applications. One of these tools is high-order component React.memo(). This tutorial will help you learn about React.memo(). You will learn what it is, how it works and how to use it in your React apps.

What is React.memo()

Let's start with what React.memo() is. It is a high-order component (HOC). A higher-order component is a function that takes another component and returns a new component. You can think about HOC as a wrapper that transforms some component you give it into a new component.

How memo() helps

React.memo() helps us increase performance of React apps by avoiding unnecessary renderings of components. Every time React has to decide whether to update the DOM, it compares the previous render with the new render. If these two renders are different, some data are different, React will re-render the DOM to update it.

This is done in order to keep the UI in sync with the data. When this happens, React re-renders components that are currently rendered in the DOM. This can take some time and consume some resources, depending on how many components are rendered. The React.memo() helps us make this process faster.

When we wrap some component with React.memo() three things will happen. First, React will render the component on the initial render as usually. After that, however, React will also memoize the component. React will store the result of that render in memory.

memo() and memoization

Interesting thing happens when something causes React to re-render the DOM. This time, with memo(), React will not automatically re-render the component. Instead, it will check if the new props of the component are the same as of the memoized component from the previous render.

If React recognizes that props of the component didn't change, it will reuse the memoized result of the previous render and skip re-rendering the component from scratch. React will basically re-use the "older" version of the component. When React uses the previous version of the component, it also re-uses whole content of that previous component.

This means that if we have some computation in that component this compilation may not repeat itself, unless it is necessary, i.e. some external resource changed. This means that we can avoid not only unnecessary re-renders of component but, more importantly, repeating computations that are not necessary inside those component.

What if the component props changed? React will re-render the component and run any necessary computations inside it. This, memoization with memo(), works only with functional components. However, we can achieve this with class components if we use PureComponent.

How to use it

One good thing on React.memo() is that it is very easy to use. All we have to do is to take some functional component we want to memoize and wrap with memo(). We can do this with new component we want to create as well as component that already exists.

// Functional component without memo():
export const App = () => {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  )
}

// Functional component with memo():
// Import memo from React:
import { memo } from 'react'

// Wrap App component with memo():
export const App = memo(() => {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  )
})

// Create component and memoize it later:
// Import memo from React:
import { memo } from 'react'

// Create component:
const App = () => {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  )
}

// Memoize and export App component:
export const AppMemoized = memo(App)

Shallow comparison and custom comparison function

By default, React does shallow comparison of props object when it compares props from the previous render and the next. This will be enough in most cases, if the props you are passing are simple, i.e. primitive data types. It may not be enough if you are working with complex props.

For example, if you are passing objects or arrays through props, shallow comparison done by React will not be enough. React will probably fail to recognize that some object passed through props is the same as the previous. This is because when it comes to objects, React will compare references, not objects themselves.

This will cause problems with shallow comparison. Let's say we create a new object that is the same as some other object. The fact is that these two objects will not be the same. They will have the same shape, contain the same data, but they will have different references.

For React, and JavaScript as well, when it comes to objects, references are more important. When two references are different, shallow comparison will fail.

// Compare "the same" objects:
console.log({ foo: 'foo' } === { foo: 'foo' })
// Output:
// false

// Or:
const obj1 = { foo: 'foo' }
const obj2 = { foo: 'foo' }

console.log(obj1 === obj2)
// Output:
// false

// Compare "the same" arrays:
console.log([1] === [1])
// Output:
// false

// Or:
const arr1 = [1]
const arr2 = [1]
console.log(arr1 === arr2)
// Output:
// false


// Use the same reference:
const obj1 = { foo: 'foo' }
const obj2 = obj1

console.log(obj1 === obj2)
// Output:
// true

const arr1 = [1]
const arr2 = arr1

console.log(arr1 === arr2)
// Output:
// true

Using custom comparison function

Fortunately, React allows us to use custom comparison function to check for props equality. So, if we know that we need more thorough comparison, we can provide React.memo() with custom comparison function. This function comes as the second argument, right after the component we want to memoize.

// Functional component with memo():
// Import memo from React:
import { memo } from 'react'
import { isEqual } from 'lodash'

// Create custom comparison function:
function compareProps(prevProps, nextProps) {
  return isEqual(prevProps, nextProps)
}

// Wrap with memo() and use custom comparison function:
export const App = memo(() => {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  )
}, compareProps) // Pass compareProps as the 2nd argument

// Create component and memoize it later:
// Import memo from React:
import { memo } from 'react'
import { isEqual } from 'lodash'

// Create component:
const App = () => {
  return (
    <div className="App">
      <h1>Hello world</h1>
    </div>
  )
}

// Memoize with custom comparison function:
export const AppMemoized = memo(App, compareProps) // Pass compareProps as the 2nd argument

If you want to use custom comparison function, remember two important things. First, this function must always return a boolean. Second, it must return true if previous props and next props are equal. Otherwise, it should return false.

When to use memo()

Everything has some price. This is why before you try to use memo() by default you should consider one thing. When you use it, React stores the result of rendering component in memory. If you decide to memoize a large number of components it will lead to more memory consumption.

Another thing to consider is the comparison. When React compares previous and next props it requires some resources. This might not be such a big deal if your app is small or if you don't have too many memoized components. If you work on a bigger project, re-renders might be actually cheaper than memoization.

The fact is that React is already doing a good job at optimizing rendering performance. So, before trying to memoize everything, profile your app and identify issues. If you find that some components render when it is not necessary, try using React.memo(). Then, profile your app again and compare the results.

Repeat this process with all components you want to try to memoize. If you see some meaningful improvements, keep the memoized version. Otherwise, if there is no improvement in performance or there is some penalty, just let the component re-render.

Some rules of thumb

Aside to the above, there are some rules of thumb that can help you find components that might be worth memoizing. First, look for components that re-render often, usually with the same props. This often happens when component is forced to re-render by its parent component, even though the component itself didn't change.

React.memo() can help you avoid these re-renders induced by parents. Second, try memoizing a component if the component always renders the same result given the same props. Third, your component renders a lot of UI. The more UI a component renders, the more expensive these renders usually are.

In these cases, resources necessary for memoization and comparison check might be smaller than resources for subsequent re-renders.

Conclusion: Getting started with React.memo()

React.memo() can be very useful tool when we want to improve performance of our React apps. It makes it very easy to memoize components and avoid unnecessary re-renders. I hope that this tutorial helped you understand what memo() is, how it works and how to use it.

JavaScript Reduce Method Made Simple

Alex Devero — Mon, 29 Nov 2021 06:33:22 +0000

The JavaScript reduce method is one of the most used array methods. It is also a part of functional programming. In this tutorial, you will learn what the reduce method is and how it works. You will also learn how to use this method and what are some of the things it can do with it.

Introduction

The reduce() method is one of the features that was add to JavaScript in ES6 (ECMAScript 2015). It quickly became one of the most often used array methods. What this method does is it reduces a given array into a single value by executing a reducer function you provided. It essentially reduces an array into a single value.

The syntax

The syntax of reduce method is simple. This method takes two parameters. The first one is a callback function. The callback function will be invoked for every element in the array. When it is invoked, the reduce() passes four parameters into this callback function.

These parameters are accumulator, currentValue, index and the original array. The accumulator is the value reduce() returns after the last call of the callback. One exception is when reduce() runs for the first time. In this case, the value of accumulator is the value you provided as the initialValue argument.

The currentValue is the current element being processed in a given array. The index is the index of the current element that is being processed in the array. If you provide the initialValue this index starts at 0. If you omit the initialValue, index will start at 1. Last parameter is the array that is being processed.

The second parameter of reduce() method is the initialValue. This is the initial value you want the reduce method to start with.
This initial value is used as the first argument for the first call of the callback function. If you omit it, reduce() will use the first element in the array as the initial value.

// Syntax of reduce():
someArray.reduce(callback, initialValue);

// Hypothetical reducer callback function:
const reducer = (accumulator, currentValue, index) => {
  // ... do something
}

Usage

The reduce method is usually used for operations such as calculating total sums and averages or finding minimum and maximum values in a given array. That said, you can also use reduce() for other things. For example, to change structure of objects or to flatten two-dimensional arrays.

Summing values in an array

One of the simplest examples of using the reduce() method is summing values in an array. This can be done with a simple callback function in which we take the currentValue and add it to the accumulator. This will repeat for every iteration. currentValue will be added to the increasing value of the accumulator.

After the last number in the array is processed, reduce() will return the accumulated value of accumulator. If we want the reduce to start from a different number than 0 we can set that starting number as the initial value. Otherwise, we can set the initial value to 0 and reduce() will start with that.

// Create array of numbers:
const numbers = [1, 3, 5, 7, 9, 11];

// Sum the numbers array:
const sum = numbers.reduce((accumulator, currentValue, index) => accumulator + currentValue, 0)
// For each iteration, add the "currentValue"
// to the value of the "accumulator".

// Log the result:
console.log(sum)
// 36

Finding averages

We can also use if...else statement to return different results from the callback function. This is handy for example when we want to get the average of numbers in an array. We can add a if...else statement that will check if the currently processed item is the last item of the array.

This check will use the index of currently processed item and the length of the array. If the currently processed item is the last item in the array we will divide the accumulated value by the length of the array. If it is not the last item, we will return the accumulated value.

Before each check, we will add the currently processed value to the accumulator.

// Create array of numbers:
const numbers = [1, 3, 5, 7, 9, 11];

// Find the average:
const average = array.reduce((accumulator, currentValue, index, array) => {
  // For each iteration, add the "currentValue"
  // to the value of the "accumulator".
  accumulator += currentValue

  // Check if currentItem is the last item in the array:
  if (index === array.length - 1) {
    // If it is, divide the accumulated value
    // by the length of the array and return the result:
    return accumulator / array.length
  } else {
    // Otherwise, return the accumulated value:
    return accumulator
  }
})

// Log the result:
console.log(average)
// 6

Finding minimum and maximum values

We can use reduce to find the minimum value in an array by comparing the value of accumulator and currentValue arguments. If the value of accumulator is less than the value of currentValue, we will return the accumulator. Otherwise, we will return the currentValue.

// Create array of numbers:
const numbers = [1, 3, 5, 7, 9, 11];

// Find minimum value:
const min = numbers.reduce((accumulator, currentValue) => {
  // If the value of "accumulator" is less than "currentValue"
  // return the "accumulator", else return the "currentValue":
  return accumulator < currentValue ? accumulator : currentValue;
})

// Log the result:
console.log(min)
// 6

We can easily find the maximum value by switching the condition inside the callback function.

// Create array of numbers:
const numbers = [1, 3, 5, 7, 9, 11];

// Find maximum value:
const max = numbers.reduce((accumulator, currentValue) => {
  // If the value of "accumulator" is greater than "currentValue"
  // return the "accumulator", else return the "currentValue":
  return accumulator > currentValue ? accumulator : currentValue;
})

// Log the result:
console.log(max)
// 11

Flattening arrays

The reduce method can be also helpful when we want to flatten multi-dimensional arrays. We can do this by using the concat() method on the accumulator, passing the currentValue as an argument to the concat() method. Note that this simple solution will work only with two-dimensional arrays.

If you have an array with more than two dimensions, the flat() method will do the job.

// Create array of numbers:
const numbers = [1, [3, 5], [7, 9, 11], [13, 15, 17]];

// Flatten an array:
const numbersFlattened = numbers.reduce((accumulator, currentValue) => {
  // Concatenate the accumulator with the currentValue:
  return accumulator.concat(currentValue);
}, [])

// Log the result:
console.log(numbersFlattened)
// [1,  3,  5,  7, 9, 11, 13, 15, 17]

Counting number of occurrences

We can use the reduce method also for tasks such as counting the number an item occurred in an array. We can do this by setting the initial value to an empty object. During each iteration, we will check if currently processed item is an existing property of that object.

If it is, we will change the value of this property by 1. This is the number of occurrences. If the item is not an existing property, we will add it, with a value of 1. Then we will return the accumulator object. At the end, we will get an object with all items as properties and number of occurrences as values.

// Create array of numbers:
const fruit = ['apple', 'pear', 'lemon', 'avocado', 'apple', 'banana', 'pear', 'apple', 'pineapple'];

// Count the number of occurrences:
const occurrences = fruit.reduce((accumulator, currentItem) => {
  // Check if item exists in accumulator object:
  if (currentItem in accumulator) {
    // If so, increase the number of occurrences by 1:
    accumulator[currentItem] = accumulator[currentItem] + 1
  } else {
    // Else register new occurrence:
    accumulator[currentItem] = 1
  }

  // Return the accumulator object:
  return accumulator
}, {})

// Log the result:
console.log(occurrences)
// {
//   apple: 3,
//   pear: 2,
//   lemon: 1,
//   avocado: 1,
//   banana: 1,
//   pineapple: 1
// }

Changing shape of objects inside arrays

When we reduce an array we don't have to reduce it to a single value. We can also change its content. For example, if it is an array of objects we can change the shape of those objects. The returned value will be still an array, only the shape of the objects inside the array will be different.

// Create array of numbers:
const records = [
  { name: 'Joe', grade: 'A' },
  { name: 'Tom', grade: 'B' },
  { name: 'Sandra', grade: 'B' },
  { name: 'Joel', grade: 'C' },
  { name: 'Victoria', grade: 'A' }
]

// Change the structure of objects in "records" array:
const updatedRecords = records.reduce((accumulator, currentItem) => {
  // During each iteration, transform currently processed object
  // into this shape:
  accumulator[currentItem.name] = {
    grade: currentItem.grade,
    passed: ['A', 'B'].includes(currentItem.grade)
  }

  // Return the modified object:
  return accumulator
}, {})

// Log the result:
console.log(updatedRecords)
// {
//   Joe: { grade: 'A', passed: true },
//   Tom: { grade: 'B', passed: true },
//   Sandra: { grade: 'B', passed: true },
//   Joel: { grade: 'C', passed: false },
//   Victoria: { grade: 'A', passed: true }
// }

Conclusion: JavaScript Reduce Method Made Simple

Even thought the syntax of reduce method is simple, it can help us do interesting things with arrays. I hope that this tutorial helped you understand what the reduce() method does, how it works and how to use it.

Immutable Arrays and Objects in JavaScript, the Native Way

Alex Devero — Mon, 22 Nov 2021 06:35:03 +0000

The idea of writing immutable JavaScript is becoming more and more popular. Primitive data types in JavaScript are immutable by default. Arrays and objects are not. This tutorial will show you how to replace mutable operations with arrays and objects with their immutable alternatives.

Arrays

Arrays are one of the most frequently used data structures in JavaScript. There are many built-in methods we can use when we work with them. The problem, when it comes to immutability, is that many of these methods are mutable by nature. Using these methods means changing the original data.

These mutable methods are push(), pop(), splice(), shift(), unshift(), reverse() and sort(). Fortunately, there are alternatives we can use to replace these methods if we want to keep our JavaScript code immutable. Let's take a look at them.

Push

The push() method allows us to add a new item at the end of existing array. We can achieve the same result while keeping our data immutable using spread syntax. All we have to do is to create new empty array, spread the original, and add any item we want to add. If we want to add multiple, we can.

// Mutable way:
const mutableArray = ['Apple', 'Netflix', 'Microsoft']
// Add item at the end:
mutableArray.push('Amazon', 'Uber')

console.log(mutableArray)
// Output:
// [ 'Apple', 'Netflix', 'Microsoft', 'Amazon', 'Uber' ]


// Immutable way:
const immutableArray = ['Apple', 'Netflix', 'Microsoft']
// Add item at the end:
const newArray = [...immutableArray, 'Amazon', 'Uber']

console.log(immutableArray)
// Output:
// [ 'Apple', 'Netflix', 'Microsoft' ]
console.log(newArray)
// Output:
// [ 'Apple', 'Netflix', 'Microsoft', 'Amazon', 'Uber' ]

Unshift

Similar method to push() is unshift(). The difference between these two is that instead of adding new item at the end of the array, unshift() adds the item at the beginning. It inserts the item as the first. The immutable approach is similar to push(), except that we have to reverse the order of spread and new items.

// Mutable way:
const mutableArray = ['Apple', 'Netflix', 'Microsoft']
// Add item at the beginning:
mutableArray.unshift('Amazon', 'Uber')

console.log(mutableArray)
// Output:
// [ 'Amazon', 'Uber', 'Apple', 'Netflix', 'Microsoft' ]


// Immutable way:
const immutableArray = ['Apple', 'Netflix', 'Microsoft']
// Add item at the beginning:
const newArray = ['Amazon', 'Uber', ...immutableArray]

console.log(immutableArray)
// Output:
// [ 'Apple', 'Netflix', 'Microsoft' ]
console.log(newArray)
// Output:
// [ 'Amazon', 'Uber', 'Apple', 'Netflix', 'Microsoft' ]

Pop

The pop() method does two things. First, it removes the last item from an array. Second, it returns the removed item. When it removes the item it changes the original array. This happens even if you try to assign the result of this operation to a variable. We can do both in immutable fashion.

When we want to get the last element of an array, we can use indices. We take the length property of an array, subtract 1 and the result is the last item. If we also want to get the array, any items that precede the last, we can use slice() method.

// Mutable way:
const mutableArray = ['Apple', 'Netflix', 'Microsoft']
// Get the last item:
const lastItem = mutableArray.pop()

console.log(lastItem)
// Output:
// 'Microsoft'

console.log(mutableArray)
// Output:
// [ 'Apple', 'Netflix' ]


// Immutable way:
const immutableArray = ['Apple', 'Netflix', 'Microsoft']

// Get the last item:
const lastItem = immutableArray[immutableArray.length - 1]
// Get the rest of the array:
const restOfArray = immutableArray.slice(0, immutableArray.length - 1)

console.log(immutableArray)
// Output:
// ['Apple', 'Netflix', 'Microsoft']

console.log(lastItem)
// Output:
// 'Microsoft'
console.log(restOfArray)
// Output:
// [ 'Apple', 'Netflix' ]

Shift

A reversed alternative to pop() is shift(). This method also removes an item from an array, but it removes it from the beginning. It also changes the original and returns the removed item. Immutable alternative is similar to pop(). The difference here is two-fold.

First, to get the first item in the array we can use 0 as the index. For slice(), and getting the rest of an array, we can say that we want everything except the first item.

// Mutable way:
const mutableArray = ['Apple', 'Netflix', 'Microsoft']
// Get the first item:
const firstItem = mutableArray.shift()

console.log(firstItem)
// Output:
// 'Apple'

console.log(mutableArray)
// Output:
// [ 'Netflix', 'Microsoft' ]


// Immutable way:
const immutableArray = ['Apple', 'Netflix', 'Microsoft']

// Get the first item:
const firstItem = immutableArray[0]
// Get the rest of the array:
const restOfArray = immutableArray.slice(1)

console.log(immutableArray)
// Output:
// ['Apple', 'Netflix', 'Microsoft']

console.log(firstItem)
// Output:
// 'Apple'
console.log(restOfArray)
// Output:
// [ 'Netflix', 'Microsoft' ]

Splice

The splice() method is handy when we want to add, remove or replace items in/from an array. We can achieve the same in immutable fashion using combination of spread syntax and slice(). First, we create a new array. Next, we use spread to copy the original. After that, we use slice() to keep what we want.

// Mutable way:
const mutableArray = ['Apple', 'Netflix', 'Microsoft']
// Replace the 2nd item with two new items:
mutableArray.splice(1, 1, 'Uber', 'Amazon')

console.log(mutableArray)
// Output:
// [ 'Apple', 'Uber', 'Amazon', 'Microsoft' ]


// Immutable way:
const immutableArray = ['Apple', 'Netflix', 'Microsoft']

// Replace the 2nd item with two new items:
const newArray = [
  ...immutableArray.slice(0, 1),
  ...['Uber', 'Amazon'],
  ...immutableArray.slice(2)
]

console.log(immutableArray)
// Output:
// ['Apple', 'Netflix', 'Microsoft']

console.log(newArray)
// Output:
// [ 'Apple', 'Uber', 'Amazon', 'Microsoft' ]

Sort

The sort() method makes it very easy to sort any array. By default, it sorts item in an ascending order. However, we can also provide custom sorting function to sort the array in any way we want. If we want to sort some array while keeping it immutable, we don't have to re-invent the wheel.

We can still use the sort() method, but in combination with spread syntax. The spread syntax will help us copy the original array. We can then take the copy and sort it in any way we want. This change will leave the original array untouched.

// Mutable way:
const mutableArray = ['Microsoft', 'Apple', 'Netflix']
// Sort the array:
mutableArray.sort()

console.log(mutableArray)
// Output:
// [ 'Apple', 'Microsoft', 'Netflix' ]


// Immutable way:
const immutableArray = ['Microsoft', 'Apple', 'Netflix']

// Sort the array:
const newArray = [...immutableArray].sort()

console.log(immutableArray)
// Output:
// [ 'Microsoft', 'Apple', 'Netflix' ]

console.log(newArray)
// Output:
// [ 'Apple', 'Microsoft', 'Netflix' ]

Reverse

The reverse() is an alternative to sort() that helps reverse the order of items in an array. Just like the sort(), it does so by changing the original array. When we combine this method with spread syntax, we can create a copy of the array and apply reverse() to the copy, leaving the original untouched.

// Mutable way:
const mutableArray = ['Apple', 'Microsoft', 'Netflix', 'Amazon', 'Uber']
// Reverse the array:
mutableArray.reverse()

console.log(mutableArray)
// Output:
// [ 'Uber', 'Amazon', 'Netflix', 'Microsoft', 'Apple' ]


// Immutable way:
const immutableArray = ['Apple', 'Microsoft', 'Netflix', 'Amazon', 'Uber']

// Reverse the array:
const newArray = [...immutableArray].reverse()

console.log(immutableArray)
// Output:
// [ 'Apple', 'Microsoft', 'Netflix', 'Amazon', 'Uber' ]

console.log(newArray)
// Output:
// [ 'Uber', 'Amazon', 'Netflix', 'Microsoft', 'Apple' ]

Objects

Objects are just as popular in JavaScript as arrays, if not even more. Just like arrays, objects are also by default mutable. When we create an object, we can add new properties or remove existing at any time. There are ways we can ensure this never happens by freezing or sealing objects.

However, what if we actually want to change an object, add or remove properties, in immutable way? We can do both.

Adding properties

When we want to add properties while keeping our objects immutable we can use the spread syntax. With spread, we can create a clone of an object and spread it into a new object. Then, we can add any addition properties we want.

// Mutable way:
const person = {
  firstName: 'Lori',
  lastName: 'Robinson',
  email: 'lori.robinson@example.com',
}

// Add properties:
person.birthday = '3/2/1993'
person.phoneNumber = '(094)-230-2145'

console.log(person)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   email: 'lori.robinson@example.com',
//   birthday: '3/2/1993',
//   phoneNumber: '(094)-230-2145'
// }


// Immutable way:
const person = {
  firstName: 'Lori',
  lastName: 'Robinson',
  email: 'lori.robinson@example.com',
}

// Add properties:
const newPerson = {
  ...person,
  birthday: '3/2/1993',
  phoneNumber: '(094)-230-2145',
}

console.log(person)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   email: 'lori.robinson@example.com'
// }

console.log(newPerson)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   email: 'lori.robinson@example.com',
//   birthday: '3/2/1993',
//   phoneNumber: '(094)-230-2145'
// }

Modifying existing property values

We can use the same approach also when we want to change existing property values. First, we create a new object. Next, we spread the original object into the new object. Finally, we add any key-value pairs we want to change. When some property already exists, its value will be overwritten by the new value.

// Mutable way:
const person = {
  firstName: 'Lori',
  lastName: 'Robinson',
  email: 'lori.robinson@example.com',
  phoneNumber: '(476)-632-5186',
}

// Add properties:
person.firstName = 'Nicholas'
person.lastName = 'Clark'
person.email = 'nicholas.clark@example.com'

console.log(person)
// Output:
// {
//   firstName: 'Nicholas',
//   lastName: 'Clark',
//   email: 'nicholas.clark@example.com'
//   phoneNumber: '(476)-632-5186'
// }


// Immutable way:
const person = {
  firstName: 'Lori',
  lastName: 'Robinson',
  email: 'lori.robinson@example.com',
  phoneNumber: '(476)-632-5186',
}

// Add properties:
const newPerson = {
  ...person,
  firstName: 'Nicholas',
  lastName: 'Clark',
  email: 'nicholas.clark@example.com',
}

console.log(person)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   email: 'lori.robinson@example.com',
//   phoneNumber: '(476)-632-5186'
// }

console.log(newPerson)
// Output:
// {
//   firstName: 'Nicholas',
//   lastName: 'Clark',
//   email: 'nicholas.clark@example.com',
//   phoneNumber: '(476)-632-5186'
// }

Removing properties

When we want to remove some object property, one option that will do the job is the delete operator. We can do the same in an immutable way using destructuring assignment and spread syntax. With destructuring assignment, we can extract object properties one by one.

After that, we can use the spread syntax to get an object that contains the rest of properties that remained.

// Mutable way:
const person = {
  firstName: 'Lori',
  lastName: 'Robinson',
  email: 'lori.robinson@example.com',
  phoneNumber: '(476)-632-5186',
}

// Remove properties
delete person.email
delete person.phoneNumber

console.log(person)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson'
// }


// Immutable way:
const person = {
  firstName: 'Lori',
  lastName: 'Robinson',
  email: 'lori.robinson@example.com',
  phoneNumber: '(476)-632-5186',
}

// Add properties:
const { email, phoneNumber, ...newPerson } = person

console.log(person)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   email: 'lori.robinson@example.com',
//   phoneNumber: '(476)-632-5186'
// }

console.log(newPerson)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson'
// }

console.log(email)
// Output:
// 'lori.robinson@example.com'

console.log(phoneNumber)
// Output:
// '(476)-632-5186'

Working with nested structures, pt1

Previous solutions work well with simple objects that doesn't use nesting, or doesn't contain nested objects or arrays. When we have to deal with these use cases, we can still use spread syntax. However, we have to remember that we must use spread on objects or arrays on all levels of nesting.

If we forget this, we will create deep copy only of the top level object. Any nested objects will remain shallow copies. This means that changing those nested objects will lead to changing the originals.

// Create more complex object by adding array as a value:
const person = {
  firstName: 'Lori',
  lastName: 'Robinson',
  email: 'lori.robinson@example.com',
  phoneNumber: '(476)-632-5186',
  hobbies: ['gardening', 'reading', 'music'],
}

// This will not work:
const newPerson = { ...person }
// Try to add new hobby only to new object:
newPerson.hobbies.push('skiing')
// Note: this will change the original
// hobbies array as well

console.log(person)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   email: 'lori.robinson@example.com',
//   phoneNumber: '(476)-632-5186',
//   hobbies: [ 'gardening', 'reading', 'music', 'skiing' ]
// }

console.log(newPerson)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   email: 'lori.robinson@example.com',
//   phoneNumber: '(476)-632-5186',
//   hobbies: [ 'gardening', 'reading', 'music', 'skiing' ]
// }

When we use spread on all levels the problem in the previous example disappears. This also applies to nested object literals. When some object contains object literals, we have to spread them individually, just like arrays. This will ensure we are working with deep copies, not just shallow, the originals.

// Create more complex object:
const person = {
  firstName: 'Lori',
  lastName: 'Robinson',
  email: 'lori.robinson@example.com',
  phoneNumber: '(476)-632-5186',
  hobbies: ['gardening', 'reading', 'music'],
  family: {
    firstName: 'Tobias',
    lastName: 'Robinson',
    relationship: 'brother',
  }
}

// This will work:
const newPerson = {
  ...person,
  hobbies: [...person.hobbies], // Spread the array as well
  family: { ...person.family } // Spread the object as well
}
newPerson.hobbies.push('skiing')
newPerson.family.relationship = 'stepbrother'

console.log(person)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   email: 'lori.robinson@example.com',
//   phoneNumber: '(476)-632-5186',
//   hobbies: [ 'gardening', 'reading', 'music' ],
//   family: {
//     firstName: 'Tobias',
//     lastName: 'Robinson',
//     relationship: 'brother'
//   }
// }

console.log(newPerson)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   email: 'lori.robinson@example.com',
//   phoneNumber: '(476)-632-5186',
//   hobbies: [ 'gardening', 'reading', 'music', 'skiing' ],
//   family: {
//     firstName: 'Tobias',
//     lastName: 'Robinson',
//     relationship: 'stepbrother'
//   }
// }

Working with nested structures, pt2

This approach works well with structures that are more complex, but not too much. When we deal with more complex structures, it can quickly become a pain. Nobody wants to spread dozens of objects or arrays. In this case, we can use combination of spread, JSON.parse() and JSON.stringify().

With JSON.stringify(), we can transform an object into a string. We can than transform it back to an object with JSON.parse(). Finally, spread will help us spread that parsed object into a new one. This will create a deep copy in which we can change any nested properties we want without accidentally changing the original.

// Create more complex object:
const person = {
  firstName: 'Lori',
  lastName: 'Robinson',
  email: 'lori.robinson@example.com',
  hobbies: ['gardening', 'reading', 'music'],
  family: {
    firstName: 'Tobias',
    lastName: 'Robinson',
    relationship: 'brother',
  }
}

// This will work:
const newPerson = {
  ...JSON.parse(JSON.stringify(person)),
}
newPerson.hobbies.push('skiing')
delete newPerson.email
newPerson.family.relationship = 'stepbrother'

console.log(person)
// Output:
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   email: 'lori.robinson@example.com',
//   hobbies: [ 'gardening', 'reading', 'music' ],
//   family: {
//     firstName: 'Tobias',
//     lastName: 'Robinson',
//     relationship: 'brother'
//   }
// }

console.log(newPerson)
// {
//   firstName: 'Lori',
//   lastName: 'Robinson',
//   phoneNumber: '(476)-632-5186',
//   hobbies: [ 'gardening', 'reading', 'music', 'skiing' ],
//   family: {
//     firstName: 'Tobias',
//     lastName: 'Robinson',
//     relationship: 'stepbrother'
//   }
// }

Conclusion: Immutable arrays and objects in JavaScript, the native way

Working with arrays and objects in immutable way helps us keep our code predictable, track changes and avoid unexpected side effect. I hope that this tutorial made it easier for you to understand how you can work with arrays and objects while keeping them immutable.

A Short Introduction to Pipeline Operator, and Piping, in JavaScript

Alex Devero — Mon, 15 Nov 2021 07:06:23 +0000

Functional programming provides many useful concepts. One of these concepts is pipeline operator and piping. This tutorial will help you understand what pipeline operator and piping are, how they work and how to use them. You will also learn how to create your own pipe function in JavaScript.

A brief introduction

The pipeline operator is one of those features that has been discussed for a long time but never became a feature of JavaScript language. This changed and pipeline operator entered as a draft the stage 1 of TC39 process. In 2021, it moved from stage 1 to stage 2.

This means that pipeline operator is still not a stable feature of JavaScript language and its specification can change. However, there is already a Babel plugin that allows us to work with this feature. That said, we don't even need the plugin or the feature to emulate what pipeline operator does.

We can take existing JavaScript syntax and create our own function that will lead to similar results as the pipeline operator. But before we do that, let's take a look at the pipeline operator and piping.

Piping made simple

The idea of piping functions may sound difficult to understand, but it is not. Put simply, piping about taking some input and passing it into a function and then sending it into another function. This way, you can take some value as an input and send it through a sequence of functions to get one value as an output.

One way to get this done is by using method chaining. With this approach, you take a value and call some method on it. Then, instead of calling another method on the result of previous call separately, you "chain" the next method the first.

// Chaining example with string:
const sentence = '  There - is some -  mess around.  '
// Modifying the string with method chaining:
const cleanedSentence = sentence
  .replace(/-/g, ' ')
  .replace(/\s+/g, ' ')
  .trim()

console.log(cleanedSentence)
// Output:
// 'There is some mess around.'

Another option is using piping, but without the pipeline operator. This solution works well with custom functions. Instead of chaining functions, you pass one function call as argument to another function call. This way, you can pass a value returned by one function to another to get the result you need.

// Piping example:
// Define some functions:
const add = (num) => num1 + 10
const subtract = (num) => num1 - 5
const multiply = (num) => num1 * 9

// Use piping to pass value through cascade of functions:
const num = multiply(add(subtract(15)))
console.log(num)
// Output:
// 180

There is one problem with this. Your code can quickly become pile of unreadable mess as you add more and more function calls. Now, let's take a look at how we can handle this with the help of pipeline operator.

The pipeline operator

In JavaScript, the pipeline operator uses a very specific syntax. It uses this "pipe" |> symbol. When you want to use this operator you have to put it on a specific place. This place is between the value you want to pass to a function call and the function you want to call.

If you want to pipe multiple functions, you put the |> symbol between each of them. Remember that you don't put the |> symbol after the last function. The last function is the last thing in the chain. Let's demonstrate pipeline operator by rewriting the example with piping to this new syntax.

// Without pipeline operator:
const add = (num1, num2) => num1 + 10
const subtract = (num1, num2) => num1 - 5
const multiply = (num1, num2) => num1 * 9

const num = multiply(add(subtract(15)))

// Log the value of "num":
console.log(num)
// Output:
// 180


// With pipeline operator:
const numPiped = 15 |> add |> subtract |> multiply

// Log the value of "num":
console.log(numPiped)
// Output:
// 180

// Notes:
// 1. Value 15 gets passed to add() fn
// 2. The value returned by add() fn is passed to subtract()
// 3. The value returned by subtract() fn is passed to multiply()
// 4. The value returned by multiply() fn is assigned to numPiped variable

As you can see, our code is much more readable when we use the pipeline operator. It may take a moment to get used to the new syntax and some differences, such as missing parentheses in function calls.

Custom piping function

The pipeline operator looks useful. The problem that may prevent us from starting using it is that it is only in stage 2. This means it is not guaranteed it will make it to the JavaScript specification. Even if it will eventually make it, we don't know when. It already took a lot of time for the operator to make it to stage 2.

Fortunately, there are two options. The first one is the Babel plugin. This plugin will allow as to use pipeline operator right now, before it reaches stage 3 or 4. Another option is creating our own custom piping function using current JavaScript. Let's focus on the second option, and create the custom function.

This piping function will be simple. What we need is a function that accepts unknown number of arguments. This function will iterate over all arguments, which will be functions, and call each. Each function call will return a value. Our piping function will take each value and add it to the previous.

For each call, our piping function will use the previously returned value as an argument for the current call. After the last function is called, our piping function will add the last value to the accumulator of previous values and return the final value. This may sound complicated, but we can get this done easily with reduce() method.

// Functions to pipe:
const add = (num1, num2) => num1 + 10
const subtract = (num1, num2) => num1 - 5
const multiply = (num1, num2) => num1 * 9

// Custom piping function
/**
 * Pipes functions and returns a single value
 * @param {Array} args - array composed of initial value and functions
 * @return {any}
 */
const pipeFn = (...args) => args.reduce((acc, fn) => fn(acc));

// Testing custom piping function:
const numPiped = pipeFn(15, add, subtract, multiply)

console.log(numPiped)
// Output:
// 180

As you can see, the custom piping function is very simple. It is composed of two things, array of arguments and one reduce method. One thing some developers may not like is the initial value passed as the first argument. One way to fix this is by using currying.

We can remove the initial value from the arguments array with functions in the first call and move it to a separate function call.

// Functions for piping:
const add = (num1, num2) => num1 + 10
const subtract = (num1, num2) => num1 - 5
const multiply = (num1, num2) => num1 * 9

// Updated piping function:
const pipeFn = (...args) => val => args.reduce((acc, fn) => fn(acc), val);

// Test:
const numPiped = pipeFn(add, subtract, multiply)(15)
console.log(numPiped)
// Output:
// 180

Final note

It is worth repeating that at the moment of writing this article, pipeline operator is at stage 2. Although there is a Babel plugin that can transpile pipeline operator syntax into JavaScript modern browsers can understand I would use this feature in production code. A lot can change and a lot can break.

For anyone who wants to use this feature I would suggest using some custom implementation, either one we used or some alternative. This will ensure your code works no matter the changes in the operator proposal. And when the operator is out, you can easily migrate your custom implementation if you want.

Conclusion: A short introduction to pipeline operator, and piping, in JavaScript

Pipeline operator makes it easy to use the concept of piping functions while keeping your code readable and short. This operator is not an official part of JavaScript yet. However, this doesn't mean we can use it today, either directly with the help of Babel or indirectly through custom implementation.

How to Create Simple Redux Store with Redux Toolkit

Alex Devero — Mon, 08 Nov 2021 06:55:03 +0000

How to Create Simple Redux Store with Redux Toolkit

Setting up even a simple Redux store used to be hard. Not anymore. With the help of Redux Toolkit we can create Redux stores much faster and with less code. This tutorial will help you learn how to use Redux Toolkit to create such a simple store and how to implement it in your React app.

Demo on Codesandbox.

About the project and dependencies

In this tutorial we will take a look at how to create a simple redux store with Redux Toolkit. The app we will be working on will be an app for creating books collection. It will allow users to add books to collections and remove them. It will also show all books currently in collection.

The main app state for book collection will be the Redux state. Adding and removing books will be handled by reducer functions. We will create this app with the create-react-app. This will give us what we need to get the React app up and running. For Redux, we will need two additional dependencies.

The first dependency will be react-redux, version 7.2.6. This library contains official React bindings for Redux. Second dependency we will need is @reduxjs/toolkit, version v1.6.2. This library contains tools that make working with Redux much easier. This also includes setting up a redux store.

This tutorial will also use uuid library, version 8.3.2. This library is not necessary for the Redux state. We will use it to generate unique ids for added books. These ids will make it easier to remove specific book from collection. This is all we need to get started.

Creating Redux store

Let's start with the most interesting part, creating the Redux store. To keep the project tidy, all store-related stuff will be in /store directory, right inside /src. The /store directory will contain two files: books.js and index.js. The books.js will contain Redux state slice for book collection.

The index.js will contain a very simple setup for the Redux store for our React app.

Redux state slice

The first part of the redux state is will be the redux state slice. We will create the redux slice with createSlice(), a method provided by @reduxjs/toolkit. This method allows us to do a couple of things. First, it allows us to define the initial state for our store, the book collection.

It also allows us to define reducer functions for the same store. We will use these reducers later to add books to collection and also to remove them. The initial state for the store will be an object with single property, books. The value of this property will be an empty array.

For this tutorial we will need two reducers. One will be for adding new book to the Redux store. The second will be removing book from the store. We can call these reducers addBook and removeBook. We will define these reducers in an object we will use as a value for reducers property of createSlice() method.

The last thing for the createSlice() method is adding name property with some name for the store. This is used by Redux toolkit to generate required actions for our Redux store. When we have this setup, the createSlice() method will automatically generate two things: actions and reducer for our new slice.

It used to be that we had to create these two by ourselves. This is no longer necessary thanks to the Redux toolkit and the whole process is much easier, as you can see. Now, we just have to export those actions and the reducer and we are done here.

// src/store/books.js

// Import createSlice() from Redux toolkit:
import { createSlice } from '@reduxjs/toolkit'

// Initial state for Redux store:
const initialState = {
  books: [],
}

// Create Redux state slice
const booksSlice = createSlice({
  name: 'books',
  initialState, // Define initial state
  reducers: {
    // Define reducers
    addBook: (state, action) => {
      // Reducer for adding new book to collection
      // Create new state by taking existing books
      // and combining them with newly added book:
      state.books = [...state.books, action.payload]
    },
    removeBook: (state, action) => {
      // Reducer for removing book from collection
      // Filter out a book that matches provided "id":
      state.books = state.books.filter((b) => b.id !== action.payload.id)
    },
  },
})

// Export actions generated by "createSlice()":
export const { addBook, removeBook } = booksSlice.actions

// Export reducer generated by "createSlice()":
export default booksSlice.reducer

Configuring Redux store

We have the setup for Redux state slice, but there is a bit more we have to do. We have to create the Redux store itself and connect it to the reducer generated for our books slice. We will do this by using another method provided by Redux toolkit called configureStore().

This method accepts one parameter, configuration object for the Redux store. Right now, we need to define only one property of this object, reducer. The value of this property will be an object with the reducer we want to use. This will be the booksSlice.reducer we recently worked with in books.js.

We have to import this reducer and add it to the reducer object in store config. After that, we are done as well.

// src/store/index.js

// Import configureStore() from Redux toolkit:
import { configureStore } from '@reduxjs/toolkit'

// Import books reducer:
import booksReducer from './books'

// Create Redux store:
export const store = configureStore({
  reducer: {
    booksReducer, // Add books reducer
  },
})

Adding Redux provider

Both, Redux slice and store are ready. There is one last step we have to make. We have to create Redux provider and connect it with the store we just finished. This will be very fast. We have to go to the main file that renders the main React App component. This will probably be index.js in src/.

Here, we have to import Provider component from react-redux library and our Redux store, we exported from src/store/index.js. We will add the Provider component to the component tree and set our store as a value for Provider's store prop. This will make the store available for the whole app.

// src/index.jsx

// Import React deps:
import { StrictMode } from 'react'
import ReactDOM from 'react-dom'
// Import Redux provider:
import { Provider } from 'react-redux'

// Import some styles:
import './styles.css'

// Import redux store:
import { store } from './store'

// Import main App component:
import { App } from './App'

// Render the React app:
const rootElement = document.getElementById('root')
ReactDOM.render(
  <StrictMode>
    {/* Add Redux provider */}
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
)

The Form component

The first component for our books collection app will be form for adding books. This component will have its own local state (useState), for storing information about book's title and author. We will store these data in Redux store using dispatch() method returned from useDispatch() hook that is provided by react-redux.

To add new book, we use the addBook reducer we exported from src/store/books.js. We will pass this reducer to the dispatch() method. Payload for the addBook reducer will be data for the book: title, author and unique id generated by uuid. After new book is added, we will reset local state for title and author.

// src/Form.jsx

// Import dependencies:
import { memo, useCallback, useState } from 'react'
import { useDispatch } from 'react-redux'
import { v4 as uuidV4 } from 'uuid'

// Import addBook reducer:
import { addBook } from './store/books'

// Create Form component:
export const Form = memo(() => {
  // Prepare Redux dispatch method:
  const dispatch = useDispatch()

  // Create form states:
  const [bookTitle, setBookTitle] = useState('')
  const [bookAuthor, setBookAuthor] = useState('')

  // Add form onSubmit handler:
  const onFormSubmit = useCallback(
    (event) => {
      event.preventDefault()

      // Dispatch addBook reducer with payload
      // containing data for new book:
      dispatch(
        addBook({
          bookTitle,
          bookAuthor,
          id: uuidV4(),
        })
      )

      // Reset form states:
      setBookTitle('')
      setBookAuthor('')
    },
    [bookAuthor, bookTitle, dispatch]
  )

  return (
    <form onSubmit={onFormSubmit}>
      <fieldset>
        <label htmlFor="title">Book title</label>
        <input
          type="text"
          id="title"
          value={bookTitle}
          onChange={(event) => setBookTitle(event.target.value)}
        />
      </fieldset>

      <fieldset>
        <label htmlFor="author">Book author</label>
        <input
          type="text"
          id="author"
          value={bookAuthor}
          onChange={(event) => setBookAuthor(event.target.value)}
        />
      </fieldset>

      <fieldset>
        <button type="submit">Add book</button>
      </fieldset>
    </form>
  )
})

The BookList component

Thanks to the form, we can store books in our Redux store. Next thing we can do is create some list showing all books that are currently in the store. We can also add some button to remove specific book from the list, and the store. To do this, we will have to do a couple of things.

First, we will again have to use the useDispatch() hook to get the dispatch() method so we can update our store. Now, the reducer we will dispatch will be the removeBook. We will import this reducer from src/store/books.js. We will handle removing books with new handler function called onBookRemove().

This function will accept one parameter: bookId. It will pass this id as a payload to the removeBook reducer, and pass this reducer to the dispatch() method. The payload will be an object with id property and id of the book we want to remove. In order to list the books in store, we will need to get them somehow.

We can get those books by using the useSelector() hook, also provided by react-redux. This hook allows us to access the redux store's state, the books state in our case. All we need is to provide this hook with a selector function to get the data we want.

The hook passes state as an argument to the selector function. We will use this argument to get the booksReducer we registered when we configured the Redux store (in src/store/index.js). This reducer contains the slice we created for our books collection. The name of this slice is books.

We defined this name in src/store/books.js. It is the name property in createSlice() method. We will now use this name to access the books slice. The state of this slice is the array for our books collection. When we have this, we can use map() to iterate over the books array to generate and display a list of all books in collection.

// src/BookList.jsx

// Import dependencies:
import { memo, useCallback } from 'react'
import { useDispatch, useSelector } from 'react-redux'

// Import removeBook reducer:
import { removeBook } from './store/books'

// Create BooksList component:
export const BooksList = memo(() => {
  // Get books from Redux store:
  const books = useSelector((state) => state.booksReducer.books)
  // Prepare dispatch method:
  const dispatch = useDispatch()

  // Create handler for removing book:
  const onBookRemove = useCallback(
    (bookId) => {
      dispatch(removeBook({ id: bookId }))
    },
    [dispatch]
  )

  return (
    <div className="booklist">
      {books.map((book) => (
        <div key={book.bookTitle} className="book">
          {`${book.bookTitle} by ${book.bookAuthor}`}
          <button
            className="removeButton"
            onClick={() => onBookRemove(book.id)}
          >
            &times;
          </button>
        </div>
      ))}
    </div>
  )
})

The App component

Redux, form and book list components are ready. We can now put these components together in the App component. Along with this, we can also add a heading showing how many books we have in our collection. We will get this number by using the useSelector hook to get the books state.

In this case, instead of asking for state.booksReducer.books we can ask directly for the number of books in the state. We can do this by adding the length property: state.booksReducer.books.length. This will return the number of books in the store instead of the array itself.

// src/App.jsx

// Import dependencies:
import { memo } from 'react'
import { useSelector } from 'react-redux'

// Import components:
import { BooksList } from './BooksList'
import { Form } from './Form'

// Create App component:
export const App = memo(() => {
  // Get books from Redux store:
  const booksCount = useSelector((state) => state.booksReducer.books.length)

  return (
    <div className="app">
      <h1>Books in collection: {booksCount}</h1>

      <Form />

      {booksCount > 0 && <BooksList />}
    </div>
  )
})

The index file

The index.jsx where we added the Redux Provider component stayed the same. No change is necessary here.

// src/index.jsx

// Import React deps:
import { StrictMode } from 'react'
import ReactDOM from 'react-dom'
// Import Redux provider:
import { Provider } from 'react-redux'

// Import some styles:
import './styles.css'

// Import redux store:
import { store } from './store'

// Import main App component:
import { App } from './App'

// Render the React app:
const rootElement = document.getElementById('root')
ReactDOM.render(
  <StrictMode>
    {/* Add Redux provider */}
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
)

Conclusion: How to create simple Redux store with Redux toolkit

The whole flow of setting up even a simple Redux store used to be tedious and lengthy. Developers had to write a lot of code to just get started. This is no longer the case thanks to Redux toolkit. I hope that this tutorial helped you learn how to create a simple Redux store and how to implement it in your React app.

A Simple Introduction to JavaScript Iterators

Alex Devero — Mon, 01 Nov 2021 06:48:07 +0000

Iterators are data structures that allow you process a sequence of elements more efficiently. This tutorial will help you learn about what JavaScript iterators are and how to find out if something is an iterator. You will also learn about existing types of iterators, their consumers and how to work with them.

A quick introduction to JavaScript iterators

An iterator is type of a data structure. It is a collection of elements. Two examples of such collections are strings and arrays. The first, string is a collection of characters. The second, array is a collection items. That said, not every collection is an iterator.

For a collection to be an iterator, it has to conform to specification of Iterable interface. This interface says that the collections must implement a method Symbol.iterator. This means that this method has to be available on the collection object. This method when invoked returns an Iterator object.

This Iterator object contains one method called next(). This method returns an object with two properties, value and done. The value property contains item from the collection that is currently in the iteration sequence. The done is a boolean that says if the iteration is at the end.

We can use this next() method to iterate over the collection in a controlled manner. Unlike with for loop or map method where we can't stop and resume the iteration, JavaScript iterators allow us to do this. They allow us to get each item in the collection, to resume the iteration, when we want.

// Create an array:
const list = [1, 3, 5, 7, 9]
// Create iterator for "list" array:
const listIterator = list[Symbol.iterator]()

// Log the iterator object:
console.log(listIterator)
// Output:
// Iterator [Array Iterator] { __proto__: { next: ƒ next() } }

// Try next() method:
listIterator.next()
// Output:
// { value: 1, done: false }

listIterator.next()
// Output:
// { value: 3, done: false }

listIterator.next()
// Output:
// { value: 5, done: false }

listIterator.next()
// Output:
// { value: 7, done: false }

listIterator.next()
// Output:
// { value: 9, done: false }

listIterator.next()
// Output:
// { value: undefined, done: true }

Types of JavaScript iterators

There are currently four data types in JavaScript that are iterable. These types that are iterable are strings, arrays, maps and sets.

Strings

The idea that string may be iterable may sound weird. However, it is true. We can validate this with a simple test. If string is an iterable, it should have the Symbol.iterator method. If we invoke this method, we should get the iterator object. With this object, we should also get the next() method.

// Create a string and iterator object for it:
const str = 'It worked'
const strIterator = str[Symbol.iterator]()

// Iterate over individual characters with next():
strIterator.next()
// Output:
// { value: 'I', done: false }

strIterator.next()
// Output:
// { value: 't', done: false }

strIterator.next()
// Output:
// { value: ' ', done: false }

strIterator.next()
// Output:
// { value: 'w', done: false }


// Iterate over the string using for...of loop:
for (const char of str) {
  console.log(char);
}
// Output:
// 'I'
// 't'
// ' '
// 'w'
// 'o'
// 'r'
// 'k'
// 'e'
// 'd'

Arrays

Arrays are the second type that is iterable. Again, we can test this by using the Symbol.iterator method and for...of loop.

// Create an array and iterator object for it:
const names = ['Josh', 'Howard', 'Lucy', 'Victoria']
const namesIterator = names[Symbol.iterator]()

// Iterate over individual items with next():
namesIterator.next()
// Output:
// { value: 'Josh', done: false }

namesIterator.next()
// Output:
// { value: 'Howard', done: false }

namesIterator.next()
// Output:
// { value: 'Lucy', done: false }

namesIterator.next()
// Output:
// { value: 'Victoria', done: false }


// Iterate over the array using for...of loop:
for (const name of names) {
  console.log(name);
}
// Output:
'Josh'
'Howard'
'Lucy'
'Victoria'

Maps

The third iterable type is the Map object. With Maps, we can iterate over their key and value pairs.

// Create a Map and iterator object for it:
const map = new Map()
map.set('name', 'Tony Stark')
map.set('alias', 'Iron Man')
map.set('reality', 'Earth-616')
map.set('education', 'MIT')

const mapIterator = map[Symbol.iterator]()

// Iterate over individual items with next():
mapIterator.next()
// Output:
// { value: [ 'name', 'Tony Stark' ], done: false }

mapIterator.next()
// Output:
// { value: [ 'alias', 'Iron Man' ], done: false }

mapIterator.next()
// Output:
// { value: [ 'reality', 'Earth-616' ], done: false }

mapIterator.next()
// Output:
// { value: [ 'education', 'MIT' ], done: false }


// Iterate over the Map using for...of loop:
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// Output:
'name: Tony Stark'
'alias: Iron Man'
'reality: Earth-616'
'education: MIT'

Sets

The fourth and last iterable type is the Set object. Set objects are similar to arrays. The main difference between a Set and an array is that Set doesn't allow duplicate values. When you try to add duplicate value, Set will keep only the first occurrence of the value and ignore the second.

// Create a map and iterator object for it:
const set = new Set(['north', 'east', 'west', 'south'])
const setIterator = set[Symbol.iterator]()

// Iterate over individual items with next():
setIterator.next()
// Output:
// { value: 'north', done: false }

setIterator.next()
// Output:
// { value: 'east', done: false }

setIterator.next()
// Output:
// { value: 'west', done: false }

setIterator.next()
// Output:
// { value: 'south', done: false }


// Iterate over the Set using for...of loop:
for (const item of set) {
  console.log(item);
}
// Output:
'north'
'east'
'west'
'south'

Iterable consumers and working with iterable types

These were the four iterable types we can work with in JavaScript. The next question is, how can we use them, or consume them. There are four popular consumers that allow us to "consume" iterables. These consumers are: for...of loop, destructuring assignment, spread operator and Array.from().

for...of loop

The first way to iterate over JavaScript iterators is by using the for...of loop. The downside of for...of loop is that it doesn't give us much of the control over the iteration. However, if all we need is to retrieve each item in the collection, it will do the job.

// Array:
const numbers = [2, 4, 6]

for (const num of numbers) {
  console.log(num)
}
// Output:
// 2
// 4
// 6


// String:
const word = 'Root'

for (const char of word) {
  console.log(char)
}
// Output:
// 'R'
// 'o'
// 'o'
// 't'


// Map:
const map = new Map([
  ['name', 'Joe'],
  ['age', 33],
])

for (const [key, val] of map) {
  console.log(`${key}: ${val}`)
}
// Output:
// 'name: Joe'
// 'age: 33'


// Set:
const set = new Set(['C++', 'Assembly', 'JavaScript', 'C++'])

for (const language of set) {
  console.log(language)
}
// Output:
// 'C++'
// 'Assembly'
// 'JavaScript'

Destructuring assignment

One quick way to retrieve items from JavaScript iterators is by using destructuring assignment. With destructuring, we can retrieve any item we need, single item at the time or multiple items at once.

// Array:
const genres = ['rock', 'hip hop', 'r&b', 'metal', 'soul']

// Destructuring assignment:
const [ first, second, ...rest ] = genres

console.log(first)
// Output:
// 'rock'

console.log(second)
// Output:
// 'hip hop'

console.log(rest)
// Output:
// [ 'r&b', 'metal', 'soul' ]


// String:
const word = 'Recursion'

// Destructuring assignment:
const [first, second, third, ...rest] = word

console.log(first)
// Output:
// 'R'

console.log(second)
// Output:
// 'e'

console.log(third)
// Output:
// 'c'

console.log(rest)
// Output:
// [ 'u', 'r', 's', 'i', 'o', 'n' ]


// Map:
const map = new Map([
  ['water', 'fire'],
  ['white', 'black'],
  ['left', 'right'],
])

// Destructuring assignment:
const [start, middle, end] = map

console.log(start)
// Output:
// [ 'water', 'fire' ]

console.log(middle)
// Output:
// [ 'white', 'black' ]

console.log(end)
// Output:
// [ 'left', 'right' ]


// Set:
const set = new Set([1, 33, 777, 9999])

// Destructuring assignment:
const [ first, second, ...rest ] = set

console.log(first)
// Output:
// 1

console.log(second)
// Output:
// 33

console.log(rest)
// Output:
// [ 777, 9999 ]

Spread operator

Spread operator offers a quick and simple way to iterate over iterable type and transform it into an array. This will not be useful when working with arrays. It can still be handy when dealing with maps, strings and also sets.

// String:
const word = 'closure'

// Spread:
const wordSpread = [...word]

console.log(wordSpread)
// Output:
// [
//   'c', 'l', 'o',
//   's', 'u', 'r',
//   'e'
// ]


// Map:
const map = new Map([
  ['fruit', 'apple'],
  ['thatGreenThing', 'kale'],
  ['beverage', 'tea']
])

// Spread:
const mapSpread = [...map]

console.log(mapSpread)
// Output:
// [
//   [ 'fruit', 'apple' ],
//   [ 'thatGreenThing', 'kale' ],
//   [ 'beverage', 'tea' ]
// ]


// Set:
const set = new Set(['Halo', 'Quake', 'NFS', 'C&C'])

// Spread:
const setSpread = [...set]

console.log(setSpread)
// Output:
// [ 'Halo', 'Quake', 'NFS', 'C&C' ]

Array.from()

Along with spread operator, Array.from() also allows us to transform any iterable to an array. All we have to do is to pass the iterable as an argument to the from() method.

// String:
const word = 'iterable'

// Spread:
const wordArray = Array.from(word)

console.log(wordArray)
// Output:
// [
//   'i', 't', 'e',
//   'r', 'a', 'b',
//   'l', 'e'
// ]


// Map:
const map = new Map([
  [1, 1],
  [2, 10],
  [3, 11],
  [4, 100]
])

// Spread:
const mapArray = Array.from(map)

console.log(mapArray)
// Output:
// [ [ 1, 1 ], [ 2, 10 ], [ 3, 11 ], [ 4, 100 ] ]


// Set:
const set = new Set(['BTC', 'ETH', 'ADA', 'EOS'])

// Spread:
const setArray = [...set]

console.log(setArray)
// Output:
// [ 'BTC', 'ETH', 'ADA', 'EOS' ]

Conclusion: A simple introduction to JavaScript iterators

Iterators and iterables can be handy when we need collection over which we can iterate in a controlled fashion. In this tutorial, we've looked at what JavaScript iterators are, what types of iterators are available and how work with them, using the for...of loop, destructuring assignment, spread operator and Array.from().

How to Create File Dropzone in React and TypeScript

Alex Devero — Mon, 25 Oct 2021 06:04:26 +0000

There are various solutions for file dropzones. Some are simple, some complicated. This tutorial will help you create your own simple file dropzone. You will learn how to handle various drag and drop events, how to process dropped files and how to create a simple API for reusable dropzone component.

Demo on Codesandbox.

A brief introduction

In this tutorial we will create a simple file dropzone from scratch without any special dependencies. We will create this app using the create-react-app, with the TypeScript template (--template typescript flag). This will give us all resources we need, almost.

Along with the default React and TypeScript dependencies, we will also add classnames library. We will use this library for appending class to the file dropzone when it is active. This means when someone drags a file over it. This class will apply some CSS styles to highlight the dropzone.

Using the create-react-app template will generate some stuff we can remove. This includes the logo and the content of App.tsx. However, you can leave the content of the App component as it is for now. We will replace it later with the file dropzone and list of files. Now, let's take a look at the dropzone.

Creating Dropzone component

The idea of custom file dropzone component may look complicated. However, this is not necessarily the truth. The logic for dropzone will require us to handle few drag and drop events, some simple state management for active state and processing of dropped files. That's basically it.

For state management, we will use the React useState hook. Next, we will also use useEffect hook for attaching event listeners and observing dropzone's state. Lastly, we will also memoize every component using memo HOC. Let's start building.

Getting started

The first thing we need is to define the file dropzone component. This also includes defining some interface for its props, or component API. The dropzone component will accept six event handlers. Four of these handlers will be invoked on events such as dragenter, dragleave, dragover and drop.

These handlers will allow anyone using this dropzone component execute some code when these events fire. The fifth and sixth handler will be synthetic. One will be invoked when the state of the dropzone active changes. This means when someone is dragging a file over it and when the drag is over.

Any time this happens the handler for this will be invoked, it will pass boolean value specifying current active/non-active state. The sixth event will be invoked when files are dropped on the dropzone. This handler will pass files dropped on the dropzone so they can be processed elsewhere in the app.

The dropzone itself will be a <div> element with ref. We will use this ref to attach event listeners to the dropzone when the component mounts, and to remove them when it unmounts. To make this dropzone more usable, we will set it up so it renders children passed through props.

This means that we will be able to use this dropzone as a wrapper for other content, without removing the content itself.

import React from 'react'

// Define interface for component props/api:
export interface DropZoneProps {
  onDragStateChange?: (isDragActive: boolean) => void
  onDrag?: () => void
  onDragIn?: () => void
  onDragOut?: () => void
  onDrop?: () => void
  onFilesDrop?: (files: File[]) => void
}

export const DropZone = React.memo(
  (props: React.PropsWithChildren<DropZoneProps>) => {
    const {
      onDragStateChange,
      onFilesDrop,
      onDrag,
      onDragIn,
      onDragOut,
      onDrop,
    } = props

    // Create state to keep track when dropzone is active/non-active:
    const [isDragActive, setIsDragActive] = React.useState(false)
    // Prepare ref for dropzone element:
    const dropZoneRef = React.useRef<null | HTMLDivElement>(null)

    // Render <div> with ref and children:
    return <div ref={dropZoneRef}>{props.children}</div>
  }
)

DropZone.displayName = 'DropZone'

DragEnter event

First event we will deal with is the dragenter event. This event will be triggered when a file enters the dropzone, someone takes a file and places it over the drop zone. We will use this event to do two things. First, we will invoke any optional method passed as onDragIn() through props.

Second, we will check if someone is really dragging a file over the dropzone. If so, we will set the active state of the dropzone to true. We will also prevent any default events and propagation. That's all we need for this event.

// Create handler for dragenter event:
const handleDragIn = React.useCallback(
  (event) => {
    // Prevent default events:
    event.preventDefault()
    event.stopPropagation()
    // Invoke any optional method passed as "onDragIn()":
    onDragIn?.()

    // Check if there are files dragging over the dropzone:
    if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
      // If so, set active state to "true":
      setIsDragActive(true)
    }
  },
  [onDragIn]
)

DragLeave event

Handling the dragleave event will be also very easy. This event will be fired when some file left the dropzone, when it is no longer hovering over it. To handle this event we have to do few things. First, we will again prevent any default events and propagation.

The second thing to do is to invoke any optional method passed as onDragOut() through props. After that, we will also need to set the active state to false.

// Create handler for dragleave event:
const handleDragOut = React.useCallback(
  (event) => {
    // Prevent default events:
    event.preventDefault()
    event.stopPropagation()
    // Invoke any optional method passed as "onDragOut()":
    onDragOut?.()

    // Set active state to "false":
    setIsDragActive(false)
  },
  [onDragOut]
)

Drag event

Handler for dragover event will help us ensure the dropzone active state is true when something is being dragged over it. However, we will not simply set the active state to true. Instead, we will first check if the current state value is false and only then change it to true.

This will help us avoid some state changes that are not necessary. We will also use this event to invoke any method passed as onDrag() through the props.

// Create handler for dragover event:
const handleDrag = React.useCallback(
  (event) => {
    // Prevent default events:
    event.preventDefault()
    event.stopPropagation()
    // Invoke any optional method passed as "onDrag()":
    onDrag?.()

    // Set active state to "true" if it is not active:
    if (!isDragActive) {
      setIsDragActive(true)
    }
  },
  [isDragActive, onDrag]
)

Drop event

The drop event is the most important event we need to take care of. Its handler will also be the longest. This handler will do a couple of things. First, it will prevent any default behavior and stop propagation. Next, it will set the dropzone active state to false.

This makes sense because when something is dropped to the area, the drag event is over. Dropzone should register this. When the drop event is fired, we can also invoke any optional method passed as onDrop() through props. The most important part is are those dropped files.

Before we take care of them, we will first check if there are any files. We can do this by checking the event.dataTransfer.files object and its length property. If there are some files, we will invoke any method passed as onFilesDrop() through the props.

This will allow us to process those files as we want outside the dropzone. When we dispatch those files, we can clear the dataTransfer data to prepare the dropzone for another use. There is one important thing about the files. We will get these files in the form of FileList not an array.

We can easily convert this FileList to an array using for loop. This loop will go through the files in dataTransfer object and push each into an empty array. We can then pass this array as an argument into any method onFilesDrop() to get the files where they are needed.

// Create handler for drop event:
const handleDrop = React.useCallback(
  (event) => {
    event.preventDefault()
    event.stopPropagation()
    // Prevent default events:

    // Set active state to false:
    setIsDragActive(false)
    // Invoke any optional method passed as "onDrop()":
    onDrop?.()

    // If there are any files dropped:
    if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
      // Convert these files to an array:
      const filesToUpload = []

      for (let i = 0; i < event.dataTransfer.files.length; i++) {
        filesToUpload.push(event.dataTransfer.files.item(i))
      }

      // Invoke any optional method passed as "onFilesDrop()", passing array of files as an argument:
      onFilesDrop?.(filesToUpload)

      // Clear transfer data to prepare dropzone for another use:
      event.dataTransfer.clearData()
    }
  },
  [onDrop, onFilesDrop]
)

Effects

Handlers are done and ready. Before we can move on we need to set up two useEffect hooks. One hook will be for observing the active state. When this state changes we want to invoke any method passed as onDragStateChange() through props, passing current state value as an argument.

The second effect will attach all handlers we just created to the dropzone <div> element when it mounts. After this, the dropzone will be ready to use. We will also use this effect to remove all event listeners when the dropzone unmounts. We will do this through the clean up method.

// Obser active state and emit changes:
React.useEffect(() => {
  onDragStateChange?.(isDragActive)
}, [isDragActive])

// Attach listeners to dropzone on mount:
React.useEffect(() => {
  const tempZoneRef = dropZoneRef?.current
  if (tempZoneRef) {
    tempZoneRef.addEventListener('dragenter', handleDragIn)
    tempZoneRef.addEventListener('dragleave', handleDragOut)
    tempZoneRef.addEventListener('dragover', handleDrag)
    tempZoneRef.addEventListener('drop', handleDrop)
  }

  // Remove listeners from dropzone on unmount:
  return () => {
    tempZoneRef?.removeEventListener('dragenter', handleDragIn)
    tempZoneRef?.removeEventListener('dragleave', handleDragOut)
    tempZoneRef?.removeEventListener('dragover', handleDrag)
    tempZoneRef?.removeEventListener('drop', handleDrop)
  }
}, [])

Putting it together

These are all the parts we need for the File dropzone component. When we put all these parts together we will be able to use this component anywhere in the React app.

import React from 'react'

// Define interface for component props/api:
export interface DropZoneProps {
  onDragStateChange?: (isDragActive: boolean) => void
  onDrag?: () => void
  onDragIn?: () => void
  onDragOut?: () => void
  onDrop?: () => void
  onFilesDrop?: (files: File[]) => void
}

export const DropZone = React.memo(
  (props: React.PropsWithChildren<DropZoneProps>) => {
    const {
      onDragStateChange,
      onFilesDrop,
      onDrag,
      onDragIn,
      onDragOut,
      onDrop,
    } = props

    // Create state to keep track when dropzone is active/non-active:
    const [isDragActive, setIsDragActive] = React.useState(false)
    // Prepare ref for dropzone element:
    const dropZoneRef = React.useRef<null | HTMLDivElement>(null)

    // Create helper method to map file list to array of files:
    const mapFileListToArray = (files: FileList) => {
      const array = []

      for (let i = 0; i < files.length; i++) {
        array.push(files.item(i))
      }

      return array
    }

    // Create handler for dragenter event:
    const handleDragIn = React.useCallback(
      (event) => {
        event.preventDefault()
        event.stopPropagation()
        onDragIn?.()

        if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
          setIsDragActive(true)
        }
      },
      [onDragIn]
    )

    // Create handler for dragleave event:
    const handleDragOut = React.useCallback(
      (event) => {
        event.preventDefault()
        event.stopPropagation()
        onDragOut?.()

        setIsDragActive(false)
      },
      [onDragOut]
    )

    // Create handler for dragover event:
    const handleDrag = React.useCallback(
      (event) => {
        event.preventDefault()
        event.stopPropagation()

        onDrag?.()
        if (!isDragActive) {
          setIsDragActive(true)
        }
      },
      [isDragActive, onDrag]
    )

    // Create handler for drop event:
    const handleDrop = React.useCallback(
      (event) => {
        event.preventDefault()
        event.stopPropagation()

        setIsDragActive(false)
        onDrop?.()

        if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
          const files = mapFileListToArray(event.dataTransfer.files)

          onFilesDrop?.(files)
          event.dataTransfer.clearData()
        }
      },
      [onDrop, onFilesDrop]
    )

    // Obser active state and emit changes:
    React.useEffect(() => {
      onDragStateChange?.(isDragActive)
    }, [isDragActive])

    // Attach listeners to dropzone on mount:
    React.useEffect(() => {
      const tempZoneRef = dropZoneRef?.current
      if (tempZoneRef) {
        tempZoneRef.addEventListener('dragenter', handleDragIn)
        tempZoneRef.addEventListener('dragleave', handleDragOut)
        tempZoneRef.addEventListener('dragover', handleDrag)
        tempZoneRef.addEventListener('drop', handleDrop)
      }

      // Remove listeners from dropzone on unmount:
      return () => {
        tempZoneRef?.removeEventListener('dragenter', handleDragIn)
        tempZoneRef?.removeEventListener('dragleave', handleDragOut)
        tempZoneRef?.removeEventListener('dragover', handleDrag)
        tempZoneRef?.removeEventListener('drop', handleDrop)
      }
    }, [])

    // Render <div> with ref and children:
    return <div ref={dropZoneRef}>{props.children}</div>
  }
)

DropZone.displayName = 'DropZone'

Adding simple file list component

One nice addon to the dropzone can be file list showing all files dropped to the dropzone. This can make the UI more user-friendly as users will now what files were registered by the app. This list doesn't have to be complicated. It can show just the name of the file and its size.

This file list component will be simple. It will accept an array of files through props. It will then map over this array and generate <li> with name and file size for each file. All list items will be wrapped with <ul> element.

import React from 'react'

export interface FileListProps {
  files: File[]
}

export const FileList = React.memo(
  (props: React.PropsWithChildren<FileListProps>) => (
    <ul>
      {props.files.map((file: File) => (
        <li key={`${file.name}_${file.lastModified}`}>
          <span>{file.name}</span>{' '}
          <span>({Math.round(file.size / 1000)}kb)</span>
        </li>
      ))}
    </ul>
  )
)

FileList.displayName = 'FileList'

Creating the App component and making it work

The file dropzone and file list are ready. This means that we can now go to the App.tsx and replace the default content. Inside the App component, we will need to create two states. One will be for keeping track of dropzone active state. We will use this to highlight the dropzone when dragging is happening.

The second state will be for any files dropped into the dropzone. We will also need two handlers. One will be for the dropzone's onDragStateChange() method. We will use this handler to update local active state. The second handler will be for dropzone's onFilesDrop().

We will use this handler to get any files dropped into the dropzone outside it, into local files state. We will attach both these handlers to the Dropzone component. For the dropzone and file list, we will put them in the render section of the App component.

import React from 'react'
import classNames from 'classnames'

// Import dropzone and file list components:
import { DropZone } from './Dropzone'
import { FileList } from './Filelist'

export const App = React.memo(() => {
  // Create "active" state for dropzone:
  const [isDropActive, setIsDropActive] = React.useState(false)
  // Create state for dropped files:
  const [files, setFiles] = React.useState<File[]>([])

  // Create handler for dropzone's onDragStateChange:
  const onDragStateChange = React.useCallback((dragActive: boolean) => {
    setIsDropActive(dragActive)
  }, [])

  // Create handler for dropzone's onFilesDrop:
  const onFilesDrop = React.useCallback((files: File[]) => {
    setFiles(files)
  }, [])

  return (
    <div
      className={classNames('dropZoneWrapper', {
        'dropZoneActive': isDropActive,
      })}
    >
      {/* Render the dropzone */}
      <DropZone onDragStateChange={onDragStateChange} onFilesDrop={onFilesDrop}>
        <h2>Drop your files here</h2>

        {files.length === 0 ? (
          <h3>No files to upload</h3>
        ) : (
          <h3>Files to upload: {files.length}</h3>
        )}

        {/* Render the file list */}
        <FileList files={files} />
      </DropZone>
    </div>
  )
})

App.displayName = 'App'

Conclusion: How to create file dropzone in React and TypeScript

There you have it! You've just created a custom file dropzone component. Since this it is a standalone component you can take it and use it anywhere you want and need. I hope you enjoyed this tutorial. I also hope this tutorial helped you learn something new and useful.

Introduction to Currying in JavaScript

Alex Devero — Mon, 18 Oct 2021 06:08:32 +0000

Currying is one of the more advanced techniques of working with functions. What it does is it allows you to transform functions, and the way your work with them. This tutorial will help you understand what currying in JavaScript is, how it works and how to use it in your code.

What is currying

First of all, currying exists in multiple languages, not just JavaScript. There are probably multiple ways to explain what currying is. Some simple? Let's start with this. Currying is a process. It is a process of transforming functions with specific number of arguments into a sequence of nested functions.

Each of these functions in the sequence is being returned and each is passed only one of the arguments. Only the last function in the sequence takes all arguments spread through the sequence, does some operation, and returns a value, or values. This is the first transformation.

// Curried function example:
function curriedFn(a) {
  return function(b) {
    return function(c) {
      return a + b + c
    }
  }
}

// Normal function:
function fn(a, b, c) {
  return a + b + c
}

The second transformation is how you call, or invoke, curried function. Usually, you would pass all required arguments inside the one set of parentheses. Not with curried functions. When you work with curried functions, you pass each argument into a separate set of parentheses.

// Calling curried function declared above:
curriedFn(11)(22)(33)
// Output:
// 66

// Calling normal function:
fn(11, 22, 33)

How currying works

Currying can look as something unusual especially for beginners. Let's take a look at how currying in JavaScript works, and why it can even work.

The thing about values, arguments, and closures

How easy or difficult it is to understand currying in JavaScript might well depend on how familiar are you with the concept of closures. It is thanks to closures currying works. Here is how these two work together. As you can see on the example, Each function in the sequence works only with a single argument.

It would make sense that when each function is called, the value passed into it as an argument is lost as well. This is not the case. The value still exists in the scope of the function that was called. What's more important is that any function inside this scope can access this scoped value as well.

All these values exist, and are accessible, as long as the execution of the sequence is going. When it terminates with the last function and the value it returns, these existing values are gone as well. This is also why the last, innermost, function can operate with all previously seen arguments.

In case of this last function in the sequence, the innermost, all these values still exist. This is also why it can work with them.

function curriedFn(a) {
  // Argument "a" exists here
  return function(b) {
    // Argument "a" and "b" exist here
    return function(c) {
      // Argument "a", "b" and "c" exist here
      return a + b + c
    }
  }
}

The thing about parentheses

So, the innermost function can return all previously seen values because they are kept alive thanks to closure. What about those additional parentheses? These parentheses serve two main purposes. First, they allow to pass specific argument to specific function.

This is determined by the order in which arguments are defined in the curried function. The second thing is more important and interesting. Each of these additional parentheses is actually a new function call. This means that when you see curried function with three pairs of parentheses, you are looking at three function calls.

Each of these calls invokes one of the functions in the sequence, while also providing required argument for that function.

// Create curried function:
function curriedFn(a) {
  return function(b) {
    return function(c) {
      return a + b + c
    }
  }
}

// Calling curried function:
curriedFn(11)(22)(33)

// can be visualized as:
outermostFn(11) // curriedFn(a) { ... }
middleFn(22) // function(b) { ... }
innermostFn(33) // function(c) { ... }

This is also why currying allows you to call each function "manually". Each call returns a function. What you can do is to take each function call and sequentially assign its returned value to a variable. Each of these steps will result in variable assigned a function, except the last one.

The last variable will be assigned the value returned by the last function. This last value is what you get when you call curried function with all required argument, and pair of parentheses. The only difference are those extra lines and assigned variables.

// Create curried function:
function curriedFn(a) {
  return function(b) {
    return function(c) {
      return a + b + c
    }
  }
}

// This:
curriedFn(11)(22)(33)

// is the same as (except those extra lines):
const firstCall = curriedFn(11)
const secondCall = firstCall(22)
const lastCall = secondCall(33)

console.log(firstCall)
// Output:
// ƒ ()
// That is:
// function(b) {
//   return function(c) {
//     return a + b + c
//   }
// }

console.log(secondCall)
// Output:
// ƒ ()
// That is:
// function(c) {
//   return a + b + c
// }

console.log(lastCall)
// Output:
// 66
// That is:
// a + b + c

Curried functions without arguments

Currying is usually used for functions that are defined with some parameters. However, this is not a rule. You can just as well create curried function that doesn't take any arguments. In this case, you still have to provide correct number of parentheses, just empty.

// Create curried function:
function curriedFn() {
  return function() {
    return function() {
      return function() {
        return function() {
          return '??'
        }
      }
    }
  }
}

// Call curriedFn():
curriedFn()()()()()
// Output:
// '??'

Currying arrow functions

Just as you can curry regular functions, you can also curry arrow functions. This can help you reduce the amount of code you would otherwise have to use. The principles and way to use it is still the same. Only the syntax is different, due to the nature of arrow functions.

// Regular curried function:
function curriedFn(a) {
  return function(b) {
    return function(c) {
      return a + b + c
    }
  }
}

// Arrow function alternative:
const curriedFn = (a) => (b) => (c) => a + b + c

// Calling the curried function:
curriedFn(11)(33)(55)
// Output:
// 99

Partial application functions

When we talk about currying in JavaScript, it is also useful to mention technique called partial application. The reason is that these two are very similar, so similar that it can be confusing. However, there is one key difference that will help you distinguish between them.

This difference is in the number of parameters. When you curry a function, each function in the sequence accepts only one parameter. This is not the case with partial application. In case of partial application, the rule is that the newly returned functions must accept fewer parameters.

This means that there might still be arguments spread across multiple pairs of parentheses. However, some of these pairs of parentheses will contain more than just one argument. When you see something like this, you are looking at partial application function, not curried function.

// Curried function example:
function myCurriedFn(x) {
  return function(y) {
    return function(z) {
      return function(w) {
        return x * y * z * w
      }
    }
  }
}

myCurriedFn(3)(6)(3)(9)
// Output:
// 486


// Partial application function example:
function myPartApplicationFn(x) {
  return function(y, z) {// Passing two arguments instead of one
    return function(w) {
      return x * y * z * w
    }
  }
}

myPartApplicationFn(3)(6, 3)(9)
// Output:
// 486

Conclusion: Introduction to currying in JavaScript

The concept of currying can be confusing and difficult to grasp. Just the word itself can sound weird. The syntax also isn't much helpful. I hope that this tutorial was helpful in shading some light on this topic, helping you understand how, and why, currying in JavaScript and how to use it.

Memoization in React: A Simple Introduction

Alex Devero — Mon, 11 Oct 2021 05:53:25 +0000

There are many optimization techniques you can use to improve overall performance of your React applications. One of these techniques is memoization. In this tutorial you will learn what memoization is and how to use memoization in React to optimize your React apps.

Memoization made simple

Memoization is one of the optimization techniques used in programming. It allows you to save time and resources by avoiding unnecessary computations. Computation is not necessary when the result of the computation is the same as the result of previous compilation.

Let's take a simple example. Imagine you have a function that returns factorial of a given number. Usually, this function will will run a computation for every number you give it. Is this necessary? For example, let's say you run the function two or three times with the same number.

Is in this case necessary to run through the whole computation to return a value this function have already seen in the past? No. What you can do instead, to prevent this, is to create a cache and modify the function. Each time the function runs it will first look inside the cache.

If the number you gave the function is already in cache there is no need to calculate anything. That factorial function can simply return the known result for that number. If the number is not in cache, factorial function can do its job and calculate the factorial, and add it to the cache.

// Create cache:
let cache = [1]

// Create memoized factorial function:
function getFactorialMemoized(key) {
  if (!cache[key]) {
    // Add  new value to cache:
    cache[key] = key * getFactorialMemoized(key - 1)
  } else {
    // Return cached value:
    console.log('cache hit:', key)
  }

  // Return result
  return cache[key]
}

getFactorialMemoized(6)
getFactorialMemoized(6)

This example demonstrates what memoization is basically about. You compute some values and store them, memoize them, for later use. If, in some time in the future, you need to get one of those values, you don't have to compute them again. Instead, you retrieve them from your storage, some cache.

As you can probably guess, this technique can bring significant performance improvements. It is usually much faster and resource-friendly to simply return some value instead of computing it. This sounds great, but how can you use memoization in React?

Memoization in React

Good news is that React provides built-in tools for memoization out of the box. This means that you don't have to add any extra dependencies. The only dependency you need is react, and react-dom. Memoization tools React provides at this moment are three: memo(), useMemo() and useCallback().

Memo

The first tool for memoization in React is a higher order component called memo(). What high order component does is it takes one React component and returns new. With memo(), there is one important difference. This new returned component is also memoized.

This means that React will not re-render this memoized component unless it is necessary to update it. What this means is that as long as the component props stay the same React will skip re-rendering the memoized component. It will instead keep reusing the result of the last render.

When React detects that some component prop has changed it will re-render the component. This is to ensure that the UI is kept up-to-date and synchronized. When it comes to memo(), there are two important things to mention.

// Import memo
import { memo } from 'react'

// Component without memo:
export const App = () => {
  return (
    <div>
      <h1>This is a normal component</h1>
    </div>
  )
}

// Component wrapped with memo:
export const App = memo(() => {
  return (
    <div>
      <h1>This is a memoized component</h1>
    </div>
  )
})

Local states

The first thing is that React will watch only for changes of props. It doesn't watch for changes in logic inside the component. It will also not prevent these changes from re-rendering the component. One example of such a change is if that component has its own local state.

When local state changes, the component will still re-render. This is by design to ensure the UI and date are in sync. This also applies to components connected to providers or redux stores. Change in these data entities will result in re-renders of components that are connected to them.

Let's take a look at a simple example. Imagine you have a component that tracks the number of counts. It renders current count and button to increment the count by 1. Even though the component itself is memoized, each click on the button will result in re-render.

What is important to remember is that this is not a bug, but a feature. React re-renders the component to keep the rendered count value in sync with the data in component's local state. Without re-renders, the rendered number would stay stuck on 0.

// Import memo and useState:
import { memo, useState } from 'react'

export const App = memo(() => {
  // Create local state:
  const [count, setCount] = useState(0)

  // This will log on every re-render:
  console.log('Render')

  // Create button handler:
  const onCountClick = () => setCount((prevCount) => ++prevCount)

  return (
    <div>
      <h1>Current count: {count}</h1>

      <button onClick={onCountClick}>Click me</button>
    </div>
  )
})

Shallow comparison

The second thing is that React does only shallow comparison of props for memoized components. This may not be enough if you pass through props more complex data than primitive data types. In that case, memo() HOC also allows to pass your own custom compare function as a second argument.

This custom compare function has two parameters, previous and next props. Inside this function you can execute any custom comparison logic you need.

// Import memo and lodash:
import { memo } from 'react'
import { isEqual } from 'lodash'

// Create custom comparison function:
function isEqual(prevProps, nextProps) {
  // Return result of some custom comparison:
  return isEqual(prevProps, nextProps)
}

// Component wrapped with memo:
export const App = memo(() => {
  return (
    <div>
      <h1>This is a memoized component</h1>
    </div>
  )
}, isEqual) // Pass custom comparison function

useMemo

The second tool that helps with memoization in React is React hook useMemo(). Unlike memo(), the useMemo hook allows you to execute some computation and memoize its result. Then, as long as the input it watches stays the same, useMemo() will return the cached result, avoiding unnecessary computation.

A simple example

For example, imagine some components gets a number through props. It then takes this number and calculates its factorial. This is the difficult computation we want to optimize with memoization. The component also has a local state. It can the count tracker we've already played with.

We will add function to calculate factorial and use this function to calculate factorial and assign the result to regular variable. What will happen? The factorial will be computed when the component mounts. The problem is that it will be also computed when we click the count button and increment count.

// Import useState and useMemo:
import { useState, useMemo } from 'react'

export const App = ({ number }) => {
  // Create local state:
  const [count, setCount] = useState(0)

  // Create button handler:
  const onCountClick = () => setCount((prevCount) => ++prevCount)

  // Create factorial function:
  const getFactorial = (num) => {
    // Print log when function runs:
    console.log('count factorial')

    // Return the factorial:
    return num === 1 ? num : num * getFactorial(num - 1)
  }

  // Calculate factorial for number prop:
  const factorial = getFactorial(number)
  // THIS ^ is the problem.
  // This variable will be re-assigned,
  // and factorial re-calculated on every re-render,
  // every time we click the button to increment count.

  return (
    <div>
      <div>Count: {count}</div>
      <div>Factorial: {factorial}</div>

      <button onClick={onCountClick}>Click me</button>
    </div>
  )
}

In the example above, we can see that factorial is recalculated because every time we click the button the log inside getFactorial() is printed in the console. This means that every time the button is clicked, the getFactorial() function is executed, even though the number in props is the same.

A simple solution

We can quickly solve this problem with the help of useMemo() hook. All we have to do is wrap the call of getFactorial() function with useMemo(). This means that we will assign the factorial variable with useMemo() hook and pass the getFactorial() function into the hook.

We should also make sure the factorial will be re-calculated when the number passed through props changes. To do this, we specify this prop as a dependency we want to watch in useMemo() hook dependency array.

// Import useState and useMemo:
import { useState, useMemo } from 'react'

export const App = ({ number }) => {
  // Create local state:
  const [count, setCount] = useState(0)

  // Create button handler:
  const onCountClick = () => setCount((prevCount) => ++prevCount)

  // Create factorial function:
  const getFactorial = (num) => {
    // Print log when function runs:
    console.log('count factorial')

    // Return the factorial:
    return num === 1 ? num : num * getFactorial(num - 1)
  }

  // Calculate and memoize factorial for number prop:
  const factorial = useMemo(() => getFactorial(number), [number])
  // 1. Wrap the getFactorial() function with useMemo
  // 2. Add the "number" to dependency array ("[number]") to tell React it should watch for changes of this prop

  return (
    <div>
      <div>Count: {count}</div>
      <div>Factorial: {factorial}</div>

      <button onClick={onCountClick}>Click me</button>
    </div>
  )
}

Thanks to this simple change we can prevent unnecessary computations that could otherwise slow down our React app. This way, we can memoize any computation we need. We can also use useMemo() multiple times to ensure calculations on re-renders are really minimized.

// Import useState and useMemo:
import { useState, useMemo } from 'react'

export const App = () => {
  // Add state to force re-render
  const [count, setCount] = useState(0)

  // Add button handler:
  const onCountClick = () => setCount((prevCount) => ++prevCount)

  // Add some dummy data and memoize them:
  const users = useMemo(
    () => [
      {
        full_name: 'Drucy Dolbey',
        gender: 'Male',
      },
      {
        full_name: 'Ewart Sargint',
        gender: 'Male',
      },
      {
        full_name: 'Tabbi Klugel',
        gender: 'Female',
      },
      {
        full_name: 'Cliff Grunguer',
        gender: 'Male',
      },
      {
        full_name: 'Roland Ruit',
        gender: 'Male',
      },
      {
        full_name: 'Shayla Mammatt',
        gender: 'Female',
      },
      {
        full_name: 'Inesita Eborall',
        gender: 'Female',
      },
      {
        full_name: 'Kean Smorthit',
        gender: 'Male',
      },
      {
        full_name: 'Celestine Bickerstaff',
        gender: 'Female',
      },
    ],
    []
  )

  // Count female users and memoize the result:
  const femaleUsersCount = useMemo(
    () =>
      users.reduce((acc, cur) => {
        console.log('Invoke reduce')
        return acc + (cur.gender === 'Female' ? 1 : 0)
      }, 0),
    [users]
  )

  return (
    <div>
      <div>Users count: {femaleUsersCount}</div>

      <button onClick={onCountClick}>Click me</button>
    </div>
  )
}

In the example above, memoizing the result of femaleUsersCount assignment is not enough. We have to memoize the users as well. Otherwise, users variable would be re-assigned every time the component re-renders. This would also trigger useMemo() for the femaleUsersCount. This would mean that nothing is actually memoized.

When we memoize users we prevent it from re-assigning. This will prevent unnecessary change of users, and consequently, of femaleUsersCount. As a result, only count will change. Well, actually, the onCountClick() will be re-created as well. This brings us to the last tool for memoization in React.

useCallback

We can do a lot with memo() and useMemo() to use memoization in React to avoid unnecessary computation of various kinds. There is still one problem we haven't covered yet. Every time component re-renders it also re-creates all local functions. This is a double-edged sword.

Two issues with re-created functions

It is a double-edged sword because it can lead to two issues. First, all functions you declare in a component will be re-created on every render. This may or may not have significant impact, depending on how many functions you usually have. The second issue can cause more problems.

Simple example. Let's say you have one parent and one child component. Parent component creates a local state and function. That function also gets passed to the child through props so it can be used there. Problem? Do you remember that thing about memo() and shallow comparison?

The thing is that when you pass a function to component you are passing complex value, not primitive. React's shallow comparison will fail here. It will tell you the value is different and re-render the component even though the value is the same. In our case, the value is the function.

When parent component re-renders, it also re-creates the function it passes to the child component. When re-created function gets passed, React fails to recognize that the function, even though newly created, is actually the same as the previous.

The result of this is that the child component will re-render as well. This will simply happen, whether you use memo() or not.

// Child component:
import { memo } from 'react'

export const CountChild = memo((props) => {
  console.log('CountBox render')

  return <button onClick={props.onChildBtnClick}>Click me as well</button>
})

// Parent component:
import { useState, memo, useCallback } from 'react'

// Import child component
import { CountChild } from './countChild'

export const App = memo(() => {
  // Add state to force re-render
  const [count, setCount] = useState(0)

  // Add button handler:
  const onCountClick = () => {
    setCount((prevCount) => ++prevCount)
  }

  return (
    <div>
      <div>count: {count}</div>

      <button onClick={onCountClick}>Click me</button>

      <CountBox onChildBtnClick={onCountClick} />
    </div>
  )
})

Avoiding re-renders caused by functions passed through props

Way to avoid this is by using the useCallback() hook. Instead of declaring a function as usually, we can pass it as a callback to useCallback() hook and assign it to a variable. This, and properly set array dependencies, will ensure that the function will be re-created only when necessary.

This means only when one of the dependencies changes. When re-render happens and if no dependency change, React will use cached version of the function instead of re-creating it. React returning cached version of the function will also prevent the child component from unnecessary re-render.

This is because React knows the function is cached, and thus the same. So, unless some other prop has changed, there is no need to re-render the child component.

// Child component:
import { memo } from 'react'

export const CountChild = memo((props) => {
  console.log('CountBox render')

  return <button onClick={props.onChildBtnClick}>Click me as well</button>
})

// Parent component:
import { useState, memo, useCallback } from 'react'

// Import child component
import { CountChild } from './countChild'

export const App = memo(() => {
  // Add state to force re-render
  const [count, setCount] = useState(0)

  // CHANGE: Memoize the button handler:
  const onCountClick = useCallback(() => {
    setCount((prevCount) => ++prevCount)
  }, []) // No dependency is needed

  return (
    <div>
      <div>count: {count}</div>

      <button onClick={onCountClick}>Click me</button>

      <CountBox onChildBtnClick={onCountClick} />
    </div>
  )
})

Conclusion: Memoization in React

Thanks to memo(), useMemo() and useCallback() memoization in React is quite easy. With these tools, we can make our React applications faster and better. I hope that this tutorial helped you understand what memoization is and how to use memoization in React to optimize your React apps.

3 Ways to Build React Forms with Formik Pt.3

Alex Devero — Mon, 04 Oct 2021 07:55:15 +0000

Building React forms can be lengthy and painful process. Not anymore with library called Formik. Formik provides a nice and easy way to build React forms. This tutorial will show you how to build React forms with HTML elements along with the useFormik() hook provided by Formik.

You can find this example on Codesandbox.

A quick intro

In the first part of this tutorial, we took a look at how to build React forms with custom HTML elements and form state and logic provided by Formik. In the second part, we switched to Formik components and build form with them. In this final part we will make another change, a small step back.

We will switch from Formik components back to HTML form elements. This also includes dropping the Form component provided by Formik we used as a wrapper in previous parts. We will replace this component with HTML form element. We will also use HTML form components for the rest of form content.

Removing Formik components also removes all functionality provided by Formik. However, this doesn't mean we can't use Formik to build React forms. Formik allows us to use its functionality through hooks. This is what we will do in this tutorial. We will build React form and connect it to Formik through useFormik() hook.

Formik and context

Switching to useFormik() hook can make things easier in some situations. However, there is a downside. When we remove the Form component we also remove Formik's context automatically created when we use this component. This means that we can no longer use the useFormikContext hook to access this context and Formik's methods.

If you are not using this specific hook, there is no reason to worry about anything. You can use Formik with useFormik() hook to build React forms just as with Form and useFormikContext().

Project dependencies

Let's quickly talk about dependencies. This tutorial will use only few of them. We will need some dependencies required to run our React app. These will be react, react-dom and react-scripts. These three will all be version 17.0.2. Next is the Formik library. This will be version 2.2.9.

The last dependency will be validation library called Yup. We will use this library to create a simple validation schema for our React form. The version of Yup will be 0.32.9. This is all we need.

Validation schema

Validation schema for the form we are going to build will be simple. We will need to validate only three form fields, name, email and password. All these fields will be required and their values will be strings. In case of email field, we will also want to ensure the value if in email format.

Thanks to Yup library, building this schema is quick and easy. All we have to do is to create new Yup object and define its shape. The shape is in the form of an object where each key or property is name of one field. The value is a validation rule for that field. This validation rule is composed of method provided by Yup.

For example, all field values must be strings and are required. We can create this rule by using Yup's string() and required() methods. We can also specify error message for each of these validation methods by passing the message as an argument to the specific method, required('Field is required').

To make the schema complete we need to add one more rule, for email.
Here, we will use Yup's email() method. This method will check that a specific field value is provided in email format. If not, Yup will detect an error. This is all we need for our validation schema.

// Import Yup:
import * as Yup from 'yup'

// Create validation schema for form
// with three fields: "name", "email" and "password":
const formSchema = Yup.object().shape({
  name: Yup.string().required('First name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
  password: Yup.string().required('Password is required'),
})

Using useFormik() hook

As we discussed in the introduction part, we are going to build the React form with Formik's useFormik() hook. This hook allows us to do a couple of things. First, we can use it to setup Formik state for the form. This means specifying what fields we will need and their initial values.

This hook also allows us to specify any custom validation schema we want to use for our React form. For example, the schema we've built with Yup. We can also specify how we want to handle the onSubmit event form will fire when submitted. We can setup this through config object the useFormik() hook accepts as a parameter.

This is the input. Next is the output. The useFormik() hook returns methods and states. We can use these methods as input event handlers to connect individual form fields to Formik and its states. So, when field is focused and receives some input Formik will be able to register it and store that input inside its state.

Receiving and storing input is not enough. We also need a way to access these stored values. Otherwise, we can't render them in form fields as input values. This is not a problem. One of the states the useFormik() hook exposes is values state. This state contains values for all registered form fields.

We can use this state in combination with specific field name to receive value specific field should display. Two additional states we will use are errors and touched states. When any field in the form contains error, created by Yup validation, that error will end up in Formik's errors state.

The touched states registers if specific field has been touched, focused, since the form was rendered. We will use these two states to decide when to show error messages for fields with errors.

// Import dependencies:
import { memo } from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'

// Create form validation schema:
const formSchema = Yup.object().shape({
  name: Yup.string().required('First name is required'),
  email: Yup.string()
    .email('Invalid email')
    .required('Email is required'),
  password: Yup.string().required('Password is required')
})

// Create the form component:
export const FormHook = memo(() => {
  // Call useFormik() hook with config
  // and assign it to formik variable:
  const formik = useFormik({
    // Initial values for each form field:
    initialValues: {
      name: '',
      email: '',
      password: ''
    },
    onSubmit: (values) => {
      // Logic to handle onSubmit event
      console.log(values)
    },
    // Schema for validating the form:
    validationSchema: formSchema
  })

  return (/* Form component */)
})

FormHook.displayName = 'FormHook'

Building form inputs

The markup for each field will be simple. There will be label, input and p for error message. These elements will be wrapped inside a div element. Each input element will have type, name, value, onChange and onBlur attributes. Type will always be "text". Name will correspond to each field name.

To get the value for value attribute we will reference the values state returned by useFormik() hook, along with the field name. Note: we assigned all values returned by this hook to the formik variable. So, to access this state, we have to reference this variable.

We will do this also to access Formik's event handlers. Specifically handlers for onChange and onBlur events. These will be Formik's handleChange and handleBlur methods. The handleChange will ensure our form state is always up-to-date. The handleBlur will help us register if field has been touched.

The last piece are error messages. We've already defined the messages itself in the validation schema in the beginning. Now, we need to make sure they are visible at the right time. We can ensure this by checking two things. First, the field contains an error. Second, the field has been touched.

Only if these two conditions are true we want the error message to appear. To display the error message itself, we can use the errors state along with name of the specific field. If there is an error for this field, this will return the message as a string. We will get all this data from props.

import { memo } from 'react'

export const Input = memo((props) => (
  <div>
    <label htmlFor={props.name}>{props.label}</label>
    <input
      type={props.type}
      name={props.name}
      value={props.value}
      onChange={props.handleChange}
      onBlur={props.handleBlur}
    />
    {props.hasError && props.isTouched && <p>{props.errorMessage}</p>}
  </div>
))

Note: Formik automatically sets all fields to touched when form is submitted. So, even if nobody touches any field, and tries to submit the form, all error messages will be displayed because Formik will set all fields to touched. This means that the formik.errors.someField && formik.touched.someField will be true && true.

Building the form

We are almost done. Last step to make is creating the form wrapper, adding some submit button and all input fields. Two form element will require two attributes, onSubmit and noValidate. We will set the first to Formik's handleSubmit method. This method will trigger the onSubmit method we defined in useFormik() hook.

The noValidate attribute will disable native form validation. We want to do this because we want the Formik and Yup take care of it. About the content of the form. We could write the code for all input field components. However, we don't have to. We basically need to know only the field name.

Knowing this, we can determine what value should each field render. We can also use the field name to check for errors and render correct error message. We can also easily determine what type the input should be, whether it should be text, email or password. We can create a small and handy object to make this even easier.

Thanks to this, we have to write much less code and make the whole form much shorter. How can we get each field name? We can take the Formik's values state, iterate over its keys, and render input component for each key, using current field name to use correct data.

<form onSubmit={formik.handleSubmit} noValidate>
  {Object.keys(formik.values).map((fieldName) => (
    <Input
      key={fieldName}
      value={formik.values[fieldName]}
      errorMessage={formik.errors[fieldName]}
      handleBlur={formik.handleBlur}
      handleChange={formik.handleChange}
      hasError={formik.errors[fieldName]}
      isTouched={formik.touched[fieldName]}
      label={fieldName[0].toUpperCase() + fieldName.substring(1)}
      name={fieldName}
      type={inputTypes[fieldName]}
    />
  ))}

  <div>
    <button type="submit">Submit</button>
  </div>
</form>

Putting the form together

We are almost done. There is one more thing we have to do. We have to put together all the code we created so far and we will have a working form powered by Formik. Well, almost. Our form also needs some logic to handle the onSubmit event and send the data somewhere, but that is up to you.

// Import dependencies:
import { memo } from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'

// Import Input component:
import { Input } from './input'

// Create form validation schema:
const formSchema = Yup.object().shape({
  name: Yup.string().required('First name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
  password: Yup.string().required('Password is required'),
})

// Object with input types:
const inputTypes = {
  name: 'text',
  email: 'email',
  password: 'password',
}

// Create the form component:
export const FormHook = memo(() => {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
      password: '',
    },
    onSubmit: (values) => {
      console.log(values)
    },
    validationSchema: formSchema,
  })

  // Render the form:
  return (
    <form onSubmit={formik.handleSubmit} noValidate>
      {Object.keys(formik.values).map((fieldName) => (
        <Input
          key={fieldName}
          value={formik.values[fieldName]}
          errorMessage={formik.errors[fieldName]}
          handleBlur={formik.handleBlur}
          handleChange={formik.handleChange}
          hasError={formik.errors[fieldName]}
          isTouched={formik.touched[fieldName]}
          label={fieldName[0].toUpperCase() + fieldName.substring(1)}
          name={fieldName}
          type={inputTypes[fieldName]}
        />
      ))}

      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  )
})

FormHook.displayName = 'FormHook'

Conclusion: 3 Ways to build React forms with Formik pt.3

As you can see, building React forms doesn't have to be lengthy and painful process. With libraries like Formik it can be actually easy. I hope that this tutorial helped you learn how to build React forms using HTML elements and the useFormik() hook.

3 Ways to Build React Forms with Formik Pt.2

Alex Devero — Mon, 27 Sep 2021 05:57:30 +0000

The Formik library helps to build React forms faster with its state management and component. This tutorial will help you learn how to build a React form using components provided by Formik library. You will also learn how to create a simple validation schema for forms with Yup library.

A quick intro

This short series is about three ways to build React forms with Formik. In the first part, we've taken a look at the first way. We focused on build React forms with Formik using only the bare essentials Formik provides. In this part, we will lean much more towards Formik and its components.

Generally speaking, we can use Formik to build React forms with two approaches. The first one is with React components. The second is by using Formik hooks. We've already, partially, explored the first approach in the first part. In this part, we will take a look at this approach one more time, now using Formik components instead of custom.

A word on dependencies

This tutorial will use minimal number of dependencies. First, we will need the react, react-dom and react-scrips. These three will help as get the React app from the ground. You can either install these dependencies by yourself or use the create-react-app app to setup everything for you.

When you have the React app ready, you two additional dependencies. The first one will be Formik, library that will power our form. The second dependency will be Yup. This is a validation library that will help as create validation schema for our form. We will talk about this in the next section, "Validation schema".

In this tutorial, we will use react and react-dom version 17.0.2. The react-scrips will be version 4.0.3. Formik will be version 2.2.9. Version of Yup will be 0.32.9. When you install these dependencies you are ready to go.

Validation schema

For this part, we will use the same validation schema as we used in the previous part. This validation schema will contain three form fields, "name", "email" and "password". All these fields will be strings and all will be required. For the "email" field, we will want to check that any value user provides is in email format.

We could build this schema, and necessary validation logic by ourselves and connect it with Formik. We don't have to. Instead, we can use available validation libraries to do this work for us. One of these libraries is [Yup]. Thanks to this library, we can create validation schema objects Formik can use to validate all fields on our forms.

A nice thing on Yup is that it provides various methods we can use to create validation schema that fits our needs. For example, we can use method string() to specify that some field value must be a string. We can then make it required by using required() method. To make sure something is in email format?

Yup provides method email() that checks if the value passed into the input is in email format or not. There are many other methods, and customizations, ready to use. For this tutorial, we will stick with these three, string(), required() and email(). Yup also allows to define error messages for each field.

In a fact, we can define error message for each of Yup's validation methods. What this means is that we can display different message for the same field. What message will be visible will depend on current error. Creating these messages is easy. All we need is to pass these messages as strings to specific Yup method.

For example, we can define that field is required and specify a simple message for this condition: required('Field "X" is required'). We will use this feature in our schema as well and define different message for different validations. Nonetheless, the validation will remain simple.

// Import Yup:
import * as Yup from 'yup'

// Create validation schema for form
// with three fields: "name", "email" and "password":
const formSchema = Yup.object().shape({
  name: Yup.string().required('First name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
  password: Yup.string().required('Password is required'),
})

Using Formik and its components

The schema is ready. Now, let's build React form using mainly Formik components. The upside of this approach is that we will not have to specify as many input element attributes as we had to in the previous part. This is because all form components are provided by Formik and as such are automatically connected to Formik parent instance (context).

Formik components we will need will be three, Formik, Form and Field. The Form and Field will be replacements for HTML form and input elements. The Formik component will create a parent instance and context of our Formik form. This will be the wrapper of the whole form, this includes the Form component.

Formik component

The Formik component has multiple attributes we can use to setup and customize Formik functionality. For the purpose of this tutorial we will need three: initialValues, onSubmit and validationSchema. The initialValues attribute is on object that allows as to define all form fields and their initial values.

For our form, we will specify properties of initialValues (form fields) to be "name", "email" and "password". All initial values will be empty strings. As a value for the validationSchema attribute we will use the validation schema we created with Yup. The value of onSubmit will be a function Formik will use when form is submitted.

For this tutorial, we will create arrow function with console.log() to log values provided to the form. In your case, this is the place where you can add any logic you want to execute when someone submits the form. There is one more thing we will need from Formik. We will need access to errors and touched objects.

These two are Formik's states that keep tract of fields that contain any errors and fields that have been touched, or focused. We can expose this data from Formik very easily. This is because Formik component uses render-prop pattern, and allows its children to be a function that returns some React component.

This rendered component will be our form. What we can do is to tell Formik component to expose some data by passing them as arguments to the function it renders. This will allow use to use this exposed data anywhere in the form. Data we will pass are the errors and touched objects. We will pass them using object destructuring.

// Import dependencies:
import { memo } from 'react'
import { Formik, Form, Field } from 'formik'

// Create the form component:
export const FormFormik = memo(() => {
  return (
    <Formik
      initialValues={{ name: '', email: '', password: '' }}
      onSubmit={(values) => {
        console.log(values)
      }}
      validationSchema={formSchema}
    >
      {({ errors, touched }) => (
        <Form>{/* The rest of the form content */}</Form>
      )}
    </Formik>
  )
})

FormFormik.displayName = 'FormFormik'

Field components and error messages

Each form field will be composed of three parts: label, field and error message. We will create the label and error message with label and p HTML element. This is because Formik doesn't render labels nor provide a dedicated component for it. It renders only input placeholders if you tell it to do so.

So, if you want to use input placeholders instead of labels you can ignore the label elements. Instead of label, you can add placeholder attribute for each field with appropriate text. Another two attributes we will need will be type and name. The type is the same as input type attribute that specifies the type of input.

The name is also the same as input name attribute. Aside to that, it also allows Formik to connect field with correct value in form states. This includes initialValues, errors and touched. This means that value of name for each field has to match corresponding property in initialValues, errors and touched and also in validation schema.

So, if our schema contains rules for fields "name", "email" and "password", values for name attributes has to be one of these, name, email and password. That's all we need, or Formik needs, for the Field. No need for additional attributes or handlers. Last piece are error messages.

We will render error messages as plain text wrapped in p elements. The important thing here is the rendering condition for each message. We want to display errors only when there are any and when user really interacted with the form. We want to avoid showing errors in an empty form that was just loaded.

To ensure this, we will use the errors and touched objects. For each field, we will first check if there are any errors for that field. We will also check if a field has been touched. Only when field has an error and was touched we will show an error. We will get these information by using the value of name attribute.

Last thing. We will need a button to submit the form. This can be a regular HTML button element with type set to submit. When clicked, this will trigger Formik's onSubmit method. This is the method you pass as the value to onSubmit attribute of Formik component.

// ... previous code
<Form>
  <div>
    <label htmlFor="name">Name</label>

    {/* Create field component - renders input element */}
    <Field type="text" name="name" />

    {/* Show error if field contains error and was touched */}
    {errors.name && touched.name && <p>{errors.name}</p>}
  </div>

  <div>
    <label htmlFor="email">Email</label>

    {/* Create field component - renders input element */}
    <Field type="email" name="email" />

    {/* Show error if field contains error and was touched */}
    {errors.email && touched.email && <p>{errors.email}</p>}
  </div>

  <div>
    <label htmlFor="password">Password</label>

    {/* Create field component - renders input element */}
    <Field type="password" name="password" />

    {/* Show error if field contains error and was touched */}
    {errors.password && touched.password && <p>{errors.password}</p>}
  </div>

  <div>
    <button type="submit">Submit</button>
  </div>
</Form>
// ... rest of the code

Putting it together

The Formik component is ready and Field components for each field, with error message, are ready as well. The thing that remains is to take the code we've created so far and put it together. This will give us working React form powered by Formik components, and validated by Yup.

// Import dependencies:
import { memo } from 'react'
import { Formik, Form, Field } from 'formik'
import * as Yup from 'yup'

// Create form validation schema:
const formSchema = Yup.object().shape({
  name: Yup.string().required('First name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
  password: Yup.string().required('Password is required'),
})

// Create the form component:
export const FormFormik = memo(() => {
  return (
    <Formik
      initialValues={{ name: '', email: '', password: '' }}
      onSubmit={(values) => {
        console.log(values)
      }}
      validationSchema={formSchema}
    >
      {({ errors, touched }) => (
        <Form>
          <div>
            <label htmlFor="name">Name</label>

            {/* Create field component - renders input element */}
            <Field type="text" name="name" />

            {/* Show error if field contains error and was touched */}
            {errors.name && touched.name && <p>{errors.name}</p>}
          </div>

          <div>
            <label htmlFor="email">Email</label>

            {/* Create field component - renders input element */}
            <Field type="email" name="email" />

            {/* Show error if field contains error and was touched */}
            {errors.email && touched.email && <p>{errors.email}</p>}
          </div>

          <div>
            <label htmlFor="password">Password</label>

            {/* Create field component - renders input element */}
            <Field type="password" name="password" />

            {/* Show error if field contains error and was touched */}
            {errors.password && touched.password && <p>{errors.password}</p>}
          </div>

          <div>
            <button type="submit">Submit</button>
          </div>

          <div>
            <button type="submit">Submit</button>
          </div>
        </Form>
      )}
    </Formik>
  )
})

FormFormik.displayName = 'FormFormik'

Conclusion: 3 ways to build React forms with Formik pt.2

This was the alternative of the first approach of using Formik to build React forms. This approach, using mainly Formik components, can reduce HTML markup you would otherwise need. With some validation library such as Yup, you can also remove a lot of code you would otherwise need for validation logic. I hope that this tutorial helped you learn how to do both.

3 Ways to Build React Forms with Formik Pt.1

Alex Devero — Mon, 20 Sep 2021 07:36:43 +0000

Formik is one of the most popular libraries for building forms. It helps developers do a lot of things with much few lines of code. Some of these things are form state management, validation and error handling. This tutorial will show you three ways in which you can use formik to build React forms.

The pain of building forms

Building React forms may sound easy, but it is not. There are a lot of things involved. Usually the easiest part is to put together the form. Then come the hard parts. There is a form state management and handling values filled in the form. This also includes preparing the initial state of the form.

When you have this, you need functions to handle those fields to keep the form state up-to-date. Next comes validation. You have to ensure all those values are really legit, or valid. This may require some validation logic including regex. As a part of the validation, you also have to ensure you have valid values for all required fields.

What if some value is invalid, or required and missing? When this happens, you have to find out what value is invalid and display correct error message for that field. That's not the end. You also have to ensure that when the value is valid the error message disappears. Only when you have all this covered you can proceed to submitting the form.

Building React forms with Formik

If this all sounds like a pain to you, you are not alone. For one of these React developer this pain was a motivation to come up with a solution. This solution he came up with was Formik. The idea is to make building React forms easier for developers by doing most of the heavy lifting for them.

This includes the usual things involved in building forms, the form state management, input validation, showing error messages when necessary and also handling form submission. At this moment, there are at least three ways to use Formik to build forms. Below, we will take a look at each of these ways.

Creating simple form validation schema

Formik supports multiple ways to validate forms. One way is to write the validation logic by yourself. Formik will then use that logic and handle error messages. Another option is to use some validation library. In this tutorial, we will choose the second option and use validation library called Yup.

What this library does is it helps you create validation schema for your form. This schema is basically an object that contains validation rules for individual fields in your form. Formik as able to use this schema, built with Yup, to validate all fields defined in the schema against their specific rules.

Another nice feature of Yup schema is the option to specify error message for each rule. You do this by passing some text as an argument to rules functions. For example, when field is required, you use required() function. To specify the error message for this rule you pass the message as an argument: required('This field is required.').

All forms we will use in this tutorial will have three fields: name, email and password. All these fields will be required. We will specify all this in the form schema created with Yup. For the email field, we will also specify that it has to match email format.

import * as Yup from 'yup'

const formSchema = Yup.object().shape({
  name: Yup.string().required('First name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
  password: Yup.string().required('Password is required'),
})

Custom forms with Formik

The first option is to use Formik as a wrapper for your React forms. You will create the form and components for all fields you need. This also includes error messages for those fields. Formik will take care of form state, validation and error handling. This option will require only one component provided by Formik called Formik.

The Formik component

This Formik component will serve as a wrapper for the whole form. This doesn't mean it will replace the form element wrapping your form. If you are using the form element, it will stay. The Formik component will wrap this element as well. The Formik component has a couple of attributes that will be handy.

These attributes are initialValues, onSubmit and validationSchema. The initialValues attribute specifies object to define initial values of all fields and creates form state. The onSubmit attribute allows you to specify handler function for onSubmit event. The validationSchema attribute allows to specify validation schema to use.

Initial values for all fields, name, email and password, will be empty strings. For now, to handle onSubmit event, we will now use arrow function and simple console.log() to log submitted values. Formik component uses render-prop pattern that helps share code between React component. Don't worry you don't need to know how this works.

All you need to know is that Formik expects its direct children to be a function that returns some React component. In this case, that returned component will be the form element and its content. Because we will work with custom form elements, we will need to expose some data from Formik component so we can work with them.

We can get this data by using object destructuring in the function that returns the form element. The data we will need are values, errors, touched, handleBlur, handleChange and handleSubmit. The values is an object that contains current values for each form field. We will use this to specify values for input value attribute.

The errors is also an object. If there are any errors in the form, invalid or missing fields, you will find it inside this object. The touched is an object that tells which form field has been touched and which not. Touched field means that someone interacted with that field, it was focused.

The handleBlur and handleChange are handlers for inputs onBlur and onChange events. These two events will allow Formik track changes in values, update form state, update "touched" status and also run validations when fields lose focus. The handleSubmit is a handler for form onSubmit event.

We will use this handler for onSubmit attribute of form element to trigger Formik's handleSubmit function when the form is submitted.

// Import dependencies:
import { memo } from 'react'
import { Formik } from 'formik'
import * as Yup from 'yup'

// Create form validation schema:
const formSchema = Yup.object().shape({
  name: Yup.string().required('First name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
  password: Yup.string().required('Password is required'),
})

// Create the form component:
export const FormCustom = memo(() => {
  return (
    <Formik
      initialValues={{ name: '', email: '', password: '' }}
      onSubmit={(values) => {
        console.log(values)
      }}
      validationSchema={formSchema}
    >
      {({
        values,
        errors,
        touched,
        handleBlur,
        handleChange,
        handleSubmit,
      }) => <form></form>}
    </Formik>
  )
})

FormCustom.displayName = 'FormCustom'

The form content

The next step is putting together the content of the form, individual fields. This will be quick and easy. Each field will be composed of div element used as a wrapper. Inside this wrapper will be label and input elements. There will be also p element with an error message. To make sure everything works we will need two things.

First, we will need to use correct value for input name attributes. Formik uses this attribute, or id, to connect each field with correct property in the form state. We set the initial values object to have properties name, email and password. This means that we will have to use the same values for each name attribute, or id, or both.

The second thing are the onChange and onBlur input events handler functions. We need to connect Formik state with each input. This will allow Formik to track changes of values and blur events and update values, touched and errors accordingly. Last thing are the value input attributes for each input field.

Those inputs should be controlled by Formik state. This will allow to display current values in Formik state as values of corresponding input fields. To do this, we will use values object and its specific property to get latest correct value for each input field.

// ... Previous code
export const FormCustom = memo(() => {
  return (
    <Formik
      initialValues={{ name: '', email: '', password: '' }}
      onSubmit={(values) => {
        console.log(values)
      }}
      validationSchema={formSchema}
    >
      {({
        values,
        errors,
        touched,
        handleBlur,
        handleChange,
        handleSubmit,
      }) => (
        <form onSubmit={handleSubmit} noValidate>
          <div>
            <label htmlFor="name">Name</label>
            <input
              type="text"
              name="name"
              value={values.name}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </div>

          <div>
            <label htmlFor="email">Email</label>
            <input
              type="email"
              name="email"
              value={values.email}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </div>

          <div>
            <label htmlFor="password">Password</label>
            <input
              type="password"
              name="password"
              value={values.password}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </div>

          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      )}
    </Formik>
  )
})

FormCustom.displayName = 'FormCustom'

Simple error messages

We have Formik and form state. We also have form content. The last thing that remains are error messages. One part of this is already covered by validation schema we created with Yup and Formik. The second part are error messages. We have to tell Formik where we want to show them and under what condition. Both these things will be easy.

To address the first, we will put each error message under corresponding field. We will use p elements to show the text we defined for each rule in our Yup validation schema. The condition for when to display each message will following: We want to show the error when field is empty or invalid, but only after it has been touched.

This will help prevent the errors popping up when someone just opens the form. And, don't worry. Formik automatically sets all fields to touched when the form is submitted. So, if someone tries to submit empty form, error messages for invalid fields will correctly pop up because Formik will set all fields as touched and there are some errors.

Since we specified error messages in validation schema we only have to ensure that Formik displays correct error message for each field. We will do this by using the errors object and correct property (field name). We will use the same property with touched object to check if specific field has been touched.

// ... Previous code
export const FormCustom = memo(() => {
  return (
    <Formik
      initialValues={{ name: '', email: '', password: '' }}
      onSubmit={(values) => {
        console.log(values)
      }}
      validationSchema={formSchema}
    >
      {({
        values,
        errors,
        touched,
        handleBlur,
        handleChange,
        handleSubmit,
      }) => (
        <form onSubmit={handleSubmit} noValidate>
          <div>
            <label htmlFor="name">Name</label>
            <input
              type="text"
              name="name"
              value={values.name}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            {/* Add error message for "Name" field */}
            {errors.name && touched.name && <p>{errors.name}</p>}
          </div>

          <div>
            <label htmlFor="email">Email</label>
            <input
              type="email"
              name="email"
              value={values.email}
              onChange={handleChange}
              onBlur={handleBlur}
            />

            {/* Add error message for "Email" field */}
            {errors.email && touched.email && <p>{errors.email}</p>}
          </div>

          <div>
            <label htmlFor="password">Password</label>
            <input
              type="password"
              name="password"
              value={values.password}
              onChange={handleChange}
              onBlur={handleBlur}
            />

            {/* Add error message for "Password" field */}
            {errors.password && touched.password && <p>{errors.password}</p>}
          </div>

          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      )}
    </Formik>
  )
})

FormCustom.displayName = 'FormCustom'

Putting it together

Since Formik, form content and error messages are done your custom React form is complete as well. Below is the complete code for the whole form. The last thing that needs some work is what to do when the form is submitted. You handle this in Formik's onSubmit attribute and its handler function. Replace that console.log() with anything you need.

// Import dependencies:
import { memo } from 'react'
import { Formik } from 'formik'
import * as Yup from 'yup'

// Create form validation schema:
const formSchema = Yup.object().shape({
  name: Yup.string().required('First name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
  password: Yup.string().required('Password is required'),
})

// Create the form component:
export const FormCustom = memo(() => {
  return (
    <Formik
      initialValues={{ name: '', email: '', password: '' }}
      onSubmit={(values) => {
        console.log(values)
      }}
      validationSchema={formSchema}
    >
      {({
        values,
        errors,
        touched,
        handleBlur,
        handleChange,
        handleSubmit,
      }) => (
        <form onSubmit={handleSubmit} noValidate>
          <div>
            <label htmlFor="name">Name</label>
            <input
              type="text"
              name="name"
              value={values.name}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            {errors.name && touched.name && <p>{errors.name}</p>}
          </div>

          <div>
            <label htmlFor="email">Email</label>
            <input
              type="email"
              name="email"
              value={values.email}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            {errors.email && touched.email && <p>{errors.email}</p>}
          </div>

          <div>
            <label htmlFor="password">Password</label>
            <input
              type="password"
              name="password"
              value={values.password}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            {errors.password && touched.password && <p>{errors.password}</p>}
          </div>

          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      )}
    </Formik>
  )
})

FormCustom.displayName = 'FormCustom'

Conclusion: 3 Ways to build React forms with Formik pt.1

Formik library makes it much easier to build and work with React forms. This tutorial showed you how to make the Formik component to work with custom HTML elements. This can help you use Formik to handle only things such as state management and validation while letting you do the rest as you want.