MICRO HOOKS

Description

react hooks

Install

npm install micro-hooks-react

Usage

useAtom

import { useAtom } from 'micro-hooks-react';

export default function Counter() {
  const state = useAtom({ count: 0 });
  const increase = () => state.count++;
  const decrease = () => state.count--;
  return (
    <div>
      <p>count: {state.count}</p>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
}

useNextTick

import { useNextTick } from 'micro-hooks-react';
import { useState } from 'react';

export default function Counter() {
  const nextTick = useNextTick();
  const [count, setCount] = useState(0);
  const increase = () => setCount(count + 1);
  const decrease = () => setCount(count - 1);

  nextTick(() => {
    console.log('next tick');
  });

  // or promise
  // const onchange = async () => {
  //   await nextTick()
  //   console.log('next tick')
  // }

  return (
    <div>
      <p>count: {state.count}</p>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
}