useSyncState.js 1.3 KB

1234567891011121314151617181920212223242526272829303132
  1. "use strict";
  2. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = useSyncState;
  8. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  9. var React = _interopRequireWildcard(require("react"));
  10. var _useEvent = _interopRequireDefault(require("./useEvent"));
  11. /**
  12. * Same as React.useState but will always get latest state.
  13. * This is useful when React merge multiple state updates into one.
  14. * e.g. onTransitionEnd trigger multiple event at once will be merged state update in React.
  15. */
  16. function useSyncState(defaultValue) {
  17. var _React$useReducer = React.useReducer(function (x) {
  18. return x + 1;
  19. }, 0),
  20. _React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
  21. forceUpdate = _React$useReducer2[1];
  22. var currentValueRef = React.useRef(defaultValue);
  23. var getValue = (0, _useEvent.default)(function () {
  24. return currentValueRef.current;
  25. });
  26. var setValue = (0, _useEvent.default)(function (updater) {
  27. currentValueRef.current = typeof updater === 'function' ? updater(currentValueRef.current) : updater;
  28. forceUpdate();
  29. });
  30. return [getValue, setValue];
  31. }