Compound components are groupings of smaller components that all work together to accomplish something and are exposed as subcomponents of a single root.

Here is a good article on compound components

React Hooks: Compound Components

The subcomponents should always live with the root component. We don't use them to namespace they should be working together to accomplish something.

export const UserContext = React.createContext<UserContext>(null)

const IsLoggedIn = ({ children }): React.ReactElement => {
  const { isLoggedIn } = useUserContext()
  return isLoggedIn ? children : null
}

const Anonymous = ({ children }): React.ReactElement => {
  const { isLoggedIn } = useUserContext()
  return isLoggedIn ? null : children
}

function User({ children }): React.ReactElement {
  const { data } = useMyPreferencesQuery()
  const [isLoggedIn, setIsLoggedIn] = useState(false)

  useEffect(() => {
    setIsLoggedIn(Boolean(data?.me.email))
  }, [data])

  return <UserContext.Provider value={{ isLoggedIn }}>{children}</UserContext.Provider>
}

User.IsLoggedIn = IsLoggedIn
User.Anonymous = Anonymous

export { User }