react-next-tick v0.1.1

React nextTick

Table of contents

• Overview
• Installation
• ESLint configuration
• Usage
• Related packages

Overview

A React equivalent of Vue's nextTick() function.

Installation

npm install react-next-tick

ESLint configuration

module.exports = {
  rules: {
    ...
   "react-hooks/exhaustive-deps": [
      "warn",
      { additionalHooks: "^useNextTick$" }
    ],
    ...
  }
}

Usage

import * as React from "react";
import { useNextTick } from "react-next-tick";

function Component(): React.JSX.Element {
  const [value, setValue] = React.useState(0);

  const deferred = useNextTick(() => {
    console.log(value);
  }, [value]);

  return (
    <button onClick={clickHandler} type="button">
      Sample button
    </button>
  );

  function clickHandler(): void {
    setValue(1);
    deferred.immediate(); // Output: 0
    deferred(); // Output: 1
  }
}

Related packages

• eslint-plugin-misc — ESLint plugin.
• quasar-extension — Quasar extension.
• real-fns — A collection of utility functions.
• real-classes — A collection of utility classes.
• real-facades — Facades (each facade provides interface to pluggable implementation).
• real-service-providers — Facade implementations.