Skip to content
This repository was archived by the owner on Feb 6, 2025. It is now read-only.

Bug: Combining connect with forwardRef results in wrong warning messages #773

Open
EidenEidenEiden opened this issue Apr 9, 2021 · 1 comment · May be fixed by frontity/react-easy-state#5
Assignees
Labels
bug Something isn't working

Comments

@EidenEidenEiden
Copy link

EidenEidenEiden commented Apr 9, 2021

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).

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
Copy link
Member

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 🙂

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
3 participants