react-elegant-ui/hooks/useLiveRef.js

Elegant UI components, made by BEM best practices for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useLiveRef = useLiveRef;
var _react = require("react");
var _useForceUpdate = require("./useForceUpdate");
/**
 * Create `RefObject` and `RefCallback` which update `RefObject`
 *
 * This different from `useState` because will not update state
 * while set same object and this return always same `RefObject`
 *
 * It better than `RefCallback` for some cases, cuz you can
 * handle updates but also have access to `RefObject`
 */
function useLiveRef(initialValue) {
  if (initialValue === void 0) {
    initialValue = null;
  }
  var ref = (0, _react.useRef)(initialValue);
  var forceUpdate = (0, _useForceUpdate.useForceUpdate)();
  var setRef = (0, _react.useCallback)(function (newRef) {
    if (newRef !== ref.current) {
      ref.current = newRef;
      forceUpdate();
    }
  }, [ref, forceUpdate]);
  return [ref, setRef];
}