Prevent console.log() while render is in progress about ink HOT 7 CLOSED

I'm seeing the same thing on 0.5.0. Here's a minimal repro:

import { h, render, Component, } from 'ink';

class Foo extends Component {
  componentDidMount () {
    setTimeout(() => this.setState({ a: 1 }));
  }

  render () {
    console.log('hihi')
    return 'X';
  }
}

render(<Foo/>);

The output is:

hihi
hihi
hihi
...many lines...
hihi
hihi
console.js:1
(function (exports, require, module, internalBinding) {// Copyright Joyent, Inc. and other Node contributors.
^

RangeError: Maximum call stack size exceeded
    at Console.log (console.js:1:1)
    at Console.console.(anonymous function).args [as log] (/path/to/repo/node_modules/ink/index.js:80:15)
    at Foo.render (/path/to/repo/lib/test/test.js:11:13)
    at Foo._render (/path/to/repo/node_modules/ink/lib/component.js:54:15)
    at rerender (/path/to/repo/node_modules/ink/lib/diff.js:74:35)
    at diff (/path/to/repo/node_modules/ink/lib/diff.js:154:3)
    at build (/path/to/repo/node_modules/ink/lib/renderer.js:10:9)
    at Renderer.update (/path/to/repo/node_modules/ink/lib/renderer.js:25:20)
    at Console.console.(anonymous function).args [as log] (/path/to/repo/node_modules/ink/index.js:81:16)
    at Foo.render (/path/to/repo/lib/test/test.js:11:13)

If it's helpful, the here's the transpiled source:

'use strict';

var _ink = require('ink');

class Foo extends _ink.Component {
  componentDidMount() {
    setTimeout(() => this.setState({ a: 1 }));
  }

  render() {
    console.log('hihi');
    return 'X';
  }
}

(0, _ink.render)((0, _ink.h)(Foo, null));

from ink.

Oddly, if you change the last two lines to this:

const Bar = () => <Foo/>;
render(<Bar/>);

The error output changes to this:

hihi
hihi
/path/to/repo/node_modules/ink/lib/diff.js:21
                return vnode.instance._pendingState || vnode.instance.state;
                                      ^

TypeError: Cannot read property '_pendingState' of null
    at getNextState (/path/to/repo/node_modules/ink/lib/diff.js:21:25)
    at diff (/path/to/repo/node_modules/ink/lib/diff.js:146:87)
    at diff (/path/to/repo/node_modules/ink/lib/diff.js:163:21)
    at build (/path/to/repo/node_modules/ink/lib/renderer.js:10:9)
    at Renderer.update (/path/to/repo/node_modules/ink/lib/renderer.js:25:20)
    at Console.console.(anonymous function).args [as log] (/path/to/repo/node_modules/ink/index.js:81:16)
    at Foo.render (/path/to/repo/lib/test/test2.js:11:13)
    at Foo._render (/path/to/repo/node_modules/ink/lib/component.js:54:15)
    at rerender (/path/to/repo/node_modules/ink/lib/diff.js:74:35)
    at diff (/path/to/repo/node_modules/ink/lib/diff.js:154:3)

Those last two lines transpile to this:

const Bar = () => (0, _ink.h)(Foo, null);
(0, _ink.render)((0, _ink.h)(Bar, null));

from ink.

Thanks for reporting, I reproduced the error, will look into it.

from ink.

Found the problem, since Ink has a special handling code for console methods (it clears the output, logs output, then rerenders again), it causes an infinite render loop. I will see if Ink could log a warning to prevent doing this or suppress console.log() while render is in progress. To fix this for now, move console.log() out of render() ;)

from ink.

@vadimdemedes I would suggest composing console.log output with render one

class MyComponent
...
setState(
  { name: 'perform 2' }, 
  () => console.log('perform 3')
)
...

render() {
  console.log('perform 1')
  return <div>{this.state.name}</div>
}

output:

perform 1
perform 2
perform 3

from ink.

@egoarka I wouldn't want to do that, since it's not an expected behavior of component's render() function and it's not that simple.

from ink.

Shouldn't be a problem anymore in Ink 2, since there's no more patching of console.log().

from ink.