Bug: Combining connect with forwardRef results in wrong warning messages

[EidenEidenEiden]

Bug report

Hey guys,

wrapping a component in Reacts forwardRef while also connecting ({connect} from frontity) produces warnings about the component not being connected (which it is).

• I've updated both my project and my packages to the latest Frontity versions: https://docs.frontity.org/guides/keep-frontity-updated
• I've searched for existing issues.
• I've checked the documentation: https://docs.frontity.org
• I've checked the community forum: https://community.frontity.org

Expected behavior

Warning is not issued.

Observed behavior

Warning is issued:

Warning: useConnect() is being used in a non connected component, therefore the component won't update on state changes. Please wrap your component with connect().

Visit https://community.frontity.org for help! 🙂

Steps involved to reproduce the problem

import { forwardRef } from "react";
import { connect, useConnect } from "frontity";
import NewLink from "./newLink";

const MarsLink = forwardRef(({ children, linkComponent, ...props }, ref) => {
  const { state, actions } = useConnect();
  /**
   * A handler that closes the mobile menu when a link is clicked.
   */
  const onClick = () => {
    if (state.theme.isMobileMenuOpen) {
      actions.theme.closeMobileMenu();
    }
  };

  return (
    <NewLink linkComponent={linkComponent} {...props} ref={ref} onClick={onClick}>
      {children}
    </NewLink>
  );
});

export default connect(MarsLink, { injectProps: false });

Code is included in the steps involved to reproduce. Should be easy to check.

Info about your system

Node 14.15.0

Possible solution

Omit the warning / check for forwards

[luisherranz]

Hey @EidenEidenEiden, thanks for the heads up 🙂

Frontity connect() doesn't support forwardRef components yet because the underlaying implementation (view() from react-easy-state) doesn't either.

I opened an issue in the react-easy-state repository a while ago (RisingStack/react-easy-state#187) and @cristianbote and I have been exploring different options lately. The good news is that we found a way to solve it that satisfied us and we are going to add it soon. I'll check that your problem goes away once we do that change 🙂