It is similar to caching the return value of a function so that the function doesn't get executed if given the same arguments. It helps us to avoid expensive recalculations and speeds up an application.

import {useMemo} from 'react';

const memoizedValue = useMemo(
  () => performExpensiveCalculation(arg1, arg2),
  [arg1, arg2]
)

You don't need any additional typings since TypeScript knows that 

 accepts a function and an array of dependencies.

 though, to ensure you don't miss any argument in the dependencies array but that's optional.

Let's imagine we have a hasher component that takes user keyboard input and hashes it using third-party sha256 hash:

import React, {useState} from 'react';
import sha256 from 'some-third-party-hasher';

const Hash: React.FC = () => {
  const [input, setInput] = useState('');
  const hash = sha256(input);
  
  return <div>
  	<label>
      Input: 
      <input 
        type="text" 
        value={input} 
        onChange={e => setInput(e.target.value)}
        />
    </label>
    
    Hash: {hash}
  </div>
}

 call is pretty expensive and will be called on every render. This can slow down application performance. Let's memoize the hasher!

import React, {useState, useMemo} from 'react';
import sha256 from 'some-third-party-hasher';

const Hash: React.FC = () => {
  const [input, setInput] = useState('');

  // Now we use `useMemo` to tell React 
  // to memoize the calculation result for input.
  // When a user inputs the same input
  // there will be done no calculation
  // and the value will be returned right away.
  const hash = useMemo(() => sha256(input), [input]);
  
  return <div>
  	<label>
      Input: 
      <input 
        type="text" 
        value={input} 
        onChange={e => setInput(e.target.value)}
        />
    </label>
    
    Hash: {hash}
  </div>
}

This is not only useful to remember the return value for some arguments, but also to prevent unnecessary component re-renders. For example, when we 2 different inputs in the same component and we don't want changes in one of them to trigger re-rendering in the other.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Use <code>useMemo</code> Hook with TypeScript</h1><p>The <code><a href="https://reactjs.org/docs/hooks-reference.html#usememo" rel="noopener noreferrer nofollow">useMemo</a></code><a href="https://reactjs.org/docs/hooks-reference.html#usememo" rel="noopener noreferrer nofollow"> hook</a> memoizes a function value. </p><p>It is similar to caching the return value of a function so that the function doesn't get executed if given the same arguments. It helps us to avoid expensive recalculations and speeds up an application.</p><h2><a name="basic-syntax" id="basic-syntax">Basic Syntax</a></h2><p><code>useMemo</code> takes 2 arguments:</p><ul><li><p>a function to perform;</p></li><li><p>an array of dependencies to detect changes.</p></li></ul><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-6KGQ0" id="cm-6KGQ0">import {useMemo} from 'react';

const memoizedValue = useMemo(
  () =&gt; performExpensiveCalculation(arg1, arg2),
  [arg1, arg2]
)</textarea><p>You don't need any additional typings since TypeScript knows that <code>useMemo</code> accepts a function and an array of dependencies.</p><p>It is preferable to use <code><a href="https://www.npmjs.com/package/eslint-plugin-react-hooks#installation" rel="noopener noreferrer nofollow">eslint-plugin-react-hooks</a></code> though, to ensure you don't miss any argument in the dependencies array but that's optional.</p><h2><a name="using-with-components" id="using-with-components">Using with Components</a></h2><p>Let's imagine we have a hasher component that takes user keyboard input and hashes it using third-party sha256 hash:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-cZwBi" id="cm-cZwBi">import React, {useState} from 'react';
import sha256 from 'some-third-party-hasher';

const Hash: React.FC = () =&gt; {
  const [input, setInput] = useState('');
  const hash = sha256(input);
  
  return &lt;div&gt;
  	&lt;label&gt;
      Input: 
      &lt;input 
        type="text" 
        value={input} 
        onChange={e =&gt; setInput(e.target.value)}
        /&gt;
    &lt;/label&gt;
    
    Hash: {hash}
  &lt;/div&gt;
}</textarea><p>The <code>sha256(input)</code> call is pretty expensive and will be called on every render. This can slow down application performance. Let's memoize the hasher!</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-Nasui" id="cm-Nasui">import React, {useState, useMemo} from 'react';
import sha256 from 'some-third-party-hasher';

const Hash: React.FC = () =&gt; {
  const [input, setInput] = useState('');

  // Now we use `useMemo` to tell React 
  // to memoize the calculation result for input.
  // When a user inputs the same input
  // there will be done no calculation
  // and the value will be returned right away.
  const hash = useMemo(() =&gt; sha256(input), [input]);
  
  return &lt;div&gt;
  	&lt;label&gt;
      Input: 
      &lt;input 
        type="text" 
        value={input} 
        onChange={e =&gt; setInput(e.target.value)}
        /&gt;
    &lt;/label&gt;
    
    Hash: {hash}
  &lt;/div&gt;
}</textarea><p>This is not only useful to remember the return value for some arguments, but also to prevent unnecessary component re-renders. For example, when we 2 different inputs in the same component and we don't want changes in one of them to trigger re-rendering in the other.</p><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><code><a href="https://reactjs.org/docs/hooks-reference.html#usememo" rel="noopener noreferrer nofollow">useMemo</a></code></p></li><li><p><code><a href="https://www.npmjs.com/package/eslint-plugin-react-hooks#installation" rel="noopener noreferrer nofollow">eslint-plugin-react-hooks</a></code></p></li></ul><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Use useMemo Hook with TypeScript

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript