consumer-hook-hack.jsx

/*
To avoid a lot of conditional checks on all consumer components, 
what if we had a hook to conditionally render from a context's data?
*/

// I wonder if this will work. Totally untested, but it's a concept.

function ConsumerComponent() {
  const data = useContext(SomeContext);
  
  return useConditional(!data, () => {
    useEffect(() => {
      console.log("I can haz hooks!")
    }, [data]);
    
    return <div>Date has been loaded: {data}</div>;
  });
}

function useConditional(condition, render) {
    return <ConditionalRenderer condition={condition}>{render()}</ConditionalRenderer>;
}

function ConditionalRenderer({condition, children}) {
  if (condition) {
    return children
  }
  else {
    return null
  }
}