[@mantine/hooks] use-hash: Add option to retrieve value initially wit…

…hout `useEffect` (#5140)

docs/pages/hooks/use-hash.mdx

@@ -11,8 +11,25 @@ and allows changing it with `setHash` function:
 
 <Demo data={HooksDemos.useHashDemo} />
 
+## Initial state value
+
+By default, `use-hash` will retrieve value in `useEffect`. If you want to get initial value
+as soon as hook is called, set `getInitialValueInEffect` to `false`. Note that this option is
+not compatible with server side rendering – you can only use it if your app is client-side only.
+
+```tsx
+import { useHash } from '@mantine/hooks';
+
+function Demo() {
+  const [hash, setHash] = useHash({ getInitialValueInEffect: false });
+  return <Button onClick={() => setHash('new-hash')}>Change hash</Button>;
+}
+```
+
 ## Definition
 
 ```tsx
-function useHash(): readonly [string, (value: string) => void];
+function useHash(options: {
+  getInitialValueInEffect?: boolean;
+}): readonly [string, (value: string) => void];
 ```

src/mantine-hooks/src/use-hash/use-hash.ts

@@ -1,8 +1,14 @@
 import { useState, useEffect } from 'react';
 import { useWindowEvent } from '../use-window-event/use-window-event';
 
-export function useHash() {
-  const [hash, setHashValue] = useState<string>('');
+interface UseHashOptions {
+  getInitialValueInEffect?: boolean;
+}
+
+export function useHash({ getInitialValueInEffect = false }: UseHashOptions = {}) {
+  const [hash, setHashValue] = useState<string>(
+    getInitialValueInEffect ? window.location.hash || '' : ''
+  );
 
   const setHash = (value: string) => {
     const valueWithHash = value.startsWith('#') ? value : `#${value}`;
@@ -18,7 +24,9 @@ export function useHash() {
   });
 
   useEffect(() => {
-    setHashValue(window.location.hash);
+    if (getInitialValueInEffect) {
+      setHashValue(window.location.hash);
+    }
   }, []);
 
   return [hash, setHash] as const;