NextTick function and react implementation code in vue

Vue 3

Basic usage：

import { nextTick } from 'vue';
// Global callnextTick(() => {
  // Code executed after the next DOM update loop});
// Call inside the componentsetup() {
  async function handleUpdate() {
    // Modify the data...    await nextTick();
    // Code executed after data-induced DOM update is completed  }
}

• nextTickThe function now serves asvueAn export member of the package needs to be explicitly imported and used.
• In the componentsetupIn functions or other contexts, you can useawait nextTick()to wait for the DOM update to complete.

effect：

Delayed execution: Ensure that the callback function is executed after the DOM update caused by the current operation is completed. This is critical for operations that rely on updated DOM states, such as calculating element sizes, positions, or performing additional DOM operations.

Asynchronous update policy：
Vue 3 still follows an asynchronous update strategy, that is, when component state changes, Vue does not update the DOM immediately, but instead places these update tasks into a queue. Multiple state changes that occur in the same event loop are merged and the DOM is updated at one time during the "micro-task" phase of the next event loop. This can avoid unnecessary DOM operations and improve performance.

Use scenarios：

• Access to the updated DOM: After modifying the data, if you need to perform operations based on the updated DOM structure or style (such as getting element sizes, setting focus, etc.), you should place these operations in the nextTick callback.
• Solve the issue of relying on update order: Sometimes it is necessary to ensure that an operation is executed after the DOM update caused by another operation, such as scrolling to the position of the element immediately after inserting a new element. NextTick ensures the correct order of execution.
• Coordinate asynchronous operations: When you need to update the interface after performing asynchronous operations (such as network requests), you can use nextTick in the asynchronous callback to ensure that DOM updates occur after data changes.

Implementation principle：
Vue 3nextTickIt mainly implements asynchronous scheduling through Promise and returns a Promise object. When the DOM update is completed, the Promise is resolved, which triggersawait nextTick()The following code is executed. Vue 3 also continues to support the use of callback function form, but it is recommended to use it.awaitStatements for better code readability and error handling capabilities.

react

In React, although the name is not directly providednextTickfunction, but its design concept and asynchronous update mechanism are related tonextTickThe concept is similar. React also adopts an asynchronous batch update strategy, that is, when the component states (stateorprops) When changes occur, React does not immediately re-render the component and update the DOM, but instead places these update operations into a queue. When the event loops back to the main browser thread, React batches these updates, re-rendering the affected components at once and updating the real DOM.

If you need to implement something like this in ReactnextTickThe effect of the , that is, performing an operation after component update and DOM rendering is completed, you can use the following methods:

1. UseuseEffect Hook：

import { useState, useEffect } from 'react';
function MyComponent() {
  const [value, setValue] = useState(0);
  useEffect(() => {
    // The code here will be executed after the DOM is updated    // Suitable for operations that depend on DOM or global state    ('DOM update has been completed, can be operated here');
  }, [value]); // This effect is triggered when the dependency `value` changes  return (
    <div>
      <p>You clicked {value} times</p>
      <button onClick={() => setValue(value + 1)}>Click me</button>
    </div>
  );
}

In the above code,useEffectThe second parameter of the Hook (dependence array) containsvalue. whenvalueWhen changes are made, React re-renders the component and executes after the DOM is updated.useEffectInternal callback function. This ensures that relevant operations are performed after the DOM is truly updated.

2. Use(Special scenes only):

import ReactDOM from 'react-dom';
function MyComponent() {
  const [value, setValue] = useState(0);
  function handleClick() {
    // Force synchronous update of DOM    (() => {
      setValue(value + 1);
    });
    // The code here is immediately updated synchronously    ('DOM has been updated synchronously');
  }
  return (
    <div>
      <p>You clicked {value} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

is a low-level API for enforcing synchronous execution of React updates. This method can be used in very few scenarios where update results need to be seen immediately and cannot wait for the next event loop (such as handling timer accuracy issues). However, since synchronous updates can block the user interface, regular use is usually not recommended, but rather priority is givenuseEffect。

3. UserequestAnimationFrameorsetTimeout(fn, 0)：

function MyComponent() {
  const [value, setValue] = useState(0);
  function handleClick() {
    setValue(value + 1);
    requestAnimationFrame(() => {
      // The code here will be executed before the next repaint      ('The DOM is probably updated');
    });
  }
  return (
    <div>
      <p>You clicked {value} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

or:

function MyComponent() {
  const [value, setValue] = useState(0);
  function handleClick() {
    setValue(value + 1);
    setTimeout(() => {
      // The code here will be executed in the next event loop      ('The DOM is probably updated');
    }, 0);
  }
  return (
    <div>
      <p>You clicked {value} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

requestAnimationFrameandsetTimeout(fn, 0)All can postpone the code until the next browser redraw or event loop execution, and the DOM update is likely to be completed. Although not as good asuseEffectBinding to the React update cycle is as precisely, but for most scenarios where operations need to be performed after a DOM update, both methods are usually reliable enough.

To sum up, React does not havenextTickTools with the same name for the function, but by usinguseEffect Hook、(Special circumstances),requestAnimationFrameorsetTimeout(fn, 0), can achieve similar requirements for performing operations after DOM updates. In most cases,useEffectis the preferred solution because it is tightly integrated with React's update mechanism to ensure callbacks are executed at the right time.