@restart/hooks

useStatefulRef

This hook creates a mutable ref object that holds a value which can be changed without causing a component re-render, similar to useRef but with a stateful value.

import { useStatefulRef } from '@restart/hooks';

function MyComponent() {
  const ref = useStatefulRef(null);

  // ref.current is now mutable and can be updated without causing a re-render
  return <div ref={ref}>Hello, world!</div>;
}

useEventCallback

This hook ensures that a callback function remains stable between renders, preventing unnecessary re-renders of child components that might be sensitive to prop changes.

import { useEventCallback } from '@restart/hooks';

function MyComponent({ onClick }) {
  const stableOnClick = useEventCallback(onClick);

  // stableOnClick will not change between renders, preventing unnecessary re-renders of child components
  return <button onClick={stableOnClick}>Click me</button>;
}

useMounted

This hook provides a function to check if the component is still mounted before performing any actions that may result in a state update, which can help avoid memory leaks and errors.

import { useMounted } from '@restart/hooks';

function MyComponent() {
  const isMounted = useMounted();

  useEffect(() => {
    const timer = setTimeout(() => {
      if (isMounted()) {
        // Perform some action only if the component is still mounted
      }
    }, 1000);

    return () => clearTimeout(timer);
  }, [isMounted]);

  return <div>Timer example</div>;
}