Chrome tab freezes with useLayoutEffect

Do you want to request a feature or report a bug? Bug

What is the current behavior? Browser tab freezes

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

I was playing around with hooks and just for the heck of it changed useEffect to useLayoutEffect and the browser crashed. After playing around I reduced it to this minimal code and it still crashes. To reproduce the bug, simply change useEffect to useLayoutEffect

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

const getProducts = () => {
  return Promise.resolve([
    { id: 1, name: 'Product A' },
    { id: 2, name: 'Product B' }
  ])
}

const App = () => {
  const [products, setProducts] = useState([])

  useEffect(() => {
    getProducts().then(p => {
      setProducts(p)
    })
  })

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

https://codesandbox.io/s/zl9vz5yxol

When you make the change if you close the browser tab fast enough (it stalls for a few seconds for me but will close). But if I wait too long I have to force quit chrome

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React/Dom: 16.7.0-alpha.2 Chrome: Version 71.0.3578.98 (Official Build) (64-bit) macOS Mojave 10.14.1

[bradwestfall]

oops, my fault on the second arg. Also I can see with this being a loop why it might be difficult to mitigate. Maybe some docs on it would be good. Since it’s not an explicit looking infinite loop, I’m sure there will be some others who fall into this on accident

[heyimalex]

The issue is that you’re causing an infinite loop. You almost fixed the code, but you actually passed the array parameter to getProducts.then instead of useLayoutEffect. Here’s a fixed sandbox.