@zohodesk/components/lib/utils/ContextOptimizer.js

In this Package, we Provide Some Basic Components to Build Web App

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ContextOptimizer = ContextOptimizer;

var _react = require("react");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _shallowEqual = _interopRequireDefault(require("./shallowEqual"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/** ** Libraries *** */
// Please use this component with children as inline function for force this components rerender when parent rerender regardless of reason
// Because below componends only rerender when children or calculation are changed, unless no changes will update below
// this component logic based on return same children reference to stop rerender.
// Think before change logic
// eslint-disable-next-line import/prefer-default-export
function ContextOptimizer(props) {
  var Context = props.Context,
      renderF = props.children,
      calculation = props.calculation;
  var contextData = (0, _react.useContext)(Context);
  var data = calculation(contextData);

  var _useRef = (0, _react.useRef)({
    children: null,
    data: null,
    renderF: null
  }),
      local = _useRef.current;

  if (!(0, _shallowEqual["default"])(data, local.data) || local.renderF !== renderF) {
    local.children = renderF(data);
    local.data = data;
    local.renderF = renderF;
  }

  return local.children;
}

ContextOptimizer.propTypes = {
  calculation: _propTypes["default"].func.isRequired,
  children: _propTypes["default"].func.isRequired,
  Context: _propTypes["default"].any.isRequired
};