How to use react-is - 10 common examples

const render = (reactEl, config, ShallowRender) => {
  if (!reactEl || typeof reactEl !== 'object') {
    return reactEl;
  }

  const isAlreadyMocked = Boolean(reactEl._mock);
  if (isAlreadyMocked) {
    reactEl._mock._render();
  }

  if (!isAlreadyMocked && ReactIs.isForwardRef(reactEl)) {
    const shallowRender = new ShallowRender(reactEl, config);

    return {
      ...shallowRender._rendered,
      _mock: shallowRender
    };
  }

  // When rendering modify the context value
  if (ReactIs.isContextProvider(reactEl) && reactEl.props.value) {
    reactEl.type._context._currentValue = reactEl.props.value;
  }

  if (!isAlreadyMocked && shouldBeRender(reactEl, config)) {
    const mock = config.mocks && config.mocks[reactEl.type.displayName || reactEl.type.name];
    const el = mock === true ? reactEl.type : mock || reactEl.type;

typeof element === 'function'
        ? ' Instead of passing a component class, make sure to instantiate ' +
          'it by passing it to React.createElement.'
        : '',
    );
    element = ((element: any): ReactElement);
    // Show a special message for host elements since it's a common case.
    invariant(
      typeof element.type !== 'string',
      'ReactShallowRenderer render(): Shallow rendering works only with custom ' +
        'components, not primitives (%s). Instead of calling `.render(el)` and ' +
        'inspecting the rendered output, look at `el.props` directly instead.',
      element.type,
    );
    invariant(
      isForwardRef(element) ||
        (typeof element.type === 'function' || isMemo(element)),
      'ReactShallowRenderer render(): Shallow rendering works only with custom ' +
        'components, but the provided element type was `%s`.',
      Array.isArray(element.type)
        ? 'array'
        : element.type === null
          ? 'null'
          : typeof element.type,
    );

    if (this._rendering) {
      return;
    }
    if (this._element != null && this._element.type !== element.type) {
      this._reset();
    }

typeof element === 'function'
        ? ' Instead of passing a component class, make sure to instantiate ' +
          'it by passing it to React.createElement.'
        : '',
    );
    element = ((element: any): ReactElement);
    // Show a special message for host elements since it's a common case.
    invariant(
      typeof element.type !== 'string',
      'ReactShallowRenderer render(): Shallow rendering works only with custom ' +
        'components, not primitives (%s). Instead of calling `.render(el)` and ' +
        'inspecting the rendered output, look at `el.props` directly instead.',
      element.type,
    );
    invariant(
      isForwardRef(element) ||
        (typeof element.type === 'function' || isMemo(element)),
      'ReactShallowRenderer render(): Shallow rendering works only with custom ' +
        'components, but the provided element type was `%s`.',
      Array.isArray(element.type)
        ? 'array'
        : element.type === null
          ? 'null'
          : typeof element.type,
    );

    if (this._rendering) {
      return;
    }
    if (this._element != null && this._element.type !== element.type) {
      this._reset();
    }

if (!(reactIs.isForwardRef(element) || typeof element.type === 'function' || reactIs.isMemo(element.type))) {
        {
          throw ReactError(Error("ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `" + (Array.isArray(element.type) ? 'array' : element.type === null ? 'null' : typeof element.type) + "`."));
        }
      }
    })();

    if (this._rendering) {
      return;
    }

    if (this._element != null && this._element.type !== element.type) {
      this._reset();
    }

    var elementType = reactIs.isMemo(element.type) ? element.type.type : element.type;
    var previousElement = this._element;
    this._rendering = true;
    this._element = element;
    this._context = getMaskedContext(elementType.contextTypes, context); // Inner memo component props aren't currently validated in createElement.

    if (reactIs.isMemo(element.type) && elementType.propTypes) {
      currentlyValidatingElement = element;
      checkPropTypes(elementType.propTypes, element.props, 'prop', getComponentName(elementType), getStackAddendum);
    }

    if (this._instance) {
      this._updateClassComponent(elementType, element, this._context);
    } else {
      if (shouldConstruct(elementType)) {
        this._instance = new elementType(element.props, this._context, this._updater);

'components, but the provided element type was `%s`.',
      Array.isArray(element.type)
        ? 'array'
        : element.type === null
          ? 'null'
          : typeof element.type,
    );

    if (this._rendering) {
      return;
    }
    if (this._element != null && this._element.type !== element.type) {
      this._reset();
    }

    const elementType = isMemo(element) ? element.type.type : element.type;
    const previousElement = this._element;

    this._rendering = true;
    this._element = element;
    this._context = getMaskedContext(elementType.contextTypes, context);

    // Inner memo component props aren't currently validated in createElement.
    if (isMemo(element) && elementType.propTypes) {
      currentlyValidatingElement = element;
      checkPropTypes(
        elementType.propTypes,
        element.props,
        'prop',
        getComponentName(elementType),
        getStackAddendum,
      );

currentlyValidatingElement = element;
          checkPropTypes(
            elementType.contextTypes,
            this._context,
            'context',
            getName(elementType, this._instance),
            getStackAddendum,
          );

          currentlyValidatingElement = null;
        }

        this._mountClassComponent(elementType, element, this._context);
      } else {
        let shouldRender = true;
        if (isMemo(element) && previousElement !== null) {
          // This is a Memo component that is being re-rendered.
          const compare = element.type.compare || shallowEqual;
          if (compare(previousElement.props, element.props)) {
            shouldRender = false;
          }
        }
        if (shouldRender) {
          const prevDispatcher = ReactCurrentDispatcher.current;
          ReactCurrentDispatcher.current = this._dispatcher;
          try {
            // elementType could still be a ForwardRef if it was
            // nested inside Memo.
            if (elementType.$$typeof === ForwardRef) {
              invariant(
                typeof elementType.render === 'function',
                'forwardRef requires a render function but was given %s.',

if (this._rendering) {
      return;
    }
    if (this._element != null && this._element.type !== element.type) {
      this._reset();
    }

    const elementType = isMemo(element) ? element.type.type : element.type;
    const previousElement = this._element;

    this._rendering = true;
    this._element = element;
    this._context = getMaskedContext(elementType.contextTypes, context);

    // Inner memo component props aren't currently validated in createElement.
    if (isMemo(element) && elementType.propTypes) {
      currentlyValidatingElement = element;
      checkPropTypes(
        elementType.propTypes,
        element.props,
        'prop',
        getComponentName(elementType),
        getStackAddendum,
      );
    }

    if (this._instance) {
      this._updateClassComponent(elementType, element, this._context);
    } else {
      if (shouldConstruct(elementType)) {
        this._instance = new elementType(
          element.props,

currentlyValidatingElement = element;
          checkPropTypes(
            elementType.contextTypes,
            this._context,
            'context',
            getName(elementType, this._instance),
            getStackAddendum,
          );

          currentlyValidatingElement = null;
        }

        this._mountClassComponent(elementType, element, this._context);
      } else {
        let shouldRender = true;
        if (isMemo(element) && previousElement !== null) {
          // This is a Memo component that is being re-rendered.
          const compare = element.type.compare || shallowEqual;
          if (compare(previousElement.props, element.props)) {
            shouldRender = false;
          }
        }
        if (shouldRender) {
          const prevDispatcher = ReactCurrentDispatcher.current;
          ReactCurrentDispatcher.current = this._dispatcher;
          try {
            // elementType could still be a ForwardRef if it was
            // nested inside Memo.
            if (elementType.$$typeof === ForwardRef) {
              invariant(
                typeof elementType.render === 'function',
                'forwardRef requires a render function but was given %s.',

const isAlreadyMocked = Boolean(reactEl._mock);
  if (isAlreadyMocked) {
    reactEl._mock._render();
  }

  if (!isAlreadyMocked && ReactIs.isForwardRef(reactEl)) {
    const shallowRender = new ShallowRender(reactEl, config);

    return {
      ...shallowRender._rendered,
      _mock: shallowRender
    };
  }

  // When rendering modify the context value
  if (ReactIs.isContextProvider(reactEl) && reactEl.props.value) {
    reactEl.type._context._currentValue = reactEl.props.value;
  }

  if (!isAlreadyMocked && shouldBeRender(reactEl, config)) {
    const mock = config.mocks && config.mocks[reactEl.type.displayName || reactEl.type.name];
    const el = mock === true ? reactEl.type : mock || reactEl.type;

    const shallowRender = new ShallowRender(
      React.createElement(
        el,
        reactEl.props,
        reactEl.props && reactEl.props.children
      ),
      config
    );

// This is a Memo component that is being re-rendered.
          var compare = element.type.compare || shallowEqual;

          if (compare(previousElement.props, element.props)) {
            shouldRender = false;
          }
        }

        if (shouldRender) {
          var prevDispatcher = ReactCurrentDispatcher.current;
          ReactCurrentDispatcher.current = this._dispatcher;

          try {
            // elementType could still be a ForwardRef if it was
            // nested inside Memo.
            if (elementType.$$typeof === reactIs.ForwardRef) {
              (function () {
                if (!(typeof elementType.render === 'function')) {
                  {
                    throw ReactError(Error("forwardRef requires a render function but was given " + typeof elementType.render + "."));
                  }
                }
              })();

              this._rendered = elementType.render.call(undefined, element.props, element.ref);
            } else {
              this._rendered = elementType(element.props, this._context);
            }
          } finally {
            ReactCurrentDispatcher.current = prevDispatcher;
          }