Archives Gallery About
Jackson Sophat

Lazy Function

Front-End
About 281 Words

Definition

A Lazy Function can also be called as Lazy evaluation.

In programming language theory, lazy evaluation, or call-by-need,[1] is an evaluation strategy which delays the evaluation of an expression until its value is needed (non-strict evaluation) and which avoids repeated evaluations (by the use of sharing).

Example

By making the copyToClipboard function lazy, the if (navigator.clipboard) condition only needs to be run once per runtime.

before
1
2
3
4
5
6
7
function copyToClipboard(text) {
  if (navigator.clipboard) {
    // ...
  } else {
    // ...
  }
}
after
1
2
3
4
5
6
7
8
9
10
11
12
function copyToClipboard(text) {
  if (navigator.clipboard) {
    copyToClipboard = function () {
      // ...
    };
  } else {
    copyToClipboard = function () {
      // ...
    };
  }
  copyToClipboard(text);
}
copyToClipboard
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function copyToClipboard(text) {
  if (navigator.clipboard) {
    copyToClipboard = function () {
      navigator.clipboard.writeText(text);
    };
  } else {
    copyToClipboard = function () {
      const textArea = document.createElement("textarea");
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.select();
      try {
        document.execCommand("copy");
      } catch (err) {}
      document.body.removeChild(textArea);
    };
  }
  copyToClipboard(text);
}

In Vue/React?

In Vue and React, there are some built-in features or APIs that implement lazy evaluation, mainly for performance optimization and avoiding unnecessary calculations.

React

Feature / APILazy or notDescription
useMemo(fn, deps)✅ Yesfn is called only when dependencies change, otherwise the last cached value is returned.
useCallback(fn, deps)✅ YesSimilar to useMemo, used to cache function references to avoid re-rendering of child components.
React.lazy(() => import())✅ YesDynamically import components and load the corresponding module until rendering is needed.
Suspense + lazy✅ YesUsed with React.lazy to delay loading resources until they are needed.
useDeferredValue⚠️ Partially lazyIt is “delayed update” rather than lazy evaluation, used for low-priority rendering.
useTransition⚠️ Delayed renderingUsed to delay some updates, it is “delayed scheduling” rather than true lazy calculation.

Vue

Features / APILazy or notDescription
computed✅ YesRecalculate only when dependencies change, otherwise return cached values.
watchEffect✅ YesAlthough dependencies are automatically collected, the execution body is run after the dependencies are first established.
defineAsyncComponent✅ YesSimilar to React.lazy, components are only loaded when they are actually used.
v-once✅ YesAfter rendering once, it will not be updated again, similar to static cache.
suspense✅ YesUsed to handle asynchronous component loading, used with async component.

Summary

Lazy evaluation usually appears in the following scenarios:

  • Performance optimization: Avoid repeated execution of expensive calculations (such as computed, useMemo).

  • Lazy loading: Reduce the size of the first screen (such as React.lazy, defineAsyncComponent).

  • Side effect control: Only trigger side effects when dependencies change (such as watch, useEffect).

#JavaScript #Design Mode