import * as React from 'react';

import useStateWithCallback from 'use-state-with-callback';

// Note: cannot be used on the server-side (e.g. Next.js)
// import { useStateWithCallbackInstant } from 'use-state-with-callback';

const App = () => {
  const [count, setCount] = useStateWithCallback(0, currentCount => {
    console.log('render, then callback.');
    console.log('otherwise use useStateWithCallbackInstant()');

    if (currentCount > 1) {
      console.log('Threshold of over 1 reached.');
    } else {
      console.log('No threshold reached.');
    }
  });

  // const [count, setCount] = useStateWithCallbackInstant(0, currentCount => {
  //   console.log('render with instant callback.');

  //   if (currentCount > 1) {
  //     console.log('Threshold of over 1 reached.');
  //   } else {
  //     console.log('No threshold reached.');
  //   }
  // });

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      {count}

      <button type="button" onClick={handleClick}>
        Increase
      </button>
    </div>
  );
};

export default App;

import * as React from 'react';
import { useStateWithCallbackLazy } from 'use-state-with-callback';

const App = () => {
  const [count, setCount] = useStateWithCallbackLazy(0);

  const handleClick = () => {
    setCount(count + 1, (currentCount) => {
      if (currentCount > 1) {
        console.log('Threshold of over 1 reached.');
      } else {
        console.log('No threshold reached.');
      }
    });
  };

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={handleClick}>
        Increase
      </button>
    </div>
  );
};

export default App;