DEV Community: Chen Asraf

How to use React memoization hooks for increased performance

Chen Asraf — Thu, 11 Aug 2022 09:20:00 +0000

As React apps grow bigger and more complex, performance becomes more and more of a problem. As components become larger and contain more and more sub-components, rendering becomes slow and turns into a bottleneck.

How do we tackle this? If you haven't used useMemo and useCallback, we can start with those.

In this tutorial, we will take a look at how these 2 very easy and handy callbacks work, and why they are so useful. In fact, these days my eyes get sore when I don't see them used. So let's dive in to what they do.

React.useMemo

This React hook's one goal is to save a value for later use, and not re-calculating it on the spot.

Let's take an example of some expensive logic that runs in our render function:

const ExpensiveComponent: React.FC = (props) => {
  const [list, setList] = React.useState([])
  const [counter, setCounter] = React.useState(0)
  const multiplied = list.map((i) => (i * 972 + 1000) / 5213).join(', ')

  function addRandom() {
    setList((prev) => [...prev, Math.floor(Math.random() * 10000)])
  }

  function increaseCounter() {
    setCounter((prev) => ++prev)
  }

  return (
    <div>
      Counter: {counter}
      <br />
      Multiplied: {multiplied}
      <br />
      <button onClick={addRandom}>Add Random</button>
      <button onClick={increaseCounter}>Increase Counter</button>
    </div>
  )
}

Doesn't seem very problematic, but take a look at the multiplied variable. The logic in this example isn't too bad, but imagine working with a giant list of special objects. This mapping alone could be a performance problem, especially if it's looped in a parent component.

In this case, there is another state hook - counter. When setCounter is called, multiplied will be calculated all over again, wasting previous resources, even when an update in that case is not needed as these variables are independent of each-other.

That's where useMemo comes in hand (read the official docs).

You can use this hook to save the value, and retrieve the same object until a re-calculation is needed.

Here's how it's used, the only line we need to change is the multiplied definition:

const multiplied = React.useMemo(() => {
  console.log('recalculating multiplied:', list)
  return list.map((i) => (i * 972 + 1000) / 5213).join(', ')
}, [list])

The useMemo hook takes 2 arguments:

The create function - used to return the calculated value of the variable we want to eventually use
A list of dependencies. The dependency list is used to determine when a new value should be calculated - i.e, when to run the create function again.

We added a console.log call here just to note when a new value is being calculated.

And with those changes, we can try our component again (here is the updated code just in case):

const ExpensiveComponent: React.FC = (props) => {
  const [list, setList] = React.useState([])
  const [counter, setCounter] = React.useState(0)
  const multiplied = React.useMemo(() => {
    console.log('recalculating multiplied:', list)
    return list.map((i) => (i * 972 + 1000) / 5213).join(', ')
  }, [list])

  function addRandom() {
    setList((prev) => [...prev, Math.floor(Math.random() * 10000)])
  }

  function increaseCounter() {
    setCounter((prev) => ++prev)
  }

  return (
    <div>
      Counter: {counter}
      <br />
      Multiplied: {multiplied}
      <br />
      <button onClick={addRandom}>Add Random</button>
      <button onClick={increaseCounter}>Increase Counter</button>
    </div>
  )
}

If you now change the counter by using the "Increase Counter" button, you will see our console.log call is not being invoked again until we use the other button for "Add Random".

React.useCallback

Now we have the other hook - useCallback (read the official docs).

This works exactly like the useMemo hook - except it is for functions instead of variable values.

We can take our button functions, and wrap each in this hook to make sure our function reference only changes when needed.

const ExpensiveComponent: React.FC = (props) => {
  const [list, setList] = React.useState([])
  const [counter, setCounter] = React.useState(0)
  const multiplied = React.useMemo(
    () => list.map((i) => (i * 972 + 1000) / 5213).join(', '),
    [list],
  )
  const addRandom = React.useCallback(
    () => setList((prev) => [...prev, Math.floor(Math.random() * 10000)]),
    [setList],
  )
  const increaseCounter = React.useCallback(() => setCounter((prev) => ++prev), [setCounter])

  return (
    <div>
      Counter: {counter}
      <br />
      Multiplied: {multiplied}
      <br />
      <button onClick={addRandom}>Add Random</button>
      <button onClick={increaseCounter}>Increase Counter</button>
    </div>
  )
}

Now both our variables and functions are memoized and will only change reference when their dependencies dictate they do.

Caveats

Using these hooks don't come without their share of problems.

Consider whether this actually improves performance or not in your specific case. If your state is pretty regularly changed and these memoizations have to run pretty often, their performance increases might be outweighed by the performance costs of actually running the memoization logic.
Dependency checking and generating can be expensive. Be careful what you put in the dependency lists, and if needed, make some more memoization and map your objects and lists in deterministic ways so that they are statically inspectable easily. Also avoid using expensive methods such as JSON.stringify to create those memoizations or dependencies, as it might also be too expensive to be worth the trouble and might make things worse.

Other things to consider

You might want to make sure your project uses lint rules that enforce exhaustive dependencies, as they make tracking these things much more easy.

In some cases, you might want to add ignore comments in very specific places, but it makes it very clear that this part is built that way intentionally and prevents more confusion about when to update the dependencies.

Hopefully you find this useful. There are many other hooks to learn about, but these 2 are very useful and often ignored, so I thought it would be good to highlight them. If you are interested you might want to look up useRef and how it differs from useMemo, or maybe I'll make another part about it in the future. Who knows?

Creating your next custom boilerplate easily with Simple-Scaffold

Chen Asraf — Wed, 10 Aug 2022 08:04:00 +0000

As most people who have been working a lot in front-end development, I will acknowledge that no matter what framework, library set or tools you work with, you end up replicating a lot of files, especially with modern component-based frameworks, such as React, Angular and Vue.js.

They usually grow to be very different, but they almost always start with the same some sort of base-skeleton, which gets built-upon later. A lot of pipeline code written, and time wasted.

What have we got?

There are some existing solutions to these problems, but they usually are not very flexible, or are tied to one library or implementation. Let's take a look at a few examples.

IDE snippets, such as VS Code's easy snippet extensions/configurations are very helpful. Basically, you can either use configuration JSON files to add snippets to your code quickly, or use extensions that simply fill these up for you.

There are nice benefits to this, as you can start typing the 'prefix' of the snippet and hit Tab quickly to add small snippets of code. You can also predefine stopping points, which you can navigate using Tab after inserting the snippet, and insert arguments, method names, etc.

These are nice, but only for small snippets. When you have to create an entire component, made by multiple files, you're stuck with the option to create multiple files yourself, name them appropriately, and paste different snippets on each file.

Some NPM libraries provide ways to scaffold files based on templates, but from what I've seen
- they are tied to specific task runners, libraries or frameworks
- they are difficult to set up and customize
- combining your entire stack will be difficult

Enter: Simple Scaffold

Read the Simple Scaffold documentation

I was frustrated with this, and all I wanted was to have different sets of files I could generate, simply by copying them at predefined directory structures, and fill them with some variable data.

For instance: I create a lot of React components at work. We have recently moved to a single-file component structure for starting components; but we have different types of components that we want to generate based on context, like different file contents for page containers versus general-use components.

Being fed up with my options, I made this small NPM package, that does just this, in a very easy and quick way to setup. Simply put your files wherever you want, and either use the CLI tool or the package as an import - and you're good to go. It preserves your input directory/file structure, replacing the handlebar tokens inside directory/file names and file contents.

Simple Example: Jekyll Posts

Creating Jekyll posts is very simple! However I still had a little bit missing - I have to manually add the date every time? Oh, man. What about the file identifier name, and title? My excerpt_separator?

So I just made the simplest script in Ruby (to fit in with the Jekyll theme) to run the Simple Scaffold CLI with some custom parameters.

#!/usr/bin/env ruby
require "json"

SCAFFOLD_DIR = "scaffold_templates"
*name = ARGV

data = { dateFmt: "yyyy-MM-dd", fullDateFmt: "yyyy-MM-dd HH:mm:ss XX" }

puts `
  npx simple-scaffold@latest "#{name.join(" ")}" \
    --templates #{SCAFFOLD_DIR}/**/* \
    --output _drafts \
    --overwrite true \
    --create-sub-folder false \
    --data '#{JSON.dump(data)}'
`
puts 'Done'

Let's run by this real quick:

Lines 1-7 - setting up locals such as template directory base, and some variables to pass to the templates.
Lines 9-16 - We pass the parameters via a shell call (back-ticks in ruby), and immediately run using npx.

Locals are passed to Handlebars, and can be used both in file/directory names and file contents.

Now all I had to do is create a place for my templates, and add a template inside:

- scaffold_templates/
  -- {{now dateFmt}}-{{kebabCase name}}.md

And fill it up with some basic post:

---
layout: post
title: "{{ startCase name }}"
date: {{ now fullDateFmt }}
excerpt_separator: <!-- more -->
categories:
---
Post content goes here

And voila! Running the script, along with a name:

./scaffold.rb "Billy Jean is not my lover"

Generates the following file structure:

- _posts/
  -- 2019-03-06-billy-jean-is-not-my-lover.markdown

---
layout: post
title: 'Billy Jean is not my lover'
date: 2019-03-06 16:43:38 +0200
excerpt_separator: <!-- more -->
categories:
---
Post content goes here

You can do more

Take the same approach and think what you could create generators for with 0 effort. React or Vue components? You can bundle each in a folder with all the imports, exports, base props, etc all lined up with your component name.

Add a script to your package.json, a couple of files, and you're good to go:

package.json

{
"gen:component": "npx simple-scaffold@latest -t scaffold_templates/react-component -o src/components -s true -w true '{\"className\": \"myClassName\",\"author\": \"Chen Asraf\"}'"
}

scaffold_templates/react-component/{{pascalCase name}}.tsx

/**
 * Author: {{ author }}
 * Date: {{ now "yyyy-MM-dd" }}
 */
import React from 'react'
import { ComponentProps } from 'utils/types'

export interface {{pascalCase name}}Props extends ComponentProps {
  className?: string
}

export default {{camelCase name}}: React.FC<{{pascalCase name}}Props> = (props) => {
  return (
    <div className="{{className}}">{{camelCase name}} Component</div>
  )
}

scaffold_templates/react-component/index.ts

export * from './{{pascalCase name}}'

Running npm run gen:component MyComponent will quickly generate your new components:

src/components/MyComponent/MyComponent.tsx

/**
 * Author: Chen Asraf
 * Date: 2022-08-10
 */
import React from 'react'
import { ComponentProps } from 'utils/types'

export interface MyComponentProps extends ComponentProps {
  className?: string
}

export default MyComponent: React.FC<MyComponentProps> = (props) => {
  return (
    <div className="myClassName">MyComponent Component</div>
  )
}

src/components/MyComponent/index.ts

export * from './MyComponent'

Why stop there? Create entire app boilerplates using the same method - create your boilerplate app, add all your libraries, and replace your app name with {{name}}. That's it! You can run this package with input from any local files and output them in (or as) your next project.

Check out the documentation by clicking this link!