react-create-effect

A small utility to create custom hooks with effects without worrying about the current scope.

Note The name of library is change from create-effect to react-create-effect in favour of giving away the create-effect npm package to Effect ecosystem (https://github.com/Effect-TS/effect)

Install

Through npm npm install react-create-effect --save

API

const useCustomEffectHook = createEffect(effectDefinition, addDependencies);

• effectDefinition: A function which matches the definition of the API for which you are creating effect hook for. It should return a function which will be used to cleanup the effect. See example for the useInterval hook

• addDependencies (Default to true): By default it will figure out dependencies by the arguments you pass on the effectDefinition. If there are no dependencies on the argument, it will use an empty array as dependency causing effect to run only on the first render(mount). With addDependencies as false you can tell the createEffect that this effect has to run after each render.

Creating Effect Hooks

Interval hook (useInterval)

import createEffect from "react-create-effect";

const useInterval = createEffect((handler, delay) => {
  const interval = setInterval(handler, delay);

  return () => {
    clearInterval(interval);
  };
});

useInterval example

export default function TestUseInterval() {
  const [delay, setDelay] = useState(1000);

  const [currentTime, updateTime] = useState(new Date().toLocaleTimeString());

  useInterval(() => {
    updateTime(new Date().toLocaleTimeString());
  }, delay);

  return (
    <div>
      {currentTime}{" "}
      <button onClick={() => setDelay(delay + 1000)}>Update Delay</button>
    </div>
  );
}

Timeout hook (useTimeout)

import createEffect from "react-create-effect";

const useTimeout = createEffect((handler, delay) => {
  const timeout = setTimeout(handler, delay);

  return () => {
    clearTimeout(timeout);
  };
});

Window event's hook (useWindowEvent)

const useWindowEvent = createEffect((event, handler, captureMode) => {
  window.addEventListener(event, handler, captureMode);

  return () => {
    window.removeEventListener(event, handler, captureMode);
  };
});

useWindowEvent example

function App() {
  const [open, setOpen] = useState(false);

  useWindowEvent("click", handle() => {
    setOpen(!open);
  });

  return (
    <div className="App">
      <h1>Hello World!</h1>
      <h2>{String(open)}</h2>
    </div>
  );
}

Why not just useEffect?

Check this out, https://overreacted.io/making-setinterval-declarative-with-react-hooks/

Like it?

:star: this repo