В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

Explicit import of React is unnecessary due to babel new jsx transformation mechanic.
https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation

To prevent eslint errors just disable react/jsx-uses-react and react/react-in-jsx-scope

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

• demo
• doc file
• jsdoc

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

Благодаря дополнительному тест-кейсу (ниже), обнаружил незначительный баг: предположим, что мы пишем без typescript (да, так вот получилось) и если мы случайно или осознано захотим передать в setTitle что-то отличное от строки, то приложение крашится.

Ошибка происходит в этом месте (ниже, 57 строка), так как мы не проверяем наличие и тип value при попытке вызвать trim().

const [count, setCount] = React.useState(initialValue ?? min ?? 0);
Если initialValue = undefined то count = min = -Infinity.

В случаи обновления min и max из вне (код ниже) count не подстраивается под оптимальное значение.

const minCount = useCounter(0);
const maxCount = useCounter(100, { min:  minCount.count + 1 });

const { count }  = useCounter(0, { min: minCount.count, max: maxCount.count });

<button onClick={() => minCount.inc()}>+</button>
<span>{count}</span> // 0 - всегда

Странно будет выглядеть мемоизация будущих методов:

const minCount = useCounter(0);

const { count, inc } = useCounter(0, { min: minCount.count, max: maxCount.count });

const memoInc = useCallback(() => {
  inc()
}, [minCount.count]);

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

Часто бывает, что требуется изменять window.location.hash при изменении стейта(к примеру при нажатии на один из табов).

Reference:

'use client';
import { useEffect, useState } from 'react';

const getHash = () => (typeof window !== 'undefined' ? decodeURIComponent(window.location.hash.replace('#', '')) : undefined);

const useHash = () => {
  const [hash, setHash] = useState(getHash());

  useEffect(() => {
    const handleHashChange = () => {
      setHash(getHash());
    };
    window.addEventListener('hashchange', handleHashChange);
    return () => {
      window.removeEventListener('hashchange', handleHashChange);
    };
  }, []);

  return hash;
};

export default useHash;

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

Думаю мог бы быть полезен.
Можно глянуть реализацию здесь: https://habr.com/ru/articles/752808/

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

useWebSocket хук, позволяет подключаться на websocket сервера.

import { useEffect, useRef, useState } from 'react';

const connectSocket = (url: string) => {
  return new WebSocket(url);
};

interface IOptions {
  onFail: () => void;
  onSuccess: () => void;
}

export const useWebSocket = (
  url: string,
  onMessage: (message: MessageEvent) => void,
  options?: IOptions
) => {
  const ws = useRef<WebSocket | null>(null);
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [waitingToReconnect, setWaitingToReconnect] = useState<any>(null);

  const send = (data: string) => {
    ws.current?.send(data);
  };

  useEffect(() => {
    if (waitingToReconnect) return;

    const setupWebSocket = () => {
      const client = connectSocket(url);
      ws.current = client;

      client.onerror = (e) => {
        if (options?.onFail) {
          options?.onFail();
        }
        console.error('WebSocket error:', e);
      };

      client.onopen = () => {
        setIsOpen(true);
        if (options?.onSuccess) {
          options?.onSuccess();
        }
      };

      client.onmessage = (message) => {
        onMessage(message);
      };

      client.onclose = () => {
        if (waitingToReconnect) return;

        setIsOpen(false);

        setWaitingToReconnect(true);

        setTimeout(() => {
          setWaitingToReconnect(null);
        }, 5000);
      };
    };

    setupWebSocket();

    return () => {
      if (ws.current) {
        ws.current.close();
        ws.current = null;
      }
    };
  }, [url, waitingToReconnect]);

  return { client: ws.current, open: isOpen, send };
};



import { useWebSocket } from './path-to-your-hook';

const MyComponent = () => {
  const { client, open, send } = useWebSocket('wss://serverws.com/', (message) => {
    console.log(message.data);
  }, {
    onFail: () => console.log('Connection failed'),
    onSuccess: () => console.log('Connection successful')
  });

  const handleSend = () => {
    if (open) {
      send('Hello, world!');
    }
  };

  return (
    <div>
      <button onClick={handleSend} disabled={!open}>Send Message</button>
      <p>WebSocket is {open ? 'open' : 'closed'}</p>
    </div>
  );
};```

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать jsdoc по аналогии с готовыми хуками, например useDocumentTitle.

В рамках задачи нужно описать тесты по аналогии с готовыми хуками, например useDocumentTitle.