useRef.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. import { useState } from 'react';
  2. /**
  3. * creates a MutableRef with ref change callback
  4. * @param initialValue - initial ref value
  5. * @param {Function} callback - a callback to run when value changes
  6. *
  7. * @example
  8. * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
  9. * ref.current = 1;
  10. * // prints 0 -> 1
  11. *
  12. * @see https://reactjs.org/docs/hooks-reference.html#useref
  13. * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
  14. * @returns {MutableRefObject}
  15. */
  16. export function useCallbackRef(initialValue, callback) {
  17. const [ref] = useState(() => ({
  18. // value
  19. value: initialValue,
  20. // last callback
  21. callback,
  22. // "memoized" public interface
  23. facade: {
  24. get current() {
  25. return ref.value;
  26. },
  27. set current(value) {
  28. const last = ref.value;
  29. if (last !== value) {
  30. ref.value = value;
  31. ref.callback(value, last);
  32. }
  33. },
  34. },
  35. }));
  36. // update callback
  37. ref.callback = callback;
  38. return ref.facade;
  39. }