[@mantine/hooks] use-interval: Add autoInvoke option support

apps/mantine.dev/src/pages/hooks/use-interval.mdx

@@ -8,6 +8,20 @@ export default Layout(MDX_DATA.useInterval);
 
 <Demo data={HooksDemos.useIntervalDemo} />
 
+## Auto invoke interval
+
+To automatically start interval when component is mounted, set `autoInvoke` option to `true`:
+
+```tsx
+import { useInterval } from '@mantine/hooks';
+
+const interval = useInterval(
+  () => console.log('Interval tick'),
+  1000,
+  { autoInvoke: true }
+);
+```
+
 ## API
 
 ```tsx
@@ -31,9 +45,15 @@ Return object:
 ## Definition
 
 ```tsx
+interface UseIntervalOptions {
+  /** If set, the interval will start automatically when the component is mounted, `false` by default */
+  autoInvoke?: boolean;
+}
+
 function useInterval(
   fn: () => void,
-  interval: number
+  interval: number,
+  options?: UseIntervalOptions
 ): {
   start: () => void;
   stop: () => void;

packages/@mantine/hooks/src/use-interval/use-interval.story.tsx

@@ -31,3 +31,27 @@ export function Usage() {
     </div>
   );
 }
+
+export function AutoInvoke() {
+  const [counter, setCounter] = useState(0);
+  const [timeout, setTimeout] = useState(200);
+  const interval = useInterval(() => setCounter(counter + 1), timeout, { autoInvoke: true });
+
+  return (
+    <div>
+      <button type="button" style={{ padding: 40 }} onClick={() => setCounter(Math.random())}>
+        Set counter
+      </button>
+      <button
+        type="button"
+        style={{ padding: 40 }}
+        onClick={() => setTimeout((v) => (v === 200 ? 1000 : 200))}
+      >
+        Set timeout
+      </button>
+      <button type="button" style={{ padding: 40 }} onClick={interval.toggle}>
+        Counter: {counter}
+      </button>
+    </div>
+  );
+}

packages/@mantine/hooks/src/use-interval/use-interval.ts

@@ -1,6 +1,15 @@
 import { useEffect, useRef, useState } from 'react';
 
-export function useInterval(fn: () => void, interval: number) {
+interface UseIntervalOptions {
+  /** If set, the interval will start automatically when the component is mounted, `false` by default */
+  autoInvoke?: boolean;
+}
+
+export function useInterval(
+  fn: () => void,
+  interval: number,
+  { autoInvoke = false }: UseIntervalOptions = {}
+) {
   const [active, setActive] = useState(false);
   const intervalRef = useRef<number>();
   const fnRef = useRef<() => void>();
@@ -34,5 +43,11 @@ export function useInterval(fn: () => void, interval: number) {
     return stop;
   }, [fn, active, interval]);
 
+  useEffect(() => {
+    if (autoInvoke) {
+      start();
+    }
+  }, []);
+
   return { start, stop, toggle, active };
 }