I have this scenario:

const Comp = () => {
   const record = useRecordContext()  // local context
   const {read} = usePermissions(record.type)   // global context
   const somethingElse = useSomethingElse()  

   if (!read || record.status !== 'OPEN' || somethingElse) {
       return null
   }

   return ...
}

A component that might return null or ReactElement. The return logic is same everywhere, this is why it is inside the component and used like this across the app.

The thing is that whatever Comp returns, when used like <Comp /> it is always a valid element. It is included to the Virtual DOM. There is no way we can know what it returns without mounting it.

When I have array of components like this [<Comp />, <Comp2 /> ...] sometimes I need to filter out those that will return null. Let’s say I need the length of the elements that will render something on the Real DOM, not only on Virtual DOM.

Since only the Virtual DOM knows what a component returns, it is not possible to tell without rendering it what it might return.

I can move the logic outside of component into a hook, but it might not always work as intended, since I use local context providers as well. Also I want that logic to be stick with the component, if I separate it I might forget using it. If I create utility function for that, I have to manually put all the things it needs, since it won’t be able to get them itself using context providers (utility functions can’t use hooks)

I am looking for design patterns or tricks to keep the logic together with the component, so I can use it without thinking for its logic and in the same time I want to be able to filter it out as an empty component

Not looking for a trick similar to passing things from child to parent that tells him what it rendered.