Errors when navigating form Form Components which are using a custom component

Client
1

Hi,

We’re facing some problems with navigation between pages of the application after migrating to 2024.06-ext1. We’ve followed this suggestion from the migration docs in regards to Activity handling changes to fix some of our components:

// Client 15 and later
export function NewCustomViewComponent2(props: View): JSX.Element | null {
  const activity = useSelector(
    ActivitySelectors.activityById(props.activityId)
  );
 
  // note that in some cases the activity might not exist anymore
  if (!activity) {
    return null;
  }

Now, if such custom component is placed on a Form Component, then trying to navigate from it (let’s say selecting another item from Overview Component using Master Detail Flow) results in following error:

Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Is it a know issue?
Are there any solutions to mitigate it?
What can be the root cause of it?

2

OK, I guess I’ve found the solution. It’s strictly related to React.

3

yes correct. thats an issue with calling react hooks after a conditional return. in fact there should be an eslint plugin that should mark this already as an issue on coding time.

https://www.npmjs.com/package/eslint-plugin-react-hooks

project template already implements that plugin so you can also have a look into its eslint configuration.