 returns a memoized callback that only changes if one of the dependencies has changed. This helps us to avoid unwanted and unnecessary components re-renders.

import {useCallback} from 'react';

const memoizedCallback = useCallback(
  // The first argument is a function to perform:
  () => performOperation(arg1, arg2),
  
  // The second argument is an array of dependencies
  // needed to detect changes in function arguments:
  [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 assume we have a login form component:

import React, {useState} from 'react';

type LoginFormProps = {
  onSubmit: (email: string, password: string) => void;
}

const LoginForm: React.FC<LoginFormProps> = (props) => {
  const {onSubmit} = props;
  
  // Use local state to work with form values:
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  
  // Use change handler to update the email value:
  const updateEmail = (newValue: string): void =>
    setEmail(value);
  
  // ...And use handler to update the password:
  const updatePassword = (newValue: string): void =>
    setPassword(value);
  
  return <form onSubmit={onSubmit}>
    <EmailInput 
      value={email} 
      onChange={updateEmail} />
    
    <PasswordInput 
      value={password} 
      onChange={updatePassword} />
  </form>
}

import React, {ChangeEvent} from 'react';

// First one to render a user's email:

type EmailInputProps = {
  value: string;
  onChange: (newValue: string) => void;
}

const EmailInput: React.FC<EmailInputProps> = ({
  value,
  onChange,
}) => {
  return <label>
    Your email:
    <input 
      type="email" 
      value={value} 
      onChange={
        (e: ChangeEvent) => onChange(e.target.value)
      } />
  </label>
}

// And the second one to render their password:

type PasswordInputProps = {
  value: string;
  onChange: (newValue: string) => void;
}

const PasswordInput: React.FC<PasswordInputProps> = ({
  value,
  onChange,
}) => {
  return <label>
    Your password:
    <input
      type="password"
      value={password}
      onChange={
      	(e: ChangeEvent) => onChange(e.target.value)
      } />
  </label>
}

The problem is that when we change an email React will re-render both inputs instead of only 

This is happening because handler functions are being created on every re-render of the 

 component. So, on each render there are new handler functions for the 

 component, that's why they re-render each time. Let's fix that!

import React, {useState, useCallback} from 'react';

// ...

const LoginForm: React.FC<LoginFormProps> = (props) => {
  // ...
  
  // Here, we wrap our handler in the `useCallback` hook.
  // This tells React to “remember” the callback
  // we created the first time and not to re-create it
  // on each render.
  const updateEmail = useCallback(
    // Later, when the `updateEmail` is called,
    // this inner function will be called.
    (newValue: string): void => setEmail(newValue),

	// However, the `updateEmail` itself won't change
    // unless on of these dependencies is changed:
    [setEmail]
    
    // In our case `updateEmail` will change only 
    // if `setEmail` changes.
  );
  
  // The same goes for the password update as well.
  const updatePassword = useCallback(
    (newValue: string): void => 
  		setPasswordEmail(newValue),
    [setPasswordEmail]
  );
  
  return <form onSubmit={onSubmit}>
    <EmailInput 
      value={email} 
      onChange={updateEmail} />
    
    <PasswordInput 
      value={password} 
      onChange={updatePassword} />
  </form>
}

Now, when we change an email or a password only the corresponding input component re-renders.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Use <code>useCallback</code> Hook with TypeScript</h1><p>The <code><a href="https://reactjs.org/docs/hooks-reference.html#usecallback" target="_blank" rel="noopener noreferrer nofollow">useCallback</a></code><a href="https://reactjs.org/docs/hooks-reference.html#usecallback" target="_blank" rel="noopener noreferrer nofollow"> hook</a> returns a memoized callback that only changes if one of the dependencies has changed. This helps us to avoid unwanted and unnecessary components re-renders.</p><h2 class="heading-anchor-text" id="basic-syntax"><span>Basic Syntax</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#basic-syntax">#</a></h2><p>The basic syntax for the <code>useCallback</code> hook is:</p><div style="
          min-height: 256px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript" data-uniqueid="cm-Zmm1j" id="cm-Zmm1j">import {useCallback} from 'react';

const memoizedCallback = useCallback(
  // The first argument is a function to perform:
  () =&gt; performOperation(arg1, arg2),
  
  // The second argument is an array of dependencies
  // needed to detect changes in function arguments:
  [arg1, arg2],
);</textarea></div><p>You don't need any additional typings since TypeScript knows that <code>useCallback</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" target="_blank" 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 class="heading-anchor-text" id="using-with-components"><span>Using with Components</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#using-with-components">#</a></h2><p>Let's assume we have a login form component:</p><div style="
          min-height: 760px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript-jsx" data-uniqueid="cm-I8KZz" id="cm-I8KZz">import React, {useState} from 'react';

type LoginFormProps = {
  onSubmit: (email: string, password: string) =&gt; void;
}

const LoginForm: React.FC&lt;LoginFormProps&gt; = (props) =&gt; {
  const {onSubmit} = props;
  
  // Use local state to work with form values:
  const [email, setEmail] = useState&lt;string&gt;('');
  const [password, setPassword] = useState&lt;string&gt;('');
  
  // Use change handler to update the email value:
  const updateEmail = (newValue: string): void =&gt;
    setEmail(value);
  
  // ...And use handler to update the password:
  const updatePassword = (newValue: string): void =&gt;
    setPassword(value);
  
  return &lt;form onSubmit={onSubmit}&gt;
    &lt;EmailInput 
      value={email} 
      onChange={updateEmail} /&gt;
    
    &lt;PasswordInput 
      value={password} 
      onChange={updatePassword} /&gt;
  &lt;/form&gt;
}</textarea></div><p>And then we have 2 input components:</p><div style="
          min-height: 1096px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript-jsx" data-uniqueid="cm-XMds6" id="cm-XMds6">import React, {ChangeEvent} from 'react';

// First one to render a user's email:

type EmailInputProps = {
  value: string;
  onChange: (newValue: string) =&gt; void;
}

const EmailInput: React.FC&lt;EmailInputProps&gt; = ({
  value,
  onChange,
}) =&gt; {
  return &lt;label&gt;
    Your email:
    &lt;input 
      type="email" 
      value={value} 
      onChange={
        (e: ChangeEvent) =&gt; onChange(e.target.value)
      } /&gt;
  &lt;/label&gt;
}

// And the second one to render their password:

type PasswordInputProps = {
  value: string;
  onChange: (newValue: string) =&gt; void;
}

const PasswordInput: React.FC&lt;PasswordInputProps&gt; = ({
  value,
  onChange,
}) =&gt; {
  return &lt;label&gt;
    Your password:
    &lt;input
      type="password"
      value={password}
      onChange={
      	(e: ChangeEvent) =&gt; onChange(e.target.value)
      } /&gt;
  &lt;/label&gt;
}</textarea></div><p>The problem is that when we change an email React will re-render both inputs instead of only <code>EmailInput</code>. </p><p>This is happening because handler functions are being created on every re-render of the <code>LoginForm</code> component. So, on each render there are new handler functions for the <code>InputEmail</code> and <code>PasswordEmail</code> component, that's why they re-render each time. Let's fix that!</p><div style="
          min-height: 1000px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript-jsx" data-uniqueid="cm-Kgn6j" id="cm-Kgn6j">import React, {useState, useCallback} from 'react';

// ...

const LoginForm: React.FC&lt;LoginFormProps&gt; = (props) =&gt; {
  // ...
  
  // Here, we wrap our handler in the `useCallback` hook.
  // This tells React to “remember” the callback
  // we created the first time and not to re-create it
  // on each render.
  const updateEmail = useCallback(
    // Later, when the `updateEmail` is called,
    // this inner function will be called.
    (newValue: string): void =&gt; setEmail(newValue),

	// However, the `updateEmail` itself won't change
    // unless on of these dependencies is changed:
    [setEmail]
    
    // In our case `updateEmail` will change only 
    // if `setEmail` changes.
  );
  
  // The same goes for the password update as well.
  const updatePassword = useCallback(
    (newValue: string): void =&gt; 
  		setPasswordEmail(newValue),
    [setPasswordEmail]
  );
  
  return &lt;form onSubmit={onSubmit}&gt;
    &lt;EmailInput 
      value={email} 
      onChange={updateEmail} /&gt;
    
    &lt;PasswordInput 
      value={password} 
      onChange={updatePassword} /&gt;
  &lt;/form&gt;
}</textarea></div><p>Now, when we change an email or a password only the corresponding input component re-renders.</p><h2 class="heading-anchor-text" id="sources"><span>Sources</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#sources">#</a></h2><ul><li><p><code><a href="https://reactjs.org/docs/hooks-reference.html#usecallback" target="_blank" rel="noopener noreferrer nofollow">useCallback</a></code></p></li><li><p><code><a href="https://www.npmjs.com/package/eslint-plugin-react-hooks#installation" target="_blank" rel="noopener noreferrer nofollow">eslint-plugin-react-hooks</a></code></p></li><li><p><a href="https://www.newline.co/@bespoyasov/how-to-handle-keyboard-input-events-in-react-typescript-application--9b21764e" target="_blank" rel="noopener noreferrer nofollow">How to Handle Keyboard Input Events</a></p></li><li><p><a href="https://www.newline.co/@bespoyasov/how-to-use-state-in-react-components-with-typescript--625c1f27" target="_blank" rel="noopener noreferrer nofollow">How to Use State in React Components</a></p></li></ul>

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 useCallback Hook with TypeScript

Tags

Responses (1)

Masterclasses

Tutorials

Fullstack React with TypeScript