Bug: typescript can't determine well useMemo value

[ballonura]

React version: 18.2.0
TypeScript version: 5.0.2

The expected behavior

  const shouldNotRender = useMemo(() => !organization || !ehrUser, [organization, ehrUser]);
  // if (!organization || !ehrUser) return null;

  if (shouldNotRender) return null;

  return (
    <UserManagement
      showNotification={showUserManagementNotification}
      user={{ ...ehrUser, organization }}
      onRolesChanged={onRolesChanged}
    />
  );

Error

The current behavior

  // const shouldNotRender = useMemo(() => !organization || !ehrUser, [organization, ehrUser]);
  if (!organization || !ehrUser) return null;

  // if (shouldNotRender) return null;

  return (
    <UserManagement
      showNotification={showUserManagementNotification}
      user={{ ...ehrUser, organization }}
      onRolesChanged={onRolesChanged}
    />
  );

No error

[eps1lon]

This is a TypeScript limitation I believe. TS would also not refine the type if you put the condition in an function call which is was useMemo basically is.

[ballonura]

Should be fixed on TypeScript version 5.4

Preserved Narrowing in Closures Following Last Assignments
YouTube

[HermanBide]

are you still experiencing the same issues?

[yhekim]

The error occurs because TypeScript indicates that the organization variable can be of type Organization or undefined. This is inferred from its usage within the useMemo hook, where it is listed as a dependency along with ehrUser.

When you try to pass organization directly as part of the user object, TypeScript raises an error because organization might be undefined, and therefore cannot be directly assigned to a variable of type Organization.

To resolve this error, you need to check if organization is defined before attempting to use it. You can modify your code to conditionally render the UserManagement component only if organization is defined. For example:

if (shouldNotRender || !organization) return null;

return (
<UserManagement
showNotification={showUserManagementNotification}
user={{ ...ehrUser, organization }}
onRolesChanged={onRolesChanged}
/>
);
In this way, if the organization is undefined, UserManagement will not work and in this way the application will not show errors.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[josephsavona]

Thanks for posting and thanks everyone for suggestions on how to resolve. Since this isn’t an issue with React I’m going to close.