`Box` `height` doesn't reset on re-render

It appears that the height property might be updated when re-rendering a component, though I may be misunderstanding something!

Here’s a quick example:

// We're waiting for an async process, so we'll want a loading state.
const [results, setResults] = useState([])
useEffect(() => {
  loadResults().then(output => {
    setResults(output)
  })
}, [])

// Loading state if we're still waiting on the results
if (results.length === 0) {
  return (
    <Box height={3}>
      <Color grey>Loading...</Color>
    </Box>
  )
}

// Once the results load, show the list:
return (
  <Box flexDirection="column">
    <Color>1</Color>
    <Color>2</Color>
    <Color>3</Color>
    <Color>4</Color>
    <Color>5</Color>
  </Box>
)

I would expect to see all five numbers printed out, but only see the first three:

$ yarn dev
1
2
3

When run with debug=true:

PS – would be nice if debug mode added in a newline in between renders!

$ yarn dev --debug
Loading...

1
2
31
2

Note: I just swapped height out with marginTop/marginBottom here and it works fine!

[vadimdemedes]

I can’t believe I just spent an entire day debugging React internals and all it was is just out-dated react-reconciler dependency that I had. Kill me now.

[vadimdemedes]

Yeah, I had the exact same problem few days ago. Replacing useEffect with useLayoutEffect has solved it for me. Check out https://github.com/vadimdemedes/ink/pull/147#issuecomment-531598933. TLDR is useEffect doesn’t run soon enough after Ink renders a frame, so process exits before setTimeout is executed in your code. useLayoutEffect however, ensures to run the effect immediately after render.