title: React.js throwing a promise from within render
body: <p>I'm trying to understand why the following code is causing a infinite loop which makes the page completely unresponsive.</p>
  
  <pre><code>function lazy(importTaskFactory) {
    const f = function (props) {
        console.log("enter");
        debugger;
        const [value, setValue] = useState(null);
        const memoizedImportTask = useMemo(importTaskFactory, [importTaskFactory]);
        useEffect(() =&gt; {
            console.log("useEffect");
            debugger;
            memoizedImportTask
                .then(m =&gt; {
                console.log("settled");
                debugger;
                setValue(m);
            })
                .catch(err =&gt; {
                console.error(f.displayName, err);
            });
        }, [memoizedImportTask]);
        if (value) {
            if (!value.default) {
                throw new Error(`${importTaskFactory.toString()} - default export is required`);
            }
            return React.createElement(value.default, props);
        }
        console.log("throw");
        debugger;
        throw memoizedImportTask; // Suspense API
        console.log("throw memoizedImportTask!", memoizedImportTask);
        return null;
    };
    f.displayName = `lazy(${importTaskFactory.toString()})`;
    return f;
  }
  </code></pre>
  
  <p>The only thing this code accomplishes is logging <code>enter</code>, <code>throw</code>, <code>enter</code>, <code>throw</code>, <code>enter</code>, <code>throw</code>, etc. the <code>useEffect</code> hooks is never called and so the value is never set. This despite the promise has settled (resolved). Why is react in this particular case running this is some manner of a synchronous fashion?</p>