cecigarcia

  import React from "react";
  import useClickPrevention from "./use-click-prevention";
  
  const MyComponent = () => {
    const onClick = () => console.log("single click");
    const onDoubleClick = () => console.log("double click");
    
    const [onClickWithPrevention, onDoubleClickWithPrevention] = useClickPrevention({ onClick, onDoubleClick });
    
    return (

cecigarcia

const noop = () => {};

const requestTimeout = (fn, delay, registerCancel) => {
  const start = new Date().getTime();

  const loop = () => {
    const delta = new Date().getTime() - start;

    if (delta >= delay) {
      fn();

cecigarcia

const noop = () => {};

const browserSupportsRaf = 
  window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame || 
	(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) || // Firefox 5 ships without cancel support
	window.oRequestAnimationFrame || 
	window.msRequestAnimationFrame;

const requestTimeoutNoRaf = (fn, delay, registerCancel) => {

cecigarcia

const noop = () => {};

const requestTimeout = (fn, delay, registerCancel) => {
  const start = new Date().getTime();

  const loop = () => {
    const delta = new Date().getTime() - start;

    if (delta >= delay) {
      fn();

cecigarcia

import { useEffect, useRef } from "react";

const noop = () => {};

const useCancelableScheduledWork = () => {
  const cancelCallback = useRef(noop);
  const registerCancel = fn => (cancelCallback.current = fn);
  const cancelScheduledWork = () => cancelCallback.current();

  // Cancels the current sheduled work before the "unmount"

cecigarcia

const browserIsAnimationFrameIncompatible =
  !window.requestAnimationFrame &&
  !window.webkitRequestAnimationFrame &&
  !window.mozRequestAnimationFrame &&
  !window.oRequestAnimationFrame &&
  !window.msRequestAnimationFrame;

const requestInterval = (fn, delay, registerCancel) => {
  if (browserIsAnimationFrameIncompatible) {
    const intervalId = window.setInterval(() => {

cecigarcia

import React, { useState, useEffect, useCallback } from "react";

const Counter = ({ notify }) => {
  const [value, setValue] = useState(0);

  useEffect(() => {
    notify(value);
  }, [value, notify]);

  return <button onClick={() => setValue(value + 1)}>Increment</button>;

cecigarcia

import React, { useState, useEffect } from "react";

const Counter = ({ notify }) => {
  const [value, setValue] = useState(0);

  useEffect(() => {
    notify(value);
  }, [value, notify]);

  return <button onClick={() => setValue(value + 1)}>Increment</button>;

cecigarcia

import React, { useState, useEffect } from "react";

const Counter = ({ notify }) => {
  const [value, setValue] = useState(0);

  useEffect(() => {
    notify(value);
  }, [value]);

  return <button onClick={() => setValue(value + 1)}>Increment</button>;

cecigarcia

import React, { useState, useEffect } from "react";

const Component = ({ notifyEven }) => {
  const [value, setValue] = useState(0);

  useEffect(() => {
    if ((value % 2) === 0) {
      notifyEven(value);
    }
  }, [value]);